three.js学习之常见几何体圆柱和球

这是学习three.js的第六篇博客，想循序渐进的学习，可以到目录下查看。在开始之前先创建一个learnCylinderGeometrySphereGeometry.html文件，然后将three.js学习之常见几何体平面圆形和圆锥中的代码复制过来，删除掉绘制平面圆形和圆锥的部分。

three.js基本图形之圆柱(CylinderGeometry)

有了three.js学习之常见几何体平面圆形和圆锥的经验及生活常识，相信此时大家对于圆柱体构造所需要传递的参数已经猜到了几分了，也就是圆柱的半径，高度，分段线，是否开口，开始结束角度等参数。实际上也确实是这样，接下来我们按照传入顺序来看一下这些参数。

  • radiusTop 圆柱的顶部半径，默认值为1，
  • radiusBottom 圆柱底部的半径，默认值为1。按道理来讲，有一个半径就行了，但是这里却设置了两个传入方式，事出反常必有妖，我们试着将底部半径和顶部设置成不一样的看看会怎么样。
  • height 圆柱的高度，默认值是1
  • radialSegments 圆柱径向（垂直）分段线，沿着圆柱底部或者顶部切割，像切蛋糕一样，默认是8
  • heightSegments 圆柱侧面沿着高度的分界线，像切萝卜一样，默认值是1
  • openEnded 布尔值，指出圆柱的底部是打开还是关闭，默认是关闭的。这里其实有个问题，哪里是底部？我们后面实际操作看看情况
  • thetaStart 圆柱的开始角度，默认为0
  • thetaLength 圆柱的结束角度，默认为1。开始角度和结束角度算是咱们的老朋友了，在平面圆形，圆锥部分都有用过。

看完了基本传入参数，接下来就到了实战环节。

  • 基本用法three.js基本图形之圆柱(CylinderGeometry)基础用法

1
2
3
4
5
6
const cylinderMaterial1 = new THREE.MeshPhongMaterial({ color: 0x00F5FF }) // 构建显示用的材料
const cylinderGeometry1 = new THREE.CylinderGeometry(1, 1, 2) // 构建显示用的图元，传入底面半径和顶部半径，还有高度，其它的都默认
const cylinder1 = new THREE.Mesh(cylinderGeometry1, cylinderMaterial1) // 圆柱构建完成
const lineMaterial1 = new THREE.LineBasicMaterial( { color: 0xffffff} );
const lineGeometry1 = new THREE.WireframeGeometry( cylinderGeometry1 );
const line1 = new THREE.Line(lineGeometry1, lineMaterial1)

  • three.js基本图形之圆柱(CylinderGeometry)顶部半径和底部半径不相等

和基础的形态相比，我将底部的半径设置成了0.5，顶部的设置成了2，我们就造出了一个圆锥来。因此看圆锥可以说是圆柱的一种特殊形式。不过单独把圆锥放出来，是为了性能的考虑。

1
2
3
4
5
6
const cylinderMaterial1 = new THREE.MeshPhongMaterial({ color: 0x00F5FF }) // 构建显示用的材料
const cylinderGeometry1 = new THREE.CylinderGeometry(0.5, 1, 2) // 构建显示用的图元，传入底面半径和顶部半径，还有高度，其它的都默认
const cylinder1 = new THREE.Mesh(cylinderGeometry1, cylinderMaterial1) // 圆柱构建完成
const lineMaterial1 = new THREE.LineBasicMaterial( { color: 0xffffff} );
const lineGeometry1 = new THREE.WireframeGeometry( cylinderGeometry1 );
const line1 = new THREE.Line(lineGeometry1, lineMaterial1)

  • three.js基本图形之圆柱(CylinderGeometry)radialSegments和heightSegments设置

    • 首先设置radialSegments我们看看
      在基础展示的基础上，我修改了如下代买
      const cylinderGeometry1 = new THREE.CylinderGeometry(1, 1, 2)
      改为
      const cylinderGeometry1 = new THREE.CylinderGeometry(1, 1, 2, 3)
      然后就出现了如下的三面体




      如果我们从1开始继续修改radialSegments,会发现图形从无到平面，再到三面体，四面体，七面，八面体。随着分割线越来越多，我们的圆柱也越来越圆。接下来我们将radialSegments设置为比较大的数，看看情况：
      const cylinderGeometry1 = new THREE.CylinderGeometry(1, 1, 2, 3)
      改成
      const cylinderGeometry1 = new THREE.CylinderGeometry(1, 1, 2, 10)

    • 再来看看heightSegments设置后的样子

      将 const cylinderGeometry1 = new THREE.CylinderGeometry(1, 1, 2, 10)
      改成
      const cylinderGeometry1 = new THREE.CylinderGeometry(1, 1, 2, 3)

      可以看到水平方向有两条线将圆柱分成了三段。

  • three.js基本图形之圆柱(CylinderGeometry)openEnded设置
    现在，我们看看这个openEnded到底是打开那个面
    将 const cylinderGeometry1 = new THREE.CylinderGeometry(1, 1, 2, 10)
    改成
    const cylinderGeometry1 = new THREE.CylinderGeometry(1, 1, 2, 3, true)



    有没有发现，bbq了，两边都是开口的。所以我们前面说的是错的，相信很多人会和我有一样的想法，觉得是其中的一个面。

  • three.js基本图形之圆柱(CylinderGeometry)thetaStart 和 thetaLength设置

    thetaStart的默认值是0，thetaLength的默认值是2PI，因此正好构成一个闭环，因此对他两进行设置，都可以改变闭环的情况，接着改代码
    将 const cylinderGeometry1 = new THREE.CylinderGeometry(1, 1, 2, 10)
    改成
    `const cylinderGeometry1 = new THREE.CylinderGeometry(1, 1, 2, 3, false,0, 1.5     Math.PI)`

到这里，three.js中关于圆柱的cylinderGeometry基本用法，我们已经学习完了，相信将多个参数进行适当的调整，还会创造出更多的不同实体来。

可以点击链接查看完整示例，右键查看完整的源代码
关于圆柱部分完整的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
{
        // 添加圆形
        const cylinderMaterial1 = new THREE.MeshPhongMaterial({ color: 0x00F5FF })
        const cylinderGeometry1 = new THREE.CylinderGeometry(1, 1, 2)
        const cylinder1 = new THREE.Mesh(cylinderGeometry1, cylinderMaterial1)
        cylinder1.rotation.z = 1
        const lineMaterial1 = new THREE.LineBasicMaterial( { color: 0xffffff} );
        const lineGeometry1 = new THREE.WireframeGeometry( cylinderGeometry1 );
        const line1 = new THREE.Line(lineGeometry1, lineMaterial1)
        line1.rotation.z = 1
        if (search.includes('cylinder1') || !search) {
            group.add(cylinder1, line1)
        }

        const cylinderMaterial2 = new THREE.MeshPhongMaterial({ color: 0x00F5FF })
        const cylinderGeometry2 = new THREE.CylinderGeometry(0.1, 1, 2)
        const cylinder2 = new THREE.Mesh(cylinderGeometry2, cylinderMaterial2)
        cylinder2.rotation.z = 1
        cylinder2.position.x = -3
        const lineMaterial2 = new THREE.LineBasicMaterial( { color: 0xffffff} );
        const lineGeometry2 = new THREE.WireframeGeometry( cylinderGeometry2 );
        const line2 = new THREE.Line(lineGeometry2, lineMaterial2)
        line2.rotation.z = 1
        line2.position.x = -3
        if (search.includes('cylinder2') || !search) {
            group.add(cylinder2, line2)
        }

        const cylinderMaterial3 = new THREE.MeshPhongMaterial({ color: 0x00F5FF })
        const cylinderGeometry3 = new THREE.CylinderGeometry(1, 1, 2, 3)
        const cylinder3 = new THREE.Mesh(cylinderGeometry3, cylinderMaterial3)
        cylinder3.rotation.z = 1
        if (!search.includes('cylinder3')) {
            cylinder3.position.x = 3
        }
        const lineMaterial3 = new THREE.LineBasicMaterial( { color: 0xffffff} );
        const lineGeometry3 = new THREE.WireframeGeometry( cylinderGeometry3 );
        const line3 = new THREE.Line(lineGeometry3, lineMaterial3)
        line3.rotation.z = 1
        if (!search.includes('cylinder3')) {
            line3.position.x = 3
        }
        if (search.includes('cylinder3') || !search) {
            group.add(cylinder3, line3)
        }

        const cylinderMaterial4 = new THREE.MeshPhongMaterial({ color: 0x00F5FF })
        const cylinderGeometry4 = new THREE.CylinderGeometry(1, 1, 2, 10)
        const cylinder4 = new THREE.Mesh(cylinderGeometry4, cylinderMaterial4)
        cylinder4.rotation.z = 1
        if (!search.includes('cylinder4')) {
            cylinder4.position.x = -6
        }
        const lineMaterial4 = new THREE.LineBasicMaterial( { color: 0xffffff} );
        const lineGeometry4 = new THREE.WireframeGeometry( cylinderGeometry4 );
        const line4 = new THREE.Line(lineGeometry4, lineMaterial4)
        line4.rotation.z = 1
        if (!search.includes('cylinder4')) {
            line4.position.x = -6
        }
        if (search.includes('cylinder4') || !search) {
            group.add(cylinder4, line4)
        }

        const cylinderMaterial5 = new THREE.MeshPhongMaterial({ color: 0x00F5FF })
        let cylinderGeometry5 = ''
        if (search.includes('cylinder5')) {
            cylinderGeometry5 = new THREE.CylinderGeometry(3, 3, 6, 10, 3)
        } else {
            cylinderGeometry5 = new THREE.CylinderGeometry(1, 1, 2, 10, 3)
        }
        const cylinder5 = new THREE.Mesh(cylinderGeometry5, cylinderMaterial5)
        // cylinder5.rotation.z = 1
        if (!search.includes('cylinder5')) {
            cylinder5.position.x = 6
        }
        const lineMaterial5 = new THREE.LineBasicMaterial( { color: 0xffffff} );
        const lineGeometry5 = new THREE.WireframeGeometry( cylinderGeometry5 );
        const line5 = new THREE.Line(lineGeometry5, lineMaterial5)
        // line5.rotation.z = 1
        if (!search.includes('cylinder5')) {
            line5.position.x = 6
        }
        if (search.includes('cylinder5') || !search) {
            group.add(cylinder5, line5)
        }

        const cylinderMaterial6 = new THREE.MeshPhongMaterial({ color: 0x00F5FF })
        let cylinderGeometry6 = ''
        if (search.includes('cylinder6')) {
            cylinderGeometry6 = new THREE.CylinderGeometry(3, 3, 6, 10, 3, true)
        } else {
            cylinderGeometry6 = new THREE.CylinderGeometry(1, 1, 2, 10, 3, true)
        }
        const cylinder6 = new THREE.Mesh(cylinderGeometry6, cylinderMaterial6)
        cylinder6.rotation.z = 1
        if (!search.includes('cylinder6')) {
            cylinder6.position.x = -9
        }
        const lineMaterial6 = new THREE.LineBasicMaterial( { color: 0xffffff} );
        const lineGeometry6 = new THREE.WireframeGeometry( cylinderGeometry6 );
        const line6 = new THREE.Line(lineGeometry6, lineMaterial6)
        line6.rotation.z = 1
        if (!search.includes('cylinder6')) {
            line6.position.x = -9
        }
        if (search.includes('cylinder6') || !search) {
            group.add(cylinder6, line6)
        }

        const cylinderMaterial7 = new THREE.MeshPhongMaterial({ color: 0x00F5FF })
        let cylinderGeometry7 = ''
        if (search.includes('cylinder7')) {
            cylinderGeometry7 = new THREE.CylinderGeometry(3, 3, 6, 10, 3, false,0, 1.2 * Math.PI)
        } else {
            cylinderGeometry7 = new THREE.CylinderGeometry(1, 1, 2, 10, 3, false,0, 1.2 * Math.PI)
        }
        const cylinder7 = new THREE.Mesh(cylinderGeometry7, cylinderMaterial7)
        // cylinder7.rotation.z = 1
        if (!search.includes('cylinder7')) {
            cylinder7.position.x = 9
        }
        const lineMaterial7 = new THREE.LineBasicMaterial( { color: 0xffffff} );
        const lineGeometry7 = new THREE.WireframeGeometry( cylinderGeometry7 );
        const line7 = new THREE.Line(lineGeometry7, lineMaterial7)
        // line7.rotation.z = 1
        if (!search.includes('cylinder7')) {
            line7.position.x = 9
        }
        if (search.includes('cylinder7') || !search) {
            group.add(cylinder7, line7)
        }

three.js基本图形之球体(SphereGeometry)

创建球体需要的参数如下，需要按顺序传入：

  • radius 球体的半径，默认为1
  • widthSegments 球体沿着经线的分界线，可以理解从左到右，最小3，默认值为32。想象将西瓜切成一牙一牙的。
  • heightSegments 沿着纬线的分界线，最小2，默认值是16，想象将西瓜切成圆形一片片的。
  • phiStart 沿着经线（左右）的起始角，默认为0
  • phiLength 沿着经线（左右）的结束角度，默认为Math.PI * 2
  • thetaStart 沿着为纬线（上下）的开始角度，默认为0。

  • thetaLength 沿着为纬线（上下）的结束角度，默认为Math.PI

  • three.js基本图形之球体(SphereGeometry)基本用法

    基本用法很简单，只需要根据需要设置球体的半径即可，其它的都选择默认便可。如下：

    1
    2
    cosnt sphereGeometry = new THREE.SphereGeometry(2);
    const sphereMaterial = new THREE.MeshPhongMaterial({color: 0f00f5f5})

    这样，简单的球体就出现了

  • three.js基本图形之球体(SphereGeometry)设置widthSegments和heightSegments

    关于分段线，我们已经在其它地方说的足够多了，这里的demo演示一个极端的例子，剩下的希望有心人自己去探索


    请相信你的眼睛，这个瘪瘪的东西，是我设置了widthSegments和heightSegments后出现的，代码改动如下

    cosnt sphereGeometry = new THREE.SphereGeometry(2);
    改成了
    cosnt sphereGeometry = new THREE.SphereGeometry(2, 3, 4);
    写代码嘛，没事多做探索，总有惊喜在等着。自己去探索一下吧。

  • three.js基本图形之球体(SphereGeometry)设置phiStart 和 phiLength

    文档上说，这两条线是沿着平行于经线的起始角，接下来我们将他们设置一下，看看具体情况。当然，如果你知道经线是啥，也许早就知道了。
    cosnt sphereGeometry = new THREE.SphereGeometry(2, 3, 4);
    改成
    cosnt sphereGeometry = new THREE.SphereGeometry(2, 3, 4, 0, 1.2 * Math.PI);
    如果是拍视频，我一定会让各位猜一下接下来会出现什么，可惜不是拍视频，大家一眼就能看到

    可以看到，球体被掏走了一半，剩下了一半的球体。相信随着phiStart 和 phiLength位置的变化，我们还将看到更多的形态，希望有缘人多多尝试。

    • three.js基本图形之球体(SphereGeometry)设置thetaStart和thetaLength

      cosnt sphereGeometry = new THREE.SphereGeometry(2, 3, 4);
      改成
      cosnt sphereGeometry = new THREE.SphereGeometry(2, 3, 4, 0, 2 * Math.PI,0, 0.5 * Math.PI);

    可以看到，球体从上到下留下了一半。相信到了这里。

到了这里，相信大家对于three.js中球体SphereGeometry的用法有了一个比较全面的认识了，下面我将源码贴出来，同时想看完整demo的同学可以点击three.js学习之常见几何体圆柱和球demo查看所有示例及右键查看所有代码。

源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
{
       // 添加球形
       let sphereGeometry1 = ''
       if (search.includes('sphere1')) {
           sphereGeometry1 = new THREE.SphereGeometry(4)
       } else {
           sphereGeometry1 = new THREE.SphereGeometry(1, 10, 10)
       }
       const sphereMaterial1 = new THREE.MeshPhongMaterial({color: 0x00F5FF})
       const sphere1 = new THREE.Mesh(sphereGeometry1, sphereMaterial1)
       if (!search.includes('sphere1')) {
           sphere1.position.y = -4
       }
       const sphereLine1Material = new THREE.LineBasicMaterial({color: 0xffffff})
       const sphereLine1Geometry = new THREE.WireframeGeometry(sphereGeometry1)
       const sphereLine1 = new THREE.Line(sphereLine1Geometry, sphereLine1Material)
       if (!search.includes('sphere1')) {
           sphereLine1.position.y = -4
       }
       if (search.includes('sphere1') || !search) {
           group.add(sphere1, sphereLine1)
       }


       let sphereGeometry2 = ''
       if (search.includes('sphere2')) {
           sphereGeometry2 = new THREE.SphereGeometry(4, 3, 4)
       } else {
           sphereGeometry2 = new THREE.SphereGeometry(2, 3, 4)
       }
       const sphereMaterial2 = new THREE.MeshPhongMaterial({color: 0x00F5FF})
       const sphere2 = new THREE.Mesh(sphereGeometry2, sphereMaterial2)
       if (!search.includes('sphere2')) {
           sphere2.position.y = -4
           sphere2.position.x = -4
       }
       const sphereLine2Materia = new THREE.LineBasicMaterial({color: 0xffffff})
       const sphereLine2Geometry = new THREE.WireframeGeometry(sphereGeometry2)
       const sphereLine2 = new THREE.Line(sphereLine2Geometry, sphereLine2Materia)
       if (!search.includes('sphere2')) {
           sphereLine2.position.y = -4
           sphereLine2.position.x = -4
       }
       if (search.includes('sphere2') || !search) {
           group.add(sphere2, sphereLine2)
       }

       let sphereGeometry3 = ''
       if (search.includes('sphere3')) {
           sphereGeometry3 = new THREE.SphereGeometry(4, 10, 10,0, 1.2 * Math.PI)
       } else {
           sphereGeometry3 = new THREE.SphereGeometry(2, 10, 10, 0, 1.2 * Math.PI)
       }
       const sphereMaterial3 = new THREE.MeshPhongMaterial({color: 0x00F5FF})
       const sphere3 = new THREE.Mesh(sphereGeometry3, sphereMaterial3)
       if (!search.includes('sphere3')) {
           sphere3.position.y = -4
           sphere3.position.x = 4
       }
       const sphereLine3Materia = new THREE.LineBasicMaterial({color: 0xffffff})
       const sphereLine3Geometry = new THREE.WireframeGeometry(sphereGeometry3)
       const sphereLine3 = new THREE.Line(sphereLine3Geometry, sphereLine3Materia)
       if (!search.includes('sphere3')) {
           sphereLine3.position.y = -4
           sphereLine3.position.x = 4
       }
       if (search.includes('sphere3') || !search) {
           group.add(sphere3, sphereLine3)
       }

       let sphereGeometry4 = ''
       if (search.includes('sphere4')) {
           sphereGeometry4 = new THREE.SphereGeometry(4, 10, 10,0, 2 * Math.PI, 0, 0.5 * Math.PI)
       } else {
           sphereGeometry4 = new THREE.SphereGeometry(2, 10, 10, 0, 2 * Math.PI, 0, 0.5 * Math.PI)
       }
       const sphereMaterial4 = new THREE.MeshPhongMaterial({color: 0x00F5FF})
       const sphere4 = new THREE.Mesh(sphereGeometry4, sphereMaterial4)
       if (!search.includes('sphere4')) {
           sphere4.position.y = 4
       }
       const sphereLine4Materia = new THREE.LineBasicMaterial({color: 0xffffff})
       const sphereLine4Geometry = new THREE.WireframeGeometry(sphereGeometry4)
       const sphereLine4 = new THREE.Line(sphereLine4Geometry, sphereLine4Materia)
       if (!search.includes('sphere4')) {
           sphereLine4.position.y = 4
       }
       if (search.includes('sphere4') || !search) {
           group.add(sphere4, sphereLine4)
       }
   }