2022-09-12

three.js学习之常见几何体平面圆形和圆锥

在three.js学习之盒子中，我们已经能够做出立方体并且根据需要进行变换了，点此可以查看demo。

有了上一节的基础，我们就可以适当加快学习进度。这一节我们一起学习一些常见的几何体图形。

首先还是将three.js学习之盒子中的代码复制过来，新将html文件learnAboutCommonGeometry.html，然后删除掉有关立方体的代码，保留下来的代码如下：

function main () {                    
    const canvas = document.querySelector('#three')
    const renderer = new THREE.WebGLRenderer({canvas})
    const fov = 75;
    const aspect = 2;
    const near = 0.1;
    const far = 200;

    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)

    const group = new THREE.Group()
    group.position.z = -10
    
    const scene = new THREE.Scene()
    {
        const lightColor = 0xffffff; // 灯光颜色
        const intensity = 1; // 灯光强度
        const light = new THREE.DirectionalLight(lightColor, intensity);
        light.position.set(-1, 2, 4);
        scene.add(light);
    }
    scene.add(group)

    function resizeRenderSizeToDisplaySize () {
        const pixelRatio = window.devicePixelRatio;
        const displayWidth = canvas.clientWidth * pixelRatio 
        const displayHeight = canvas.clientHeight * pixelRatio
        const renderWidth = canvas.width;
        const renderHeight = canvas.height;
        const needResize = displayWidth !== renderWidth || displayHeight !== renderHeight
        return needResize
    }
    function render (time) {
        if (resizeRenderSizeToDisplaySize()) {
            const pixelRatio = window.devicePixelRatio;
            const width = canvas.clientWidth * pixelRatio
            const height = canvas.clientHeight * pixelRatio
            renderer.setSize(width, height, false)
            camera.aspect = canvas.clientWidth  / canvas.clientHeight;
            camera.updateProjectionMatrix();
        }

        time *= 0.001
        group.position.y = time
        group.position.x = time
        renderer.render(scene, camera)
        requestAnimationFrame(render)
    }
    requestAnimationFrame(render)
}

细心的朋友应该发现我对自适应代买resizeRenderSizeToDisplaySize做了调整，各位根据自己的喜好，这一部分可调整可不调整。关于three.js中的自适应问题，可以查看threejs响应式设计开发。

平面圆形（CircleGeometry）

CircleGeometry可以接收四个参数，分别是：

radius 圆的半径
segments 分段数（组成圆的三角形的数量），最小值为3，默认为8
thetaStart 第一个分段的起始角，默认为0。起始角位于三点钟方向处。
thetaLength，圆心角的大小，默认是2Pi。正好组成一个圆,如果参数不是2PI的时候，方向为逆时针。

可以看出来，在构造圆形时，我们可以不传入任何参数，就能构造出一个圆形来,因为我们以学几何体为主，所以我们所有的材料(Material)和线条，直接开始构造设计图

const circle1Geometry = new THREE.CircleGeometry()
const circleMaterial = new THREE.MeshPhongMaterial({ color: 0x00F5FF })
const circle1 = new THREE.Mesh(circle1Geometry, circleMaterial)
group.add(circle1)

是不是感觉一切正常。接下来我们分别传入半径和分段数看看情况

const circle1Geometry = new THREE.CircleGeometry(1, 3)
const circleMaterial = new THREE.MeshPhongMaterial({ color: 0x00F5FF })
const circle1 = new THREE.Mesh(circle1Geometry, circleMaterial)
group.add(circle1)

可以看到，分段数为3的时候，我们做出了一个平面三角形。可以自己去尝试为4，5，6，7，8的情形。是不是发现，分段数是几就是几边形。只不过边数多的时候就显得圆了，边数越多圆越圆。为了保证圆看起来圆点，three.js默认值设为了8，但是架不住咱们有特殊需求，因此还是可以自定义。当然特殊也有下限，如果你将分段数设置为1或者2，将会强行当成3处理。

thetaStart和thetaLength这两个参数，是为了帮助我们造出不完整的圆形来，当然，如果你脑洞足够大，应该还能造出更多的来。

我们将上面的代码加入弧度数来看看

const circle1Geometry = new THREE.CircleGeometry(1, 3, 0, 1 * Math.PI)
const circleMaterial = new THREE.MeshPhongMaterial({ color: 0x00F5FF })
const circle1 = new THREE.Mesh(circle1Geometry, circleMaterial)
group.add(circle1)

如果你实际操作了，会发现，在边数比较小的情况下，设置不同的开始角度和结束角度，你能看到很多不同的图形来,这些图形，你在圆的基础上去想，就能明白。

three.js中的平面圆形学习就到这里。我们接下来学习圆锥（ConeGeometry）

圆锥（coneGeometry）

结合已经学习过的平面圆形的构造方法，我们可以猜测一下，圆锥底部圆的半径长度，圆锥的高度，圆锥底部分段数，圆锥侧面分段数在构造时是可以根据自己的需要去传的。

实际上也确实是这样，接下来我们一起看看立体圆锥需要传的基本参数：

radius 圆锥底部圆的半径，默认为1
height 圆锥的高度，默认值为1
radialSegments 圆锥底部圆的分段数，像切蛋糕一样分割圆锥，会影像到底面，所以我觉得叫做底部分段数也没问题，就是把底部针对着你，然后去一刀刀的切
heightSegments 圆锥侧面沿着高度的分界线，像切萝卜一样，一片片的。是把圆锥身体横对着你，然后一刀刀的切。
前面这几个是咱们能够猜测到的，实际上，还应该猜到两个参数，即底部圆的开始角度和结束角度
openEnded 布尔值，默认是关闭的，可以手动打开
thetaStart 底部圆的开始角度，和平面圆形相同，虽然说是底部圆的角度，但是会影像到整体
thetaLength 圆心角大小，和平面圆相同，默认都是2*PI。
除了这两个我们应该想到的，实际上还有一个我们多想想可能会想到的参数，那就是底部要不要搞成开口状的

圆锥（coneGeometry）基本案例

基础案例只写和圆锥（coneGeometry）相关的，完整代码会附在文末，也可以点击链接右键查看源代码

默认参数展示
在默认展示中，我们全部使用默认值，如下：

1
2
3

const coneMaterial = new THREE.MeshPhongMaterial({color: 0x0000FF})
const coneGeometry = new THREE.ConeGeometry()
const cone = new THREE.Mesh(coneGeometry1, coneMaterial1)

看不清点这里

圆锥（coneGeometry）radius和height设置
默认情况下这看着有点胖，我们接下来给圆锥瘦瘦身

1
2
3

const coneMaterial = new THREE.MeshPhongMaterial({color: 0x0000FF})
const coneGeometry = new THREE.ConeGeometry(1,3)
const cone = new THREE.Mesh(coneGeometry, coneMaterial)

看不清点我

圆锥（coneGeometry）同时设置radialSegments
对于radialSegments的理解，最好还是自己亲自放上去看一下,为了看的真切，咱们这次换一个颜色，自己的代码上可以根据需要调试看看
1
2
3
const coneMaterial = new THREE.MeshPhongMaterial({color: 0xFF1493})
const coneGeometry = new THREE.ConeGeometry(1,3, 10)
const cone = new THREE.Mesh(coneGeometry, coneMaterial)
看不清点我

heightSegments，thetaStart,thetaLength可以自己动手看看，就是加字段的问题。最后一起看看openEnded

圆锥（coneGeometry）同时设置openEnded

1
2
3

const coneMaterial = new THREE.MeshPhongMaterial({color: 0xFF1493})
const coneGeometry = new THREE.ConeGeometry(1, 3, 20, 10, true, 0, 2 * Math.PI)
const cone = new THREE.Mesh(coneGeometry, coneMaterial)

看不清点我

可以看到，当openEnded设置为true时，圆锥内部为空，像个甜甜筒。

最后需要强调一下的是，参数的传入顺序如下，别传错了，不然会出现莫名其妙的问题:radius,height, radialSegments, heightSegments,openEnded,thetaStart, thetaLength

本来想这一篇将所有常见图形讲完，感觉篇幅还是稍微长了点。所以我还是分开写吧。

下面是本篇完整的源代码和示例

<!DOCTYPE html>
    <html>
        <head>
            <title>three.js学习之常见的几何图形</title>
            <meta name="keywords" content="three.js demo, three.js常见的几何图形，three.js分割线">
            <meta name="description" content="three.js盒子学习demo，通过调整群组group和WireframeGeometry参数来显示完整的实体及分割线">
            <meta charset="utf8" />
            <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
            <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r99/three.min.js"></script>
            <style>
                html,body{
                    height: 100%;
                    margin: 0;
                }
                #three{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            </style>
        </head>
        <body>
            <canvas id="three"></canvas>
            <script>
                function main () {    
                    const search = location.search                
                    const canvas = document.querySelector('#three')
                    const renderer = new THREE.WebGLRenderer({canvas})
                    const fov = 75;
                    const aspect = 2;
                    const near = 0.1;
                    const far = 200;

                    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)

                    const group = new THREE.Group()
                    group.position.z = -10
                    {
                        // 添加圆形
                        const circleMaterial = new THREE.MeshPhongMaterial({ color: 0x00F5FF })
                        const circle1Geometry = new THREE.CircleGeometry(2)
                        const circle1 = new THREE.Mesh(circle1Geometry, circleMaterial)
                        const lineMaterial1 = new THREE.LineBasicMaterial( { color: 0xffffff} );
                        const lineGeometry1 = new THREE.WireframeGeometry( circle1Geometry );
                        const line = new THREE.Line(lineGeometry1, lineMaterial1)
                        if (search.includes('circle1') || !search) {
                            group.add(circle1, line)
                        }

                        const circleMaterial2 = new THREE.MeshPhongMaterial({ color: 0x00F5FF })
                        const circle2Geometry = new THREE.CircleGeometry(2, 3)
                        const circle2 = new THREE.Mesh(circle2Geometry, circleMaterial2)
                        circle2.position.x = -4
                        const lineMaterial2 = new THREE.LineBasicMaterial( { color: 0xffffff} );
                        const lineGeometry2 = new THREE.WireframeGeometry( circle2Geometry );
                        const line2 = new THREE.Line(lineGeometry2, lineMaterial2)
                        line2.position.x = -4
                        if (search.includes('circle2') || !search) {
                            group.add(circle2, line2)
                        }

                        const circleMaterial3 = new THREE.MeshPhongMaterial({ color: 0x00F5FF })
                        const circle3Geometry = new THREE.CircleGeometry(2, 10, 0, 1.5*Math.PI)
                        const circle3 = new THREE.Mesh(circle3Geometry, circleMaterial3)
                        circle3.position.x = 4
                        const lineMaterial3 = new THREE.LineBasicMaterial( { color: 0xffffff} );
                        const lineGeometry3 = new THREE.WireframeGeometry( circle3Geometry );
                        const line3 = new THREE.Line(lineGeometry3, lineMaterial3)
                        line3.position.x = 4
                        if (search.includes('circle3') || !search) {
                            group.add(circle3, line3)
                        }
                    }

                    {
                        const coneMaterial1 = new THREE.MeshBasicMaterial({color: 0x0000FF})
                        const coneGeometry1 = new THREE.ConeGeometry()
                        const cone1 = new THREE.Mesh(coneGeometry1, coneMaterial1)
                        cone1.position.y = 4
                        cone1.rotation.z = 3

                        const coneLine1Materail = new THREE.LineBasicMaterial({color: 0xffffff})
                        const coneLine1Geometry = new THREE.WireframeGeometry(coneGeometry1)
                        const coneLine1 = new THREE.Line(coneLine1Geometry, coneLine1Materail)
                        coneLine1.position.y = 4
                        coneLine1.rotation.z = 3
                        if (search.includes('cone1') || !search) {
                            group.add(cone1, coneLine1)
                        }

                        const coneMaterial2 = new THREE.MeshBasicMaterial({color: 0x0000FF})
                        const coneGeometry2 = new THREE.ConeGeometry(1, 3)
                        const cone2 = new THREE.Mesh(coneGeometry2, coneMaterial2)
                        cone2.position.y = 4
                        cone2.position.x = -2
                        cone2.rotation.z = 5

                        const coneLine2Materail = new THREE.LineBasicMaterial({color: 0xffffff})
                        const coneLine2Geometry = new THREE.WireframeGeometry(coneGeometry2)
                        const coneLine2 = new THREE.Line(coneLine2Geometry, coneLine2Materail)
                        coneLine2.position.y = 4
                        coneLine2.position.x = -2
                        coneLine2.rotation.z = 5
                        if (search.includes('cone2') || !search) {
                            group.add(cone2, coneLine2)
                        }

                        const coneMaterial3 = new THREE.MeshBasicMaterial({color: 0xFF1493})
                        const coneGeometry3 = new THREE.ConeGeometry(1, 3, 5)
                        const cone3 = new THREE.Mesh(coneGeometry3, coneMaterial3)
                        cone3.position.y = 4
                        cone3.position.x = 2
                        cone3.rotation.z = 5

                        const coneLine3Materail = new THREE.LineBasicMaterial({color: 0xffffff})
                        const coneLine3Geometry = new THREE.WireframeGeometry(coneGeometry3)
                        const coneLine3 = new THREE.Line(coneLine3Geometry, coneLine3Materail)
                        coneLine3.position.y = 4
                        coneLine3.position.x = 2
                        coneLine3.rotation.z = 5
                        if (search.includes('cone3') || !search) {
                            group.add(cone3, coneLine3)
                        }

                        const coneMaterial4 = new THREE.MeshBasicMaterial({color: 0xFF1493, side: THREE.DoubleSide})
                        const coneGeometry4 = new THREE.ConeGeometry(3, 6, 8, 8, true, 0, 2 * Math.PI)
                        const cone4 = new THREE.Mesh(coneGeometry4, coneMaterial4)
                        cone4.position.y = 4
                        cone4.position.x = -6
                        cone4.rotation.z = 5

                        const coneLine4Materail = new THREE.LineBasicMaterial({color: 0xffffff})
                        const coneLine4Geometry = new THREE.WireframeGeometry(coneGeometry4)
                        const coneLine4 = new THREE.Line(coneLine4Geometry, coneLine4Materail)
                        coneLine4.position.y = 4
                        coneLine4.position.x = -6
                        coneLine4.rotation.z = 5
                        if (search.includes('cone4') || !search) {
                            group.add(cone4, coneLine4)
                        }

                        const coneMaterial5 = new THREE.MeshBasicMaterial({color: 0x9370DB, side: THREE.DoubleSide})
                        const coneGeometry5 = new THREE.ConeGeometry(2, 4, 8, 8, true, 0, 1 * Math.PI)
                        const cone5 = new THREE.Mesh(coneGeometry5, coneMaterial5)
                        cone5.position.y = 4
                        cone5.position.x = 6
                        cone5.rotation.z = 3

                        const coneLine5Materail = new THREE.LineBasicMaterial({color: 0xffffff})
                        const coneLine5Geometry = new THREE.WireframeGeometry(coneGeometry5)
                        const coneLine5 = new THREE.Line(coneLine5Geometry, coneLine5Materail)
                        coneLine5.position.y = 4
                        coneLine5.position.x = 6
                        coneLine5.rotation.z = 3
                        if (search.includes('cone5') || !search) {
                            group.add(cone5, coneLine5)
                        }

                    }

                    const scene = new THREE.Scene()
                    {
                        const lightColor = 0xffffff; // 灯光颜色
                        const intensity = 1; // 灯光强度
                        const light = new THREE.DirectionalLight(lightColor, intensity);
                        light.position.set(-1, 2, 4);
                        scene.add(light);
                    }
                    scene.add(group)

                    function resizeRenderSizeToDisplaySize () {
                        const pixelRatio = window.devicePixelRatio;
                        const displayWidth = canvas.clientWidth * pixelRatio 
                        const displayHeight = canvas.clientHeight * pixelRatio
                        const renderWidth = canvas.width;
                        const renderHeight = canvas.height;
                        const needResize = displayWidth !== renderWidth || displayHeight !== renderHeight
                        return needResize
                    }
                    function render (time) {
                        if (resizeRenderSizeToDisplaySize()) {
                            const pixelRatio = window.devicePixelRatio;
                            const width = canvas.clientWidth * pixelRatio
                            const height = canvas.clientHeight * pixelRatio
                            renderer.setSize(width, height, false)
                            camera.aspect = canvas.clientWidth  / canvas.clientHeight;
                            camera.updateProjectionMatrix();
                        }

                        time *= 0.001
                        group['children'].forEach((each, index) => {
                            if (each.position.y === 0) {
                                each.rotation.z = -time
                            } else {
                                each.rotation.y = -time
                            }
                            // if (index % 2 === 0) {
                            //     each.rotation.z = -time
                            // } else {
                            //     each.rotation.z = time
                            // }
                        })

                        // group.position.y = time
                        // group.position.x = time 
                        renderer.render(scene, camera)
                        requestAnimationFrame(render)
                    }
                    requestAnimationFrame(render)
                    // render()
                }  
                main()
        </script>
        </body>
    </html>

小春的作业本

跟着老师走，每天都得写作业

three.js学习之常见几何体平面圆形和圆锥

平面圆形（CircleGeometry）

圆锥（coneGeometry）

圆锥（coneGeometry）基本案例