three.js 01-02 之首个场景（续）

在上一个示例中，我们仅在场景里添加了一个坐标轴，本篇我们将在上一个示例中，继续添加几个图形进去。我们仍然以上一个示例为范本，找到其中的第40行代码如下：

scene.add(new THREE.AxisHelper(20));// 加入坐标轴

然后我们继续在其后追加以下代码行：

// 加入一个几何平面var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);var planeMaterial = new THREE.MeshBasicMaterial( {color: 0xCCCCCC, side: THREE.DoubleSide, wireframe: false} );var plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.rotation.x = -0.5 * Math.PI; // 沿着 X轴旋转-90°plane.position.x = 15; // 几何平面位置沿着 x轴右移 15个单位plane.position.y = 0; // 几何平面位置 y轴为 0plane.position.z = 0; // 几何平面位置 z轴为 0scene.add(plane);// 加入一个立方体var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);var cubeMaterial = new THREE.MeshBasicMaterial( {color: 0xFF0000, wireframe: true} );var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.position.x = -4;cube.position.y = 3;cube.position.z = 0;scene.add(cube);// 加入一个球体var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);var sphereMaterial = new THREE.MeshBasicMaterial( {color: 0x7777FF, wireframe: false} );var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);sphere.position.x = 20;sphere.position.y = 4;sphere.position.z = 2;scene.add(sphere);

其中，我们加入了三个图形，分别是：一个几何平面、一个立方体以及一个球体。

现在我们来对各个图形 API 做一个简要的说明：

PlaneGeometry(width, height, widthSegments, heightSegments)
width — 沿着X轴方向上的宽度；
height — 沿着Y轴方向上的高度；
widthSegments — 可选。宽度上的分段数，默认值为 1；
heightSegments — 可选。高度上的分段数，默认值为 1；

BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
width — 在X轴方向上边的宽度；
height — 在Y轴方向上边的高度；
depth — 在Z轴方向上边的深度；
widthSegments — 可选。沿宽度方向上的分段面数，默认值为 1；
heightSegments — 可选。沿高度方向上的分段面数，默认值为 1；
depthSegments — 可选。沿深度方向上的分段面数，默认值为 1；

SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
radius — 球体半径，默认为 50；
widthSegments — 水平方向上的分段数。最小值为 3，默认值为 8；
heightSegments — 垂直方向上的分段数。最小值为 2，默认值为 6；
phiStart — 指定水平方向上的起始角度，默认值为 0；
phiLength — 指定水平方向上的扫描角大小，默认值为 2π；
thetaStart — 指定垂直方向上的起始角度，默认值为 0；
thetaLength — 指定垂直方向上的扫描角大小，默认值为 π；

MeshBasicMaterial( parameters )

parameters — 可选。带有一个或多个定义材质外观的 properties 对象。任何从 Material 继承的材质 property 均可传给此参数。譬如：{ color: 0xFF00EE, wireframe: true}，其中 color 代表颜色，wireframe 代表是否为线框模式。

Mesh( geometry, material )
geometry — 可选。一个 Geometry 或者 BufferGeometry 对象实例，默认为一个新的 BufferGeometry 对象。
material — 可选。一个 Material 对象实例，默认为一个新的带随机色的 MeshBasicMaterial 对象。

因此，从上面的代码中可以看出，想要添加一个图形到场景中去，通常的套路是：

1、声明一个 Geometry 几何对象；

2、声明一个 Material 材质对象；

3、根据前两个对象声明一个 Mesh 对象，并把这个 Mesh 对象通过场景实例 scene.add(mesh) 方法加入到场景中去即可···

未完待续···