miaoYu

## 3D WebGL入门之几何体

3D模型(或者网格)由顶点，边和面组成。

#### 创建立方体

``````// 创建几何体使用BoxGeometry方法
var geometry = new THREE.BoxGeometry( 20, 20, 20);
// 创建材料
var material = new THREE.MeshNormalMaterial();
// 几何体网格化，以及把材料应用到几何体中
var cube = new THREE.Mesh( geometry, material );

``````

#### 结果

<iframe height='265' scrolling='no' title='A Three.js cube' src='//codepen.io/rachsmith/embed/qbgBNo/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen A Three.js cube by Rachel Smith (@rachsmith) on CodePen. </iframe>

#### 位置和旋转

`````` // 让立方体旋转
cube.rotation.x = 0.45;
cube.rotation.y = -0.25;

// 让立方体在x方向移动
cube.position.x = -30;

``````
<iframe height='265' scrolling='no' title='A Three.js cube - rotated' src='//codepen.io/rachsmith/embed/GozRMb/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen A Three.js cube - rotated by Rachel Smith (@rachsmith) on CodePen. </iframe>

<iframe height='265' scrolling='no' title='A Three.js icosahedron - spinning' src='//codepen.io/rachsmith/embed/Rrvwpv/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen A Three.js icosahedron - spinning by Rachel Smith (@rachsmith) on CodePen. </iframe>

#### 修改几何体的顶点

Three.js可以帮助你修改立方体的样子，你可以把几何体修改成你想要的样子。几何体有一个属性叫做vertices - 它是包含所有顶点的数组。你可以修改这些顶点的位置，甚至可以从顶点数组中新增或者移除。

``````// 修改立方体的顶点
for (var i = 0, l = geometry.vertices.length; i<l; i++) {
// 我们通过一个随机数将每个顶点沿x轴和y轴移动
geometry.vertices[i].x += -10 + Math.random()*20;
geometry.vertices[i].y += -10 + Math.random()*20;
}

``````

<iframe height='265' scrolling='no' title='A Three.js cube - modified vertices' src='//codepen.io/rachsmith/embed/adXbqG/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen A Three.js cube - modified vertices by Rachel Smith (@rachsmith) on CodePen. </iframe>

@yakudoo超可爱小鸟

<iframe height='265' scrolling='no' title='Paranoid vs shy birds' src='//codepen.io/Yakudoo/embed/LVyJXw/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Paranoid vs shy birds by Karim Maaloul (@Yakudoo) on CodePen. </iframe>

@aglosson水晶 (用你的鼠标旋转它)

<iframe height='265' scrolling='no' title='Spinning Ball of Crystal' src='//codepen.io/aglosson/embed/rVyRGm/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Spinning Ball of Crystal by Amanda Glosson (@aglosson) on CodePen. </iframe>