使用Three.js网页引擎创建酷炫的3D效果的标签墙
使用Three.js引擎（这是开源的webgl三维引擎，gitgub）进行一个简单应用。
做一个酷炫的3d效果的标签墙（已经放在我的博客首页的右下角，pc可见），
去我的博客首页看看实际效果 www.songshizhao.com
静态效果如下图所示：
让所有的标签组成一个球体，并且运动起来。可以手动拖拽，点击可以跳转等等。。
做完之后小小的总结一下。最后我会把本文的代码整理为html分享在这篇文章下面
首先第一步创建一个载体，
<div id="canvas" style="width: 100%; background: url(images/background/bg1.jpg) no-repeat center; height: 400px;"> <%--列表--%> </div>
这个载体的作用就是将三维引擎的内容呈现在其中，关键是自定义一个id名字，我用canvas，其余都正常。
然后把你想要做动态展示的标签写出来，放在id=‘canvas’元素里，每个标签都需要有id属性。因为我是动态生成的，就不举例子了。three.js可以查找页面中元素放到三维界面当中，也可以输出元素（js方式）到界面中，为了简单我自己做好标签元素然后进行提取。
引用Three.js核心代码
Three.js很丰富，其他的根据需要引用。我的引用如下
<script src="../webgl/three.js-master/build/three.js"></script> <script src="../webgl/three.js-master/examples/js/controls/OrbitControls.js"></script> <script src="../webgl/three.js-master/examples/js/renderers/CSS3DRenderer.js"></script>
其中three.js是必须引用的，第二个引用是支持旋转缩放，第三个自己看名字就知道。
最后根据需要使用Three.js引擎，这个有一套固定的写法。比如初始化，渲染等等。正像其他引擎一样！
<script type="text/javascript">
var camera, renderer, scene;
var controls;
var objects=new Array();
var thetas = new Array();
var phis = new Array();
var r = 450;
int();
animate();
function int() {
camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 2000000);
camera.position.set(0,0,720);
scene = new THREE.Scene();
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var phi = Math.acos(-1 + (2 * i) / elements.length);
phis.push(phi);
var theta = Math.sqrt(elements.length * Math.PI) * phi;
thetas.push(theta);
var object = new THREE.CSS3DObject(element);
object.position.x = r * Math.cos(theta) * Math.sin(phi);
object.position.z = r * Math.sin(theta) * Math.sin(phi);
object.position.y = r * Math.cos(phi);
scene.add(object);
objects.push(object);
}
renderer = new THREE.CSS3DRenderer;
//设置大小
renderer.setSize(400, 400);
render();
document.getElementById('canvas').appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();
window.addEventListener('resize', onWindowResize, false);
controls.addEventListener('change', render);
}
function render() {
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame(animate);
var phi = Math.acos(-1 + (2 * i) / elements.length);
var theta = Math.sqrt(elements.length * Math.PI) * phi;
for (var i = 0; i < objects.length; i++)
{
thetas[i] += 0.001;//phis[i] -= 0.001;
objects[i].position.x = r * Math.cos(thetas[i]) * Math.sin(phis[i]);
objects[i].position.z = r * Math.sin(thetas[i]) * Math.sin(phis[i]);
objects[i].position.y = r * Math.cos(phis[i]);
//启用下面的代码，标签朝向不变，但因此不可拖拽。
//var vector = camera.position;
//vector.copy(objects[i].position - vector).multiplyScalar(1);
//objects[i].lookAt(vector);
}
render();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(400, 400);
render();
}
</script>
用js写三维引擎的代码，是不是很酷，这样就把3d的标签墙做好了，想要看看效果吗？去我的首页看看吧！
我去整理整理，把aspx文件提取一下打包成html发表下吧！
接上文！整理结束，做了简单的demo，欢迎使用！
如果你觉得内容不错的话，就请留个言，谢谢！
下载地址：请前往我的独立博客尾部下载（阅读原文）
http://songshizhao.com/blog/blogPage/98.html
