three.js 05-01 之 PlaneGeometry 几何体

three.js 库中的材质就已经基本上介绍完了。本篇开始我们将逐个深入 three.js 中各种几何体的细节。在 three.js 中，常用的几何体包括：

二维几何体：

PlaneGeometry 平面
CircleGeometry 圆形
ShapeGeometry 塑形

三维几何体：

BoxGeometry 立方体（或叫三维方块）
SphereGeometry 球体
CylinderGeometry 柱体
TorusGeometry 圆环
TorusKnotGeometry 环面扭结
PolyhedronGeometry 多面体
IcosahedronGeometry 十二面体
OctahedronGeometry 八面体
TetrahedronGeometry 四面体

复杂几何体：

ConvexGeometry 凸面体
LatheGeometry 扫描面
ExtrudeGeometry 拉伸几何体
TubeGeometry 管状体
ParametricGeometry 参数几何体
TextGeometry 文本几何体

我们先来看看第一个 PlaneGeometry 二维平面，常用的属性如下表所示：

属性	描述
width （宽度）	必选。此属性指定矩形的宽度
height （高度）	必选。此属性指定矩形的高度
widthSegments （宽度段数）	可选。此属性指定矩形的宽度应该划分成多少段来表示
heightSegments （高度段数）	可选。此属性指定矩形的高度应该划分成多少段来表示

这种几何体非常简单，只要指定尺寸就可以了。如果你想创建一种由多个方格组成的样式，那你可以使用 widthSegments 和 heightSegments 属性将矩形划分成多个小面，从而达到你想要的目的。由于比较简单，不在过多嗷述，下面直接给出一个具体的示例：

<!DOCTYPE html>
<html>
<head>
    <title>示例 05.01 - PlaneGeometry</title>
	<script src="../build/three.js"></script>
	<script src="../build/js/controls/OrbitControls.js"></script>
	<script src="../build/js/libs/stats.min.js"></script>
	<script src="../build/js/libs/dat.gui.min.js"></script>
	<script src="../jquery/jquery-3.2.1.min.js"></script>
    <style>
        body {
            /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式 */
            margin: 0;
            overflow: hidden;
        }
		/* 统计对象的样式 */
		#Stats-output {
			position: absolute;
			left: 0px;
			top: 0px;
		}
    </style>
</head>
<body>

<!-- 用于 WebGL 输出的 Div -->
<div id="webgl-output"></div>
<!-- 用于统计 FPS 输出的 Div -->
<div id="stats-output"></div>

<!-- 运行 Three.js 示例的 Javascript 代码 -->
<script type="text/javascript">

	var scene;
	var camera;
	var render;
	var webglRender;
	//var canvasRender;
	var controls;
	var stats;
	var guiParams;
	
	var ground;
	//var cube;
	//var sphere;
	var plane;
	
	var meshMaterial;
	
	var ambientLight;
	var spotLight;
	//var cameraHelper;

    $(function() {
		stats = initStats();
		scene = new THREE.Scene();
		
		webglRender = new THREE.WebGLRenderer( {antialias: true, alpha: true} ); // antialias 抗锯齿
		webglRender.setSize(window.innerWidth, window.innerHeight);
		webglRender.setClearColor(0xeeeeee, 1.0);
		webglRender.shadowMap.enabled = true; // 允许阴影投射
		render = webglRender;
		
		camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 30, 1000); // 2147483647
		camera.position.set(-45.5, 68.2, 90.9);
		
		var target = new THREE.Vector3(10, 0 , 0);
		controls = new THREE.OrbitControls(camera, render.domElement);
		controls.target = target;
		camera.lookAt(target);
		
		$('#webgl-output')[0].appendChild(render.domElement);
		window.addEventListener('resize', onWindowResize, false);
		
		ambientLight = new THREE.AmbientLight(0x0c0c0c);
		scene.add(ambientLight);
		
		spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(0, 30, 60);
        spotLight.castShadow = true;
        scene.add(spotLight);
		//cameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);
		//scene.add(cameraHelper);
		
		// 加入一个地面
		var groundGeometry = new THREE.PlaneGeometry(100, 100, 4, 4);
		var groundMaterial = new THREE.MeshBasicMaterial({color: 0x777777});
		ground = new THREE.Mesh(groundGeometry, groundMaterial);
		ground.rotation.set(-0.5 * Math.PI, 0, 0); // 沿着 X轴旋转-90°
		scene.add(ground);
		
		// 定义 plane
		var planeGeometry;

		// 材质
        meshMaterial = [
			new THREE.MeshNormalMaterial({side: THREE.DoubleSide}),
			new THREE.MeshBasicMaterial({wireframe: true})
		];
		
		/** 用来保存那些需要修改的变量 */
		guiParams = new function() {
			this.rotationSpeed = 0.02;
			this.width = 26;
			this.height = 29;
			this.widthSegments = 1;
			this.heightSegments = 1;
			
			this.update = function() {
				scene.remove(plane);
				
				planeGeometry = new THREE.PlaneGeometry(this.width, this.height, this.widthSegments, this.heightSegments);
				plane = new THREE.SceneUtils.createMultiMaterialObject(planeGeometry, meshMaterial);
				plane.castShadow = true;
				plane.position.set(0, 12, 0);
				scene.add(plane);
			}
		}
		/** 定义 dat.GUI 对象，并绑定 guiParams 的几个属性 */
		var gui = new dat.GUI();
		var folder = gui.addFolder('Mesh');
		folder.open();
		folder.add(guiParams, 'width', 1, 50).onChange(function(e) {
			guiParams.update();
		});
		folder.add(guiParams, 'height', 1, 50).onChange(function(e) {
			guiParams.update();
		});
		folder.add(guiParams, 'widthSegments', 1, 10, 1).onChange(function(e) {
			guiParams.update();
		});
		folder.add(guiParams, 'heightSegments', 1, 10, 1).onChange(function(e) {
			guiParams.update();
		});
		
		guiParams.update();
		
		renderScene();
    });
	
	/** 渲染场景 */
	function renderScene() {
		stats.update();
		rotateMesh(); // 旋转物体
		
		requestAnimationFrame(renderScene);
		render.render(scene, camera);
	}
	
	/** 初始化 stats 统计对象 */
	function initStats() {
		stats = new Stats();
		stats.setMode(0); // 0 为监测 FPS；1 为监测渲染时间
		$('#stats-output').append(stats.domElement);
		return stats;
	}
	
	/** 当浏览器窗口大小变化时触发 */
	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		render.setSize(window.innerWidth, window.innerHeight);
	}
	
	/** 旋转物体 */
	var step = 0;
	function rotateMesh() {
		step += guiParams.rotationSpeed;
		scene.traverse(function(mesh) {
			if (mesh instanceof THREE.Mesh && mesh != ground) {
				//mesh.rotation.x = step;
				mesh.rotation.y = step;
				//mesh.rotation.z = step;
			}
		});
	}

</script>
</body>
</html>

在该实例中（后续几个示例同理），我们用到了组合材质，一个是 MeshNormalMaterial 法向量材质，并且设置其 side 属性为 THREE.DoubleSide。这样做的目的是，使得当物体背面朝向相机的时候，也要让我们能看得见它；另一个是 MeshBasicMaterial 基础材质，通过它来打开线框效果，这样我们就能看到该物体在三维空间中的具体形状（譬如宽度段数及高度段数的划分情况等）。

未完待续···