Three.js——二维平面、二维圆、自定义二维图形、立方体、球体、圆柱体、圆环、扭结、多面体、文字

前端杂货铺2024-05-27 11:52

个人简介

👀个人主页： 前端杂货铺

⚡开源项目： rich-vue3 （基于 Vue3 + TS + Pinia + Element Plus + Spring全家桶 + MySQL）

🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展

📃个人状态： 研发工程师，现效力于中国工业软件事业

🚀人生格言： 积跬步至千里，积小流成江海

🥇推荐学习：🍖开源 rich-vue3 🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

内容 参考链接
WebGL专栏 WebGL 入门
Three.js（一） 创建场景、渲染三维对象、添加灯光、添加阴影、添加雾化
Three.js（二） scene场景、几何体位置旋转缩放、正射投影相机、透视投影相机
Three.js（三） 聚光灯、环境光、点光源、平行光、半球光
Three.js（四） 基础材质、深度材质、法向材质、面材质、朗伯材质、Phong材质、着色器材质、直线和虚线、联合材质

文章目录

前言

大家好，这里是前端杂货铺。

上篇文章我们学习了 基础材质、深度材质、法向材质、面材质、朗伯材质、Phong材质、着色器材质、直线和虚线、联合材质。接下来，我们继续我们 three.js 的学习！

在学习的过程中，如若需要深入了解或扩展某些知识，可以自行查阅 => three.js官方文档。

一、二维平面

PlaneBufferGeometry 一个用于生成平面几何体的类。相较于于 PlaneGeometry 更加轻量化。

javascript 复制代码 
new THREE.PlaneBufferGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
参数名称 描述
width 平面沿着 X 轴的宽度。默认值是 1
height 平面沿着 Y 轴的高度。默认值是 1
widthSegments （可选）平面的宽度分段数，默认值是 1
heightSegments （可选）平面的高度分段数，默认值是 1
javascript 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
</head>

<body>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
        // 创建相机 视野角度FOV、长宽比、近截面、远截面
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        // 设置相机位置
        camera.position.set(0, 0, 20);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置渲染器尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 添加平面 平面沿着 X 轴的宽度 | 平面沿着 Y 轴的高度 | 平面的宽度分段数 | 平面的高度分段数
        const geometry = new THREE.PlaneBufferGeometry(10, 10, 2, 2);

        const lambert = new THREE.MeshLambertMaterial({
            color: 0xff0000
        });
        const basic = new THREE.MeshBasicMaterial({
            wireframe: true
        });

        const mesh = {
            pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [
                lambert, basic
            ])
        };

        // 添加到场景
        scene.add(mesh.pointer);

        // 添加灯光
        const spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-10, 10, 90);
        scene.add(spotLight);

        initControls(geometry, camera, mesh, scene);

        const animation = () => {
            mesh.pointer.rotation.x += 0.01;
            mesh.pointer.rotation.y += 0.01;

            // 渲染
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
        }

        animation();
    </script>
</body>

</html>

二维平面

二、二维圆

CircleGeometry 是欧式几何的一个简单形状，它由围绕着一个中心点的三角分段的数量所构造，由给定的半径来延展。 同时它也可以用于创建规则多边形，其分段数量取决于该规则多边形的边数。

javascript 复制代码 
new MeshDepthMaterial(parameters: Object);
参数名称 描述
radius 圆形的半径，默认值为1
segments 分段（三角面）的数量，最小值为3，默认值为 32
thetaStart 第一个分段的起始角度，默认为0
thetaLength 圆形扇区的中心角，通常被称为"θ"（西塔）。默认值是2*Pi，这使其成为一个完整的圆
javascript 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
</head>

<body>
<script>
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机 视野角度FOV、长宽比、近截面、远截面
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机位置
    camera.position.set(0, 0, 20);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 添加二维圆 半径 | 指定创建圆需要的面的数量（最少3个） | 开始画的角度，0-Math.PI * 2 | 角度，定义圆要画多大
    const geometry = new THREE.CircleGeometry(4, 10, 0, Math.PI * 2);

    const lambert = new THREE.MeshLambertMaterial({
        color: 0xff0000
    });
    const basic = new THREE.MeshBasicMaterial({
        wireframe: true
    });

    const mesh = {
        pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [
            lambert, basic
        ])
    };

    // 添加到场景
    scene.add(mesh.pointer);

    // 添加灯光
    const spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 10, 90);
    scene.add(spotLight);

    initControls(geometry, camera, mesh, scene);

    const animation = () => {
        mesh.pointer.rotation.x += 0.01;
        mesh.pointer.rotation.y += 0.01;

        // 渲染
        renderer.render(scene, camera);
        requestAnimationFrame(animation);
    }

    animation();
</script>
</body>

</html>

二维圆

三、自定义二维图形

自定义二维图形需要使用到 Shape 对象 和 ShapeGeometry 对象。

Shpae 使用路径以及可选的孔洞来定义一个二维形状平面。 它可以和 ExtrudeGeometry、ShapeGeometry 一起使用，获取点，或者获取三角面。

javascript 复制代码 
new THREE.Shape( points : Array );
参数名称 描述
points 一个 Vector2 数组

ShapeGeometry 形状缓冲几何体，用于从一个或多个路径形状中创建一个单面多边形几何体。

javascript 复制代码 
new THREE.ShapeGeometry(shapes : Array, curveSegments : Integer)
参数名称 描述
shapes 一个单独的shape，或者一个包含形状的Array
curveSegments 每一个形状的分段数，默认值为12
javascript 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
</head>

<body>
<script>
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机 视野角度FOV、长宽比、近截面、远截面
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机位置
    camera.position.set(0, 0, 20);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const shape = new THREE.Shape();

    // 将绘制点移动到某处
    shape.moveTo(0, 0);

    // 从起始位置开始绘制，绘制到xy处停止
    shape.lineTo(0, 3);
    shape.lineTo(2, 3);
    shape.lineTo(5, 0);
    shape.lineTo(0, 0);

    // 绘制圆
    // shape.arc(1, 1, Math.PI * 2, Math.PI * 2, 100);

    const geometry = new THREE.ShapeGeometry(shape);

    const lambert = new THREE.MeshLambertMaterial({
        color: 0xff0000
    });
    const basic = new THREE.MeshBasicMaterial({
        wireframe: true
    });

    const mesh = {
        pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [
            lambert, basic
        ])
    };

    // 添加到场景
    scene.add(mesh.pointer);

    // 添加灯光
    const spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 10, 90);
    scene.add(spotLight);

    const animation = () => {
        mesh.pointer.rotation.x += 0.01;
        mesh.pointer.rotation.y += 0.01;

        // 渲染
        renderer.render(scene, camera);
        requestAnimationFrame(animation);
    }

    animation();
</script>
</body>

</html>

自定义二维图形

四、立方体

BoxGeometry 是四边形的原始几何类，它通常使用构造函数所提供的 "width"、"height"、"depth" 参数来创建立方体或者不规则四边形。

javascript 复制代码 
new THREE.BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
参数名称 描述
width X 轴上面的宽度，默认值为 1
height Y 轴上面的高度，默认值为 1
depth Z 轴上面的深度，默认值为 1
widthSegments （可选）宽度的分段数，默认值是 1
heightSegments （可选）高度的分段数，默认值是 1
depthSegments （可选）深度的分段数，默认值是 1
javascript 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
</head>

<body>
<script>
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机 视野角度FOV、长宽比、近截面、远截面
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机位置
    camera.position.set(0, 0, 20);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 宽度 x轴方向 | 高度 y轴方向 | 深度 z轴方向 | x轴方向将面分成多少份 | y... | z...
    const geometry = new THREE.BoxGeometry(3, 3, 3, 1, 1, 1);

    const lambert = new THREE.MeshLambertMaterial({
        color: 0xff0000
    });
    const basic = new THREE.MeshBasicMaterial({
        wireframe: true
    });

    const mesh = {
        pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [
            lambert, basic
        ])
    };

    // 添加到场景
    scene.add(mesh.pointer);

    // 添加灯光
    const spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 10, 90);
    scene.add(spotLight);

    initControls(geometry, camera, mesh, scene);

    const animation = () => {
        mesh.pointer.rotation.x += 0.01;
        mesh.pointer.rotation.y += 0.01;

        // 渲染
        renderer.render(scene, camera);
        requestAnimationFrame(animation);
    }

    animation();
</script>
</body>

</html>

立方体

五、球体

SphereGeometry 是 一个用于生成球体的类。

javascript 复制代码 
new THREE.SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
参数名称 描述
radius 球体半径，默认为 1
widthSegments 水平分段数（沿着经线分段），最小值为 3，默认值为 32
heightSegments 垂直分段数（沿着纬线分段），最小值为 2，默认值为 16
phiStart 指定水平（经线）起始角度，默认值为 0
phiLength 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2
thetaStart 指定垂直（纬线）起始角度，默认值为0
thetaLength 指定垂直（纬线）扫描角度大小，默认值为 Math.PI
javascript 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
</head>

<body>
<script>
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机 视野角度FOV、长宽比、近截面、远截面
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机位置
    camera.position.set(0, 0, 20);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 半径 | x轴方向将面分成多少份 | y轴方向将面分成多少份 | 从x轴什么位置开始回值 | 绘制多少 | 从y轴什么位置开始回值 | 绘制多少
    const geometry = new THREE.SphereGeometry(2, 20, 20, Math.PI * 2, Math.PI * 2, Math.PI * 2, Math.PI * 2);

    const lambert = new THREE.MeshLambertMaterial({
        color: 0xff0000
    });
    const basic = new THREE.MeshBasicMaterial({
        wireframe: true
    });

    const mesh = {
        pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [
            lambert, basic
        ])
    };

    // 添加到场景
    scene.add(mesh.pointer);

    // 添加灯光
    const spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 10, 90);
    scene.add(spotLight);

    initControls(geometry, camera, mesh, scene);

    const animation = () => {
        mesh.pointer.rotation.x += 0.01;
        mesh.pointer.rotation.y += 0.01;

        // 渲染
        renderer.render(scene, camera);
        requestAnimationFrame(animation);
    }

    animation();
</script>
</body>

</html>

球体

六、圆柱体

CylinderGeometry 是 一个用于生成圆柱几何体的类。

javascript 复制代码 
new THREE.CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float);
参数名称 描述
radiusTop 圆柱的顶部半径，默认值是 1
radiusBottom 圆柱的底部半径，默认值是 1
height 圆柱的高度，默认值是 1
radialSegments 圆柱侧面周围的分段数，默认为 32
heightSegments 圆柱侧面沿着其高度的分段数，默认值为 1
openEnded 一个 Boolean 值，指明该圆锥的底面是开放的还是封顶的。默认值为 false，即其底面默认是封顶的
thetaStart 第一个分段的起始角度，默认为 0
thetaLength 圆柱底面圆扇区的中心角，通常被称为"θ"（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱
javascript 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
</head>

<body>
<script>
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机 视野角度FOV、长宽比、近截面、远截面
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机位置
    camera.position.set(0, 0, 20);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 半径 | x轴方向将面分成多少份 | y轴方向将面分成多少份 | 从x轴什么位置开始回值 | 绘制多少 | 从y轴什么位置开始回值 | 绘制多少
    const geometry = new THREE.CylinderGeometry(2, 2, 2, 20, 4, false);

    const lambert = new THREE.MeshLambertMaterial({
        color: 0xff0000
    });
    const basic = new THREE.MeshBasicMaterial({
        wireframe: true
    });

    const mesh = {
        pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [
            lambert, basic
        ])
    };

    // 添加到场景
    scene.add(mesh.pointer);

    // 添加灯光
    const spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 10, 90);
    scene.add(spotLight);

    initControls(geometry, camera, mesh, scene);

    const animation = () => {
        mesh.pointer.rotation.x += 0.01;
        mesh.pointer.rotation.y += 0.01;

        // 渲染
        renderer.render(scene, camera);
        requestAnimationFrame(animation);
    }

    animation();
</script>
</body>

</html>

圆柱体

七、圆环

TorusGeometry 是 一个用于生成圆环几何体的类。

javascript 复制代码 
new THREE.TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float);
参数名称 描述
radius 环面的半径，从环面的中心到管道横截面的中心。默认值是 1
tube 管道的半径，默认值为 0.4
radialSegments 管道横截面的分段数，默认值为 12
tubularSegments 管道的分段数，默认值为 48
arc 圆环的圆心角（单位是弧度），默认值为 Math.PI * 2
javascript 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
</head>

<body>
<script>
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机 视野角度FOV、长宽比、近截面、远截面
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机位置
    camera.position.set(0, 0, 20);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 半径 | 管子的半径 | 沿圆环长度分为多少段 | 宽度分成多少段 | 是否形成一个完整的闭环 |
    const geometry = new THREE.TorusGeometry(2, 1, 10, 10, Math.PI * 2);

    const lambert = new THREE.MeshLambertMaterial({
        color: 0xff0000
    });
    const basic = new THREE.MeshBasicMaterial({
        wireframe: true
    });

    const mesh = {
        pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [
            lambert, basic
        ])
    };

    // 添加到场景
    scene.add(mesh.pointer);

    // 添加灯光
    const spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 10, 90);
    scene.add(spotLight);

    initControls(geometry, camera, mesh, scene);

    const animation = () => {
        mesh.pointer.rotation.x += 0.01;
        mesh.pointer.rotation.y += 0.01;

        // 渲染
        renderer.render(scene, camera);
        requestAnimationFrame(animation);
    }

    animation();
</script>
</body>

</html>

圆环

八、扭结

TorusKnotGeometry 用于创建一个圆环扭结，其特殊形状由一对互质的整数，p和q所定义。如果p和q不互质，创建出来的几何体将是一个环面链接。。

javascript 复制代码 
new THREE.TorusKnotGeometry(radius : Float, tube : Float, tubularSegments : Integer, radialSegments : Integer, p : Integer, q : Integer);
参数名称 描述
radius 圆环的半径，默认值为 1
tube 管道的半径，默认值为 0.4
tubularSegments 管道的分段数量，默认值为 64
radialSegments 横截面分段数量，默认值为 8
p 这个值决定了几何体将绕着其旋转对称轴旋转多少次，默认值是 2
q 这个值决定了几何体将绕着其内部圆环旋转多少次，默认值是 3
javascript 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
</head>

<body>
<script>
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机 视野角度FOV、长宽比、近截面、远截面
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机位置
    camera.position.set(0, 0, 20);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 半径 | 管子的半径 | 沿圆环长度分为多少段 | 宽度分成多少段 | 定义结的形状 | 定义结的形状 | 拉伸纽结 |
    const geometry = new THREE.TorusKnotGeometry(2, 1, 20, 6, 1, 3, 1);

    const lambert = new THREE.MeshLambertMaterial({
        color: 0xff0000
    });
    const basic = new THREE.MeshBasicMaterial({
        wireframe: true
    });

    const mesh = {
        pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [
            lambert, basic
        ])
    };

    // 添加到场景
    scene.add(mesh.pointer);

    // 添加灯光
    const spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 10, 90);
    scene.add(spotLight);

    initControls(geometry, camera, mesh, scene);

    const animation = () => {
        mesh.pointer.rotation.x += 0.01;
        mesh.pointer.rotation.y += 0.01;

        // 渲染
        renderer.render(scene, camera);
        requestAnimationFrame(animation);
    }

    animation();
</script>
</body>

</html>

扭结

九、多面体

PolyhedronGeometry 多面体在三维空间中具有一些平面的立体图形。这个类将一个顶点数组投射到一个球面上，之后将它们细分为所需的细节级别。

javascript 复制代码 
new THREE.PolyhedronGeometry(vertices : Array, indices : Array, radius : Float, detail : Integer);
参数名称 描述
vertices 一个顶点Array（数组）：[1,1,1, -1,-1,-1, ... ]
indices 一个构成面的索引Array（数组）， [0,1,2, 2,3,0, ... ]
radius 最终形状的半径
detail 将对这个几何体细分多少个级别。细节越多，形状就越平滑
javascript 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
</head>

<body>
<script>
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机 视野角度FOV、长宽比、近截面、远截面
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机位置
    camera.position.set(0, 0, 20);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 构成多面体的顶点 | 创建出的面 | 指定多面的大小 | 处理多面体细节 |
    const geometry = new THREE.PolyhedronGeometry(vertices, indices, 4, 0);

    // 正四面体
    // const geometry = new THREE.TetrahedronGeometry(4, 0);

    // 正八面体
    // const geometry = new THREE.OctahedronGeometry(4, 0);

    // 正二十面体
    // const geometry = new THREE.IcosahedronGeometry(4, 0);

    const lambert = new THREE.MeshLambertMaterial({
        color: 0xff0000
    });
    const basic = new THREE.MeshBasicMaterial({
        wireframe: true
    });

    const mesh = {
        pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [
            lambert, basic
        ])
    };

    // 添加到场景
    scene.add(mesh.pointer);

    // 添加灯光
    const spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 10, 90);
    scene.add(spotLight);

    initControls(geometry, camera, mesh, scene);

    const animation = () => {
        mesh.pointer.rotation.x += 0.01;
        mesh.pointer.rotation.y += 0.01;

        // 渲染
        renderer.render(scene, camera);
        requestAnimationFrame(animation);
    }

    animation();
</script>
</body>

</html>

多面体

十、文字

TextGeometry 是一个用于将文本生成为单一的几何体的类。 它是由一串给定的文本，以及由加载的font（字体）和该几何体 ExtrudeGeometry 父类中的设置所组成的参数来构造的。

javascript 复制代码 
// text 将要显示的文本
new THREE.TextGeometry(text : String, parameters : Object);
参数名称 描述
font THREE.Font 的实例
size 字体大小，默认值为100
depth 挤出文本的厚度。默认值为 50
curveSegments （表示文本的）曲线上点的数量。默认值为 12
bevelEnabled 是否开启斜角，默认为 false
bevelThickness 文本上斜角的深度，默认值为 20
bevelSize 斜角与原始文本轮廓之间的延伸距离。默认值为 8
bevelSegments 斜角的分段数。默认值为 3
javascript 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
    <script src="../assets/font/font.js"></script>
</head>

<body>
<script>
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机 视野角度FOV、长宽比、近截面、远截面
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机位置
    camera.position.set(0, 0, 20);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 文字
    const geometry = new THREE.TextGeometry("THREE", textOptions);

    const lambert = new THREE.MeshLambertMaterial({
        color: 0xff0000
    });
    const basic = new THREE.MeshBasicMaterial({
        wireframe: true
    });

    const mesh = {
        pointer: new THREE.SceneUtils.createMultiMaterialObject(geometry, [
            lambert, basic
        ])
    };

    // 添加到场景
    scene.add(mesh.pointer);

    // 添加灯光
    const spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 10, 90);
    scene.add(spotLight);

    initControls(geometry, camera, mesh, scene);

    const animation = () => {
        mesh.pointer.rotation.x += 0.01;
        mesh.pointer.rotation.y += 0.01;

        // 渲染
        renderer.render(scene, camera);
        requestAnimationFrame(animation);
    }

    animation();
</script>
</body>

</html>

文字

GUI 控制文件

老规矩，我们把本篇文章需要使用的 ./controls/index.js 补充完毕

javascript 复制代码 
const basicType = {
    // 颜色。默认为一个白色（0xffffff）的 Color 对象。
    color: {
        method: 'addColor',
        getValue: item => item.color.getStyle(),
        setValue: (item, value) => item.color.setStyle(value),
    },
    // 
    skyColor: {
        method: 'addColor',
        getValue: item => item.skyColor.getStyle(),
        setValue: (item, value) => item.skyColor.setStyle(value),
    },
    // 光照强度。默认值为 1
    intensity: {
        method: 'add',
        extends: [0, 2],
        getValue: item => item.intensity,
        setValue: (item, value) => item.intensity = +value,
    },
    // 光源照射的最大距离。默认值为 0（无限远）
    distance: {
        method: 'add',
        extends: [0, 1],
        getValue: item => item.distance,
        setValue: (item, value) => item.distance = +value,
    },
    // 光线照射范围的角度。默认值为 Math.PI/3
    angle: {
        method: 'add',
        extends: [0, Math.PI / 2],
        getValue: item => item.angle,
        setValue: (item, value) => item.angle = +value,
    },
    // 决定了光线强度递减的速度。
    exponent: {
        method: 'add',
        extends: [0, 20],
        getValue: item => item.exponent,
        setValue: (item, value) => item.exponent = +value,
    },
    // 亮度
    opacity: {
        extends: [0, 1],
        getValue: item => item.opacity,
        setValue: (item, value) => item.opacity = +value
    },
    // 透明度
    transparent: {
        getValue: item => item.transparent,
        setValue: (item, value) => item.transparent = value
    },
    // 线框
    wireframe: {
        getValue: item => item.wireframe,
        setValue: (item, value) => item.wireframe = value
    },
    // 显隐
    visible: {
        getValue: item => item.visible,
        setValue: (item, value) => item.visible = value
    },
    cameraNear: {
        extends: [0, 50],
        getValue: (item, camera) => camera.near,
        setValue: (item, value, camera) => camera.near = value
    },
    cameraFar: {
        extends: [50, 200],
        getValue: (item, camera) => camera.far,
        setValue: (item, value, camera) => camera.far = value
    },
    side: {
        extends: [
            ['font', 'back', 'double']
        ],
        getValue: (item, camera) => 'font',
        setValue: (item, value) => {
            switch (value) {
                case 'font':
                    item.side = THREE.FrontSide;
                    break;
                case 'back':
                    item.side = THREE.BackSide;
                    break;
                case 'double':
                    item.side = THREE.DoubleSide;
                    break;
            }
        }
    },
    // 材料的环境颜色
    ambient: {
        method: 'addColor',
        getValue: (item) => item.ambient.getHex(),
        setValue: (item, value) => item.ambient = new THREE.Color(value),
    },
    // 物体材料本身发出的颜色
    emissive: {
        method: 'addColor',
        getValue: (item) => item.emissive.getHex(),
        setValue: (item, value) => item.emissive = new THREE.Color(value),
    },
    // 设置高亮部分的颜色
    specular: {
        method: 'addColor',
        getValue: (item) => item.specular.getHex(),
        setValue: (item, value) => item.specular = new THREE.Color(value),
    },
    // 设置高亮部分的亮度
    shininess: {
        extends: [0, 100],
        getValue: (item) => item.shininess,
        setValue: (item, value) => item.shininess = value,
    },
    red: {
        extends: [0, 1],
        getValue: (item) => item.uniforms.r.value,
        setValue: (item, value) => item.uniforms.r.value = value,
    },
    alpha: {
        extends: [0, 1],
        getValue: (item) => item.uniforms.a.value,
        setValue: (item, value) => item.uniforms.a.value = value,
    },
    dashSize: {
        extends: [0, 5],
        getValue: (item) => item.dashSize,
        setValue: (item, value) => item.dashSize = +value,
    },
    width: getMeshValue([0, 20], 'width'),
    height: getMeshValue([0, 20], 'height'),
    widthSegments: getMeshValue([0, 20], 'widthSegments'),
    heightSegments: getMeshValue([0, 20], 'heightSegments'),
    radius: getMeshValue([1, 20], 'radius'),
    segments: getMeshValue([3, 80], 'segments'),
    thetaStart: getMeshValue([0, Math.PI * 2], 'thetaStart'),
    thetaLength: getMeshValue([0, Math.PI * 2], 'thetaLength'),
    depth: getMeshValue([0, 20], 'depth'),
    depthSegments: getMeshValue([0, 20], 'depthSegments'),
    phiStart: getMeshValue([0, Math.PI * 2], 'phiStart'),
    radiusTop: getMeshValue([-20, 20], 'radiusTop'),
    radiusBottom: getMeshValue([-20, 20], 'radiusBottom'),
    radialSegments: getMeshValue([1, 60], 'radialSegments'),
    openEnded: getMeshValue([], 'openEnded'),
    tube: getMeshValue([1, 6], 'tube'),
    tubularSegments: getMeshValue([0, Math.PI * 2], 'tubularSegments'),
    arc: getMeshValue([1, 20], 'arc'),
    p: getMeshValue([1, 10], 'p'),
    q: getMeshValue([1, 10], 'q'),
    detail: getMeshValue([0, 5], 'detail'),
    heightScale: getMeshValue([0, 5], 'heightScale'),
    size: getMeshValue([0, 10], 'size'),
    bevelThickness: getMeshValue([1, 30], 'bevelThickness'),
    bevelEnabled: getMeshValue([], 'bevelEnabled'),
    bevelSegments: getMeshValue([1, 30], 'bevelSegments'),
    curveSegments: getMeshValue([1, 30], 'curveSegments'),
    steps: getMeshValue([0, 10], 'steps'),
}

const vertices = [1, 1, 1, -1, -1, 1, -1, 1, -1, 1, -1, -1];
const indices = [2, 1, 0, 0, 3, 2, 1, 3, 0, 2, 3, 1];

function createMaterial(geometry) {
    const lambert = new THREE.MeshLambertMaterial({
        color: 0xff0000
    });
    const basic = new THREE.MeshBasicMaterial({
        wireframe: true
    });

    return new THREE.SceneUtils.createMultiMaterialObject(geometry, [
        lambert, basic
    ]);
}

// 字体配置
const textOptions = {
    size: 1,
    height: 1,
    weight: 'normal',
    font: 'helvetiker',
    bevelThickness: 1,
    bevelEnabled: false,
    bevelSegments: 1,
    curveSegments: 1,
    steps: 1
}

const roundValue = {
    width: 1,
    height: 1,
    depth: 1,
    widthSegments: 1,
    heightSegments: 1,
    depthSegments: 1, // 不能为 undefined
    radialSegments: 1,
    tubularSegments: 1,
    detail: 1,
    size: 1,
    bevelSegments: 1,
    curveSegments: 1,
    steps: 1
}

const isPolyhedron = item => item.type === 'PolyhedronGeometry';

const isFont = item => item.type === 'TextGeometry';

function removeAndAdd(item, value, camera, mesh, scene, controls) {
    const {
        x,
        y,
        z
    } = mesh.pointer.rotation;

    scene.remove(mesh.pointer);
    const arg = [];
    for (const key in controls) {
        if (roundValue[key]) {
            // ~~位运算符，转为数字
            controls[key] = ~~controls[key];
        }
        arg.push(controls[key]);
    }

    // 多面体
    if (isPolyhedron(item)) {
        arg.unshift(vertices, indices);
    }

    if (isFont(item)) {
        mesh.pointer = createMaterial(new THREE[item.type]('THREE', Object.assign(textOptions, controls)));
    } else {
        mesh.pointer = createMaterial(new THREE[item.type](...arg));
    }

    mesh.pointer.rotation.set(x, y, z);

    scene.add(mesh.pointer);
}

function getMeshValue(extend, name) {
    return {
        extends: extend,
        getValue: (item, camera, mesh) => isFont(item) && textOptions[name] !== undefined ? textOptions[name] : mesh.children[0].geometry.parameters[name],
        setValue: (...arg) => removeAndAdd(...arg)
    }
}

const itemType = {
    SpotLight: ['color', 'intensity', 'distance', 'angle', 'exponent'], // 聚光灯
    AmbientLight: ['color'], // 环境光
    PointLight: ['color', 'intensity', 'distance'], // 点光源
    DirectionalLight: ['color', 'intensity'], // 平行光
    HemisphereLight: ['groundColor', 'intensity'], // 半球光
    MeshBasicMaterial: ['color', 'opacity', 'transparent', 'wireframe', 'visible'], // 基础网格材质
    MeshDepthMaterial: ['wireframe', 'cameraNear', 'cameraFar'], // 深度网格材质
    MeshNormalMaterial: ['opacity', 'transparent', 'wireframe', 'visible', 'side'],
    MeshLambertMaterial: ['opacity', 'transparent', 'wireframe', 'visible', 'side', 'ambient', 'emissive', 'color'], // 朗伯材质
    MeshPhongMaterial: ['opacity', 'transparent', 'wireframe', 'visible', 'side', 'ambient', 'emissive', 'color', 'specular', 'shininess'], // Phong材质
    ShaderMaterial: ['red', 'alpha'], // 着色器材质
    LineBasicMaterial: ['color'], // 直线
    LineDashedMaterial: ['dashSize', 'gapSize'], // 虚线
    PlaneBufferGeometry: ['width', 'height', 'widthSegments', 'heightSegments'], // 二维屏幕
    CircleGeometry: ['radius', 'segments', 'thetaStart', 'thetaLength'], // 二维圆
    BoxGeometry: ['width', 'height', 'depth', 'widthSegments', 'heightSegments', 'depthSegments'], // 立方体
    SphereGeometry:  ['radius', 'widthSegments', 'heightSegments', 'phiStart', 'phiLength', 'thetaStart', 'thetaLength'], // 球体
    CylinderGeometry: ['radiusTop', 'radiusBottom', 'height', 'radialSegments', 'heightSegments', 'openEnded'], // 圆柱体
    TorusGeometry: ['radius', 'tube', 'radialSegments', 'tubularSegments', 'arc'], // 圆环
    TorusKnotGeometry: ['radius', 'tube', 'radialSegments', 'tubularSegments', 'p', 'q', 'heightScale'], // 纽结
    PolyhedronGeometry: ['radius', 'detail'], // 多面缓冲几何体
    TetrahedronGeometry: ['radius', 'detail'], // 四面缓冲几何体
    OctahedronGeometry: ['radius', 'detail'], // 八面缓冲几何体
    IcosahedronGeometry: ['radius', 'detail'], // 二十面缓冲几何体
    TextGeometry: ['size', 'bevelThickness', 'bevelEnabled', 'bevelSegments', 'curveSegments', 'steps'],
}

function initControls(item, camera, mesh, scene) {
    console.log('item', item)
    const typeList = itemType[item.type];
    const controls = {};

    if (!typeList || !typeList.length) {
        return;
    }

    const gui = new dat.GUI();

    for (let i = 0; i < typeList.length; i++) {
        const child = basicType[typeList[i]];
        if (child) {
            controls[typeList[i]] = child.getValue(item, camera, mesh.pointer);

            const childExtends = child.extends || [];

            gui[child.method || 'add'](controls, typeList[i], ...childExtends).onChange((value) => {
                child.setValue(item, value, camera, mesh, scene, controls);
            })
        }
    }
}

总结

本篇文章我们讲解了几种常见几何体的基本使用，包括二维平面、二维圆、自定义二维图形、立方体、球体、圆柱体、圆环、扭结、多面体、文字。

更多内容扩展请大家自行查阅 => three.js官方文档，真心推荐读一读！！

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

参考资料：

  1. Three.js 官方文档
  2. WebGL+Three.js 入门与实战【作者：慕课网_yancy】
相关推荐
m0_748236115 分钟前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
倔强的石头10613 分钟前
【C++指南】类和对象（九）：内部类
开发语言·c++
Watermelo61718 分钟前
详解js柯里化原理及用法，探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
半盏茶香1 小时前
在21世纪的我用C语言探寻世界本质 ——编译和链接（编译环境和运行环境）
c语言·开发语言·c++·算法
Evand J2 小时前
LOS/NLOS环境建模与三维TOA定位，MATLAB仿真程序，可自定义锚点数量和轨迹点长度
开发语言·matlab
LucianaiB2 小时前
探索CSDN博客数据：使用Python爬虫技术
开发语言·爬虫·python
一个处女座的程序猿O(∩_∩)O2 小时前
小型 Vue 项目，该不该用 Pinia 、Vuex呢？
前端·javascript·vue.js
Ronin3052 小时前
11.vector的介绍及模拟实现
开发语言·c++
计算机学长大白3 小时前
C中设计不允许继承的类的实现方法是什么？
c语言·开发语言
PieroPc4 小时前
Python 写的 智慧记 进销存 辅助 程序 导入导出 excel 可打印
开发语言·python·excel
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程