Geometry的种类

这里将Geometry理解为几何体不知道是否合适。前面的例子中我们用到过BoxGeometry来创建一个立方体。除了BoxGeometry之外Three.js还提供了很多拆箱即用的几何体，例如：圆形（CircleGeometry）、柱体（CylinderGeometry）、球体（SphereGeometry）、文字（TextGeometry）等等。后面会对这些常见的几何体用法做一个简单的介绍。 
除了Three.js内置的几何体之外，我们还可以自定义一个几何体，或者导入符合Three.js规范，由其他的3d 
建模工具构造的3d模型（其实这些模型就是json格式的数据）。

立方体（BoxGeometry）

老版本里面貌似是CubeGeometry，在r76版本的文档中，使用的是BoxGeometry。

构造函数

BoxGeometry(width, height, dept, widthSegments, heightSegments, depthSegments) 
- width,height,dept分别是长宽高 
-widthSegments, heightSegments, deptSegments是对应长宽高的分段，在使用线模式({wireframe:true})进行渲染的时候，可以看到效果如下。

var cubeGeometry = new THREE.BoxGeometry(6, 6, 6, 2, 3, 1);var cubeMaterial = new THREE.MeshBasicMaterial({    wireframe : true});cubeMaterial.color = new THREE.Color('red');var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
1
2
3
4
5
6

 
长宽高分别被截为2段，3段，1段。

球体（SphereGeometry）

构造函数

SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength) 
- radius：球体半径 
- widthSegments, heightSegments：水平方向和垂直方向上分段数。widthSegments最小值为3，默认值为8。heightSegments最小值为2，默认值为6。 
- phiStart：水平方向上的起始角,默认值0 
- phiLenght：水平方向上球体曲面覆盖的弧度，默认Math.PI * 2 
- thetaStart : 垂直方向上的起始角， 默认0 
- thetaLength: 垂直方向是球体曲面覆盖的弧度，默认值为Math.PI

多边形（ShapeGeometry）

前面都是一些立体的图形，多边形(ShapeGeometry)用来创建一个平面多边形。

构造函数

ShapeGeometry(shapes, options) 
- shapes形状数组 
- 可选的参数对象，可配置参数curveSegments, meterial, UVGenerator。

实例方法

• addShapeList(shapes, options)添加图形（Shape实例）列表到多边形中
• addShape(shape, options)添加单个图形（Shape实例）到多边形中。

例子

var rectShape= new THREE.Shape();rectShape.moveTo(1,4);rectShape.lineTo(1, 8);rectShape.lineTo(5, 8);rectShape.lineTo(5, 4);rectShape.lineTo(3, -4);rectShape.lineTo(1, 4);var rectGeom = new THREE.ShapeGeometry( rectShape );var rectMesh = new THREE.Mesh( rectGeom, new THREE.MeshBasicMaterial( { color: 0xff0000 } ) ) ;
1
2
3
4
5
6
7
8
9

自定义了一个五边形

让几何体旋转起来

戳这里 
前面的例子中，物体都是静止不动的，这里我们让这些几何体旋转起来。 
我们眼睛的视觉是有一个滞留时间的，当物体消失的时候，物体还会在我们眼前停留一段时间。通过连续不断的快速的刷新画面并改变物体的状态和位置，在我们的人眼看来物体就好像动起来了似得。 
通过setInterval和requestAnimationFrame都可以实现定时执行的效果，requestAnimationFrame()把执行的间隔时间交给浏览器决定，浏览器在合适的时间内会执行传给其的代码。 
setInterval()精确的控制代码执行的间隔时间，如果浏览器比较忙，一个执行周期内代码没有执行完成，下一个周期的代码执行会被阻碍但是不会被抛弃。通过setInterval和requestAnimationFrame 
都可以实现定时执行的效果，requestAnimationFrame()是专门为浏览器绘制动画提供的api，在绘制的时候会提供一些优化，例如当页面不在激活状态的时候动画会暂停 
执行，节省cpu的执行时间。

function render(){    renderer.render(scene, camera);    scene.getObjectByName('cube').rotation.x += control.rotationSpeedX;    scene.getObjectByName('cube').rotation.y += control.rotationSpeedY;    scene.getObjectByName('cube').rotation.z += control.rotationSpeedZ;    requestAnimationFrame(render);}render();
1
2
3
4
5
6
7
8

在每个执行周期内，我们都改变几何体的rotation属性，来让几何体旋转起来。

几何体绕其他点旋转

戳这里 
上个例子几何体本身进行自转，现在我们让几何体绕某个点进行公转。其中我们利用了这么一点，THREE.Mesh是可以嵌套的，且 
父元素位置的变动或者角度转换都会影响到子元素。 
 
1. 首先新建中间的球体 
“` 
var sphereGeometry = new THREE.SphereGeometry(6.5, 20, 20);

```
1
2

2. 创建一个轴点

```pivotPoint = new THREE.Object3D();sphereMesh.add(pivotPoint);```
1
2
3
4
5

这里我们使用了Object3D，Object3D是THREE.Mesh的基类，即使没有几何体(Geometry)和材质(Material)也可以添加到场景(Scene)中。 
这里我们实例化一个Object3D对象，作为sphereMesh的子元素添加到sphereMesh中，因为sphereMesh已经添加到场景(Scene)中，因此其子元素不用重复添加到 
场景(Scene)中。 
3. 创建围绕球体运动的方体

var cubeGeometry = new THREE.BoxGeometry(2,2,2);var cubeMaterial = new THREE.MeshLambertMaterial({            color : 0xff0000        });var cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);pivotPoint.add(cubeMesh);
1
2
3
4
5
6

将立方体作为子元素添加到上面新建的Object3D实例中，然后旋转pivotPoint，作为pivotPoint的子元素的立方体也跟着旋转起来了。

不同于之前的操作，都是将构造好的3d模型独立添加到场景中，这里的例子通过构造不同3d模型的父子关系，利用父元素的变化，子元素也会做响应的改变来实现公转的效果。