在上一个示例中,我们仅在场景里添加了一个坐标轴,本篇我们将在上一个示例中,继续添加几个图形进去。我们仍然以上一个示例为范本,找到其中的第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轴为 0
plane.position.z = 0; // 几何平面位置 z轴为 0
scene.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) 方法加入到场景中去即可···
未完待续···