3.3二维几何体——长方形、圆.docxVIP

3.3 二维几何体——长方形、圆Three.js中有几种几何体可以创建二维网格：CircleGeometry、PlaneGeometry和ShapeGeometry。二维几何体看上去是扁平的，顾名思义，它们只有两个维度。PlaneGeometryPlaneGeometry可以用来创建非常简单的二维矩形。程序截图如下：创建这种几何体非常简单，如下所示：new THREE.PlaneGeometry(width,height,widthSegments,heightSegments);在这个PlaneGeometry例子中，可以修改它的属性，并立即查看修改的结果。关于这些属性的解释列在下表中：属性必须描述width（宽度）是矩形的宽度height（高度）是矩形的高度widthSegments（宽度段数）否矩形的宽度应该划分成几段heightSegmentss（高度段数）否矩形的高度应该划分成几段如果你想创建更多的面（比如，一种拥有多个方格的样式），你可以使用widthSegments属性和heightSegments属性，将这个矩形分成多个小面。该示例中用到的材质需要做一个简短的说明。我们使用如下的方法在这些几何体上创建网格：function createMesh(geom) {// 两种材质var meshMaterial = new THREE.MeshNormalMaterial(); meshMaterial.side = THREE.DoubleSide;var wireFrameMat = new THREE.MeshBasicMaterial(); wireFrameMat.wireframe = true;// 创建一个使用组合材质的网格对象var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);return plane;}在这个函数里，我们基于传入的几何体创建了一个拥有多个材质的网格。第一个材质是NormaIMaterial，这种材质基于物体表面的法向向量来计算它们的颜色。我们还把这种材质设置成双面的（THREE.DoubleSide）。如果不这么做，那么当物体的背面朝向相机的时候，就会看不到它。我们还添加了一个BasicMatreial材质，通过它来打开线框效果。这样我们就可以看到该物体在三维空间中形状以及该几何体创建的面。完整代码!DOCTYPEhtmlhtmlheadtitle示例03.03.01 - 二维几何体 - 平面/titlescriptsrc=../../../Scripts/jquery-2.1.3.min.js/scriptscriptsrc=../../../Scripts/Threejs/three.min.js/scriptscriptsrc=../../../Scripts/Threejs/stats.js/scriptscriptsrc=../../../Scripts/Threejs/dat.gui.min.js/scriptstylebody {/*将margin设置为0，overflow设置为hidden，可让浏览器显示全屏*/margin: 0;overflow: hidden; }/style/headbodydivid=Stats-output/div!-- 作为Canvas容器的div --divid=WebGL-output/divscripttype=text/javascript// 页面加载完毕后，就可以运行Three.js了。 $(function () {var stats = initStats();// 创建scene对象，用来容纳网格、相机、光源等对象var scene = new THREE.Scene();// 创建相机var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.x = -20; camera.position.y = 30; camera.position.z = 40; camera.lookAt(new THREE.Vector3(10, 0, 0));// 创建渲染器，并设置视口大小和清除色var webGLRenderer = new THREE.WebGLRenderer(); webGLRenderer.setClearColor(