Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。——百度百科

　　Three.js封装了OpenGl ES 2.0 的API，使得我们更容易在浏览器上开发各种图形效果。比起使用winform，MFC等形式，这个代码库可以让我们避开一些winform和MFC的细节问题，而专注于图形的绘制。不过由于这个库也并没有封装到非常完美，所以有些部分还需要我们自己来实现。

　　在此贴上Three.js中文文档的连接地址Three.js 中文文档 | 参考手册 | 使用指南 | 动画特效实例 | 踏得网

　　虽然这个链接上的文档有一些错误，还有许多坑，很多东西都没有说明清楚，不过，也是可以参考的。

　　如果要直接看效果，可以直接下载文章末尾的源代码，附带了操作方式。还需要使用电脑浏览器打开代码，因为没有对移动端做适配，所以移动端效果不好。

　　接下来，让我们实现一个机器人的手臂运动效果。效果如下图

　　很丑对不对，但这只是一个教程，所以美化可以自己来做，过多的美化工作反而会增加学习的复杂程度。

　　我们制作这个机器人，需要解决的一些问题是：

　　　　1.如何让我们的图形沿着任意轴转动；

　　　　2.如何使用键盘控制其转动；

　　这两个问题解决了，那么我们的机器人也就非常容易绘制了。接下来，就开始详解代码以及思路了。

　　首先，我们需要生成一个canvas，因为在html5中，所有的绘图工作都是在canvas中进行。我们可以写一个canvas标签，也可以让Three.js帮我们生成一个。这里我们让Three.js帮我们生成：

1 var scene = new THREE.Scene(); 2 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); 3 camera.position.z = 5; 4 camera.position.y = 1; 5 camera.position.x = 1.5; 6 camera.lookAt(new THREE.Vector3(0, 0, 0)); 7 scene.add(camera); 8 var renderer = new THREE.WebGLRenderer(); 9 renderer.setSize(window.innerWidth, window.innerHeight); 10 document.body.appendChild(renderer.domElement);

　　为什么相机要进行位置的调整呢？这是因为，如果我们不调整位置，那么我们的视角是正对着物体的，物体的3D效果会因为视角问题而显得不那么明显。

　　接下来，我们要绘制机器人的头，腿，身体。需要注意的是，如果我们为我们生成的图形选择了不合适的材质，会导致3D效果观察不明显。关于材质的选择，已经超出了要讲述的范围，所以为了演示简单，我们只使用基本材质。代码如下：

geometry = new THREE.BoxGeometry(1, 1, 1, 8, 8, 8); 3 var material = new THREE.MeshBasicMaterial({ 4 color: 0x00ff00, }); 7 var cube = new THREE.Mesh(geometry, material); 8 cube.position.y = -1; head = new THREE.SphereGeometry(0.5, 32, 32); 11 var material = new THREE.MeshBasicMaterial({ 12 color: 0x0909FD, 13 wireframe: true 14 }); 15 var sp = new THREE.Mesh(head, material); geometry = new THREE.BoxGeometry(0.1, 1, 0.1); 18 var material = new THREE.MeshBasicMaterial({ 19 color: 0xFF2E67, 20 wireframe: true 21 }); 22 var left_leg = new THREE.Mesh(geometry, material); 23 var right_leg = new THREE.Mesh(geometry, material); 24 left_leg.position.x = -0.3; 25 left_leg.position.y = -2; 26 right_leg.position.x = 0.3; 27 right_leg.position.y = -2;

　　我们的机器人就画成了这样：

　　接下来，就到了最关键的地方：机器人手臂的转动。很多刚学习的同学都发现，我们的图形的旋转轴是在图形的正中心。什么意思呢？看这个图：

　　我在图中已经标识了我们生成物体的坐标轴，可以看出，坐标轴实际上是在位置的重心。我们通过函数或者设置属性的方法，只能绕着这三个轴转。有同学问，可不可以通过先移位，再旋转，再移回原位置的方式来解决这个问题呢？我们的计算机图形学课本上是这么教的，在winfoem和MFC上也是可以做到的，但由于three.js生成的物体的坐标轴的特殊性，我们无法通过这种形式来解决（亲测）。有兴趣的同学可以自己试一试。