Three.js基础探寻五——正二十面体、圆环面等

　　除了立方体、平面、球体，Three.js还提供了很多其他几何形状。

1.圆形

　　CircleGeometry可以创建圆形或者扇形：

THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)

　　　　radius：半径

　　　　segmentsWidth：经度上的分段数

　　　　segmentsHeight：纬度上的分段数

　　　　thetaStart：纬度开始的弧度

　　　　thetaLength：纬度跨过的弧度

　　new THREE.CircleGeometry(3, 18, Math.PI / 3, Math.PI / 3 * 4) 创建一个在x轴和y轴所在平面的三分之二圆的扇形：

2.圆柱体

　　圆柱体（CylinderGeometry）的构造函数是：

THREE.CylinderGeometry(radiusTop,radiusBottom,height,radiusSegments, heightSegments, openEnded)

　　　　radiusTop：顶面半径

　　　　radiusBottom：底面的半径

　　　　height：圆柱体的高度

　　　　radiusSegments：顶面与底面的分段数

　　　　heightSegments：侧面的分段数

　　　　openEnded：是否没有顶面和底面，布尔类型，缺省值为false，表示有顶面和底面。

　　当radiusTop和radiusBottom设置为相同的值时，创建的是一个标准圆柱体：

　　new THREE.CylinderGeometry(2, 2, 4, 18, 3)创建一个顶面与底面半径都为2，高度为4的圆柱体：

　　当radiusTop和radiusBottom设置为不同的值时，创建的是一个圆台。new THREE.CylinderGeometry(2, 3, 4, 18, 3)将底面半径设为3：

　　openEnded设置为true时创建一个没有顶面与底面的圆台，new THREE.CylinderGeometry(2, 3, 4, 18, 3, true)的效果：

3.正四面体，正八面体，正二十面体

　　正四面体（TetrahedronGeometry）、正八面体（OctahedronGeometry）、正二十面体（IcosahedronGeometry）的构造函数较为类似，分别为：

THREE.TetrahedronGeometry(radius, detail)

THREE.OctahedronGeometry(radius, detail)

THREE.IcosahedronGeometry(radius, detail)

　　其中，radius是半径；detail是细节层次（Level of Detail）的层数，对于大面片数模型，可以控制在视角靠近物体时，显示面片数多的精细模型，而在离物体较远时，显示面片数较少的粗略模型。这里我们不对detail多作展开，一般可以对这个值缺省。

　　new THREE.TetrahedronGeometry(3)创建一个半径为3的正四面体：

　　new THREE.OctahedronGeometry(3)创建一个半径为3的正八面体：

乍一看有点像光能使者的魔法阵哈，用三维的眼光去看。

　　new THREE.IcosahedronGeometry(3)创建一个半径为3的正二十面体：

4.圆环面

　　圆环面（TorusGeometry）的形状类似甜甜圈，其构造函数是：

THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)

　　　　radius：圆环半径

　　　　tube：管道半径

　　　　radialSegments：径向的分段数

　　　　tubularSegments：管的分段数，详见下图

　　　　arc：圆环面的弧度，缺省值为Math.PI * 2

　　new THREE.TorusGeometry(3, 1, 4, 8)创建一个粗糙的圆环面：

　　new THREE.TorusGeometry(3, 1, 12, 18)创建一个较为精细的圆环面：

这个就很像甜甜圈了。

　　new THREE.TorusGeometry(3, 1, 4, 8, Math.PI / 3 * 2)创建部分圆环面：

5.圆环结

　　圆环结（TorusKnotGeometry）的构造参数为：

THREE.TorusKnotGeometry(radius,tube,radialSegments,tubularSegments, p, q, heightScale)

　　　　radius：圆环半径

　　　　tube：管道半径

　　　　radialSegments：径向的分段数

　　　　tubularSegments：管的分段数

　　　　p：pQ:对knot(节)状方式有效,控制曲线路径缠绕的圈数，其中p决定垂直方向的参数（可缺省）

　　　　q：水平方向的参数（可缺省）

　　　　heightScale：z轴方向上的缩放，默认值1

　　new THREE.TorusKnotGeometry(2, 0.5, 32, 8)的效果：

　　关于圆环结的详细内容可参看维基百科。

6.源码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>3.js测试五</title>
 6     </head>
 7     <body onload="init()">
 8         <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
 9     </body>
10     <script type="text/javascript" src="js/three.min.js"></script>
11     <script type="text/javascript">
12         function init() {
13             var renderer = new THREE.WebGLRenderer({
14                 canvas: document.getElementById('mainCanvas')
15             });
16             renderer.setClearColor(0x000000);
17             var scene = new THREE.Scene();
18             
19             // camera
20             var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
21             camera.position.set(25, 25, 25);
22             camera.lookAt(new THREE.Vector3(0, 0, 0));
23             scene.add(camera);
24             
25             var material = new THREE.MeshBasicMaterial({
26                 color: 0xffff00,
27                 wireframe: true
28             });
29             
30               drawCircle(scene, material);        //圆形
31 //            drawCylinder(scene, material);    //圆柱体
32 //            drawTetra(scene, material);        //正四面体
33 //            drawOcta(scene, material);        //正八面体
34 //            drawIcosa(scene, material);        //正二十面体
35 //            drawTorus(scene, material);        //圆环面
36 //            drawTorusKnot(scene, material);    //圆环结
37             
38             // render
39             renderer.render(scene, camera);
40         }
41         
42         function drawCircle(scene, material) {
43             var circle = new THREE.Mesh(new THREE.CircleGeometry(3, 18, Math.PI / 3, Math.PI / 3 * 4), material);
44             scene.add(circle);
45         }
46         
47         function drawCylinder(scene, material) {
48 //          var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 2, 4, 18, 3), material);
49 //            var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 3, 4, 18, 3), material);
50               var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 3, 4, 18, 3, true), material);
51             scene.add(cylinder);
52         }
53         
54         function drawTetra(scene, material) {
55             var tetra = new THREE.Mesh(new THREE.TetrahedronGeometry(3), material);
56             scene.add(tetra);
57         }
58         
59         function drawOcta(scene, material) {
60             var octa = new THREE.Mesh(new THREE.OctahedronGeometry(3), material);
61             scene.add(octa);
62         }
63         
64         function drawIcosa(scene, material) {
65             var icosa = new THREE.Mesh(new THREE.IcosahedronGeometry(3), material);
66             scene.add(icosa);
67         }
68         
69         function drawTorus(scene, material) {
70 //          var torus = new THREE.Mesh(new THREE.TorusGeometry(3, 1, 12, 18), material);
71             var torus = new THREE.Mesh(new THREE.TorusGeometry(3, 1, 4, 8, Math.PI / 3 * 2), material);
72             scene.add(torus);
73         }
74         
75         function drawTorusKnot(scene, material) {
76             var torus = new THREE.Mesh(new THREE.TorusKnotGeometry(2, 0.5, 32, 8), material);
77             scene.add(torus);
78         }
79         
80     </script>
81 </html>

　　整理自张雯莉《Three.js入门指南》

　　其他参考：three.js源码注释（八十三）

　　文字形状与自定义形状