three.js 01-02 之首个场景(续)

  • Post author:
  • Post category:其他


在上一个示例中,我们仅在场景里添加了一个坐标轴,本篇我们将在上一个示例中,继续添加几个图形进去。我们仍然以上一个示例为范本,找到其中的第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) 方法加入到场景中去即可···

未完待续···



版权声明:本文为zhulx_sz原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。