這裡將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);

長寬高分別被截為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 } ) ) ;

自定義了一個五邊形

讓幾何體旋轉起來

戳這裡
前面的例子中，物體都是靜止不動的，這裡我們讓這些幾何體旋轉起來。
我們眼睛的視覺是有一個滯留時間的，當物體消失的時候，物體還會在我們眼前停留一段時間。通過連續不斷的快速的重新整理畫面並改變物體的狀態和位置，在我們的人眼看來物體就好像動起來了似得。
通過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();

在每個執行週期內，我們都改變幾何體的rotation屬性，來讓幾何體旋轉起來。

幾何體繞其他點旋轉

戳這裡
上個例子幾何體本身進行自轉，現在我們讓幾何體繞某個點進行公轉。其中我們利用了這麼一點，THREE.Mesh是可以巢狀的，且
父元素位置的變動或者角度轉換都會影響到子元素。

1. 首先新建中間的球體
“`
var sphereGeometry = new THREE.SphereGeometry(6.5, 20, 20);

```

2. 建立一個軸點

```
pivotPoint = new THREE.Object3D();
sphereMesh.add(pivotPoint);
```

這裡我們使用了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);

將立方體作為子元素新增到上面新建的Object3D例項中，然後旋轉pivotPoint，作為pivotPoint的子元素的立方體也跟著旋轉起來了。

不同於之前的操作，都是將構造好的3d模型獨立新增到場景中，這裡的例子通過構造不同3d模型的父子關係，利用父元素的變化，子元素也會做響應的改變來實現公轉的效果。