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

news2024/11/16 8:38:24

个人简介

👀个人主页： 前端杂货铺
⚡开源项目： 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材质、着色器材质、直线和虚线、联合材质

文章目录

    • 前言
    • 一、二维平面
    • 二、二维圆
    • 三、自定义二维图形
    • 四、立方体
    • 五、球体
    • 六、圆柱体
    • 七、圆环
    • 八、扭结
    • 九、多面体
    • 十、文字
    • GUI 控制文件
    • 总结

前言

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

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

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

一、二维平面

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

new THREE.PlaneBufferGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
参数名称描述
width平面沿着 X 轴的宽度。默认值是 1
height平面沿着 Y 轴的高度。默认值是 1
widthSegments（可选）平面的宽度分段数，默认值是 1
heightSegments（可选）平面的高度分段数，默认值是 1
<!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 是欧式几何的一个简单形状，它由围绕着一个中心点的三角分段的数量所构造，由给定的半径来延展。 同时它也可以用于创建规则多边形，其分段数量取决于该规则多边形的边数。

new MeshDepthMaterial(parameters: Object);
参数名称描述
radius圆形的半径，默认值为1
segments分段（三角面）的数量，最小值为3，默认值为 32
thetaStart第一个分段的起始角度，默认为0
thetaLength圆形扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆
<!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 一起使用，获取点，或者获取三角面。

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

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

new THREE.ShapeGeometry(shapes : Array, curveSegments : Integer)
参数名称描述
shapes一个单独的shape，或者一个包含形状的Array
curveSegments每一个形状的分段数，默认值为12
<!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” 参数来创建立方体或者不规则四边形。

new THREE.BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
参数名称描述
widthX 轴上面的宽度，默认值为 1
heightY 轴上面的高度，默认值为 1
depthZ 轴上面的深度，默认值为 1
widthSegments（可选）宽度的分段数，默认值是 1
heightSegments（可选）高度的分段数，默认值是 1
depthSegments（可选）深度的分段数，默认值是 1
<!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 是 一个用于生成球体的类。

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
<!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 是 一个用于生成圆柱几何体的类。

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，这使其成为一个完整的圆柱
<!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 是 一个用于生成圆环几何体的类。

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
<!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不互质，创建出来的几何体将是一个环面链接。。

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

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将对这个几何体细分多少个级别。细节越多，形状就越平滑
<!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 父类中的设置所组成的参数来构造的。

// text 将要显示的文本
new THREE.TextGeometry(text : String, parameters : Object);
参数名称描述
fontTHREE.Font 的实例
size字体大小，默认值为100
depth挤出文本的厚度。默认值为 50
curveSegments（表示文本的）曲线上点的数量。默认值为 12
bevelEnabled是否开启斜角，默认为 false
bevelThickness文本上斜角的深度，默认值为 20
bevelSize斜角与原始文本轮廓之间的延伸距离。默认值为 8
bevelSegments斜角的分段数。默认值为 3
<!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 补充完毕

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】

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1698123.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C++ —— 哈希】学习笔记 | 模拟实现封装unordered_map和unordered_set

【C++ —— 哈希】学习笔记 | 模拟实现封装unordered_map和unordered_set

文章目录 前言一、unordered系列关联式容器1.1 unordered_map1.2 unordered_set 二、底层结构2.1哈希概念&#xff08;哈希是一种算法思想&#xff09;2.2哈希冲突2.3 解决哈希冲突方法&#xff1a;1.直接定址法&#xff08;值和位置关系是唯一关系&#xff0c;每个人都有唯一位…
阅读更多...
站在ESG“20+”新起点上，看中国ESG先锋探索力量

站在ESG“20+”新起点上，看中国ESG先锋探索力量

全链减碳、建设绿色工厂、打造零碳产品、守护生物多样性、向受灾群众捐助……不知你是否察觉&#xff0c;自“双碳”目标提出以来&#xff0c;一股“可持续发展热潮”正覆盖各行各业&#xff0c;并且渗透到我们衣食住行的方方面面。在资本市场&#xff0c;ESG投资热潮更是席卷全…
阅读更多...
VMware虚拟机-设置系统网络IP、快照、克隆

VMware虚拟机-设置系统网络IP、快照、克隆

1.设置网络IP 1.点击右上角开关按钮-》有线 已连接-》有线设置 2.手动修改ip 3.重启或者把开关重新关闭开启 2.快照设置 快照介绍&#xff1a; 通过快照可快速保存虚拟机当前的状态&#xff0c;后续可以使用虚拟机还原到某个快照的状态。 1.添加快照(需要先关闭虚拟机) 2.在…
阅读更多...
数据结构（六）图

数据结构（六）图

2024年5月26日一稿（王道P220） 6.1 图的基本概念 6.1.1 图的定义 6.2 图的存储及基本操作 6.2.1邻接矩阵法 6.2.2 邻接表
阅读更多...
【开源】大学生竞赛管理系统 JAVA+Vue+SpringBoot+MySQL

【开源】大学生竞赛管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、系统介绍 学生管理模块 教师管理模块 竞赛信息模块 竞赛报名模块 二、系统截图 三、核心代码 一、系统介绍 基于Vue.js和SpringBoot的大学生竞赛管理系统&#xff0c;分为管理后台和用户网页端&#xff0c;可以给管理员、学生和教师角色使用&#xff0c;包括学…
阅读更多...
基于双差分值和RR间隔处理的心电信号R峰检测算法（MATLAB R2018A）

基于双差分值和RR间隔处理的心电信号R峰检测算法（MATLAB R2018A）

心电信号中的R峰是确定心率和节律、以及检测其它波形特征点&#xff08;图1A&#xff09;的基础。R峰的准确检测是心率变异性分析、心拍分割和心律失常识别重要的处理步骤。 现有的心电信号R峰检测方法主要为基于规则的决策法和基于深度学习的检测方法。基于规则的决策法通常对…
阅读更多...
Liunx学习随笔

Liunx学习随笔

Linux学习随笔 一.前期准备1.安装Vmware Workstation软件2.下载linux镜像3.安装操作系统 夕阳无限好&#xff0c;只是近黄昏&#xff0c;时隔一年&#xff0c;重新提笔 没有比脚更远的路&#xff0c;没有比人更高的山 一.前期准备 1.安装Vmware Workstation软件 下载地址&am…
阅读更多...
香橙派AIpro（OrangePi AIPro）开发板初测评

香橙派AIpro（OrangePi AIPro）开发板初测评

开发板简介 最近&#xff0c;我拿到手一款Orange Pi AI Pro 开发板&#xff0c;它是香橙派联合华为精心打造的高性能AI 开发板&#xff0c;最早发布于2023年12月&#xff0c;其搭载了昇腾AI 处理器&#xff0c;可提供8TOPS INT8 的计算能力&#xff0c;内存提供了8GB 和16GB两…
阅读更多...
vue数据持久化仓库

vue数据持久化仓库

本文章是一篇记录实用性vue数据持久化仓的使用&#xff01; 首先在src中创建store文件夹&#xff0c;并创建一个根据本页面相关的名称&#xff0c; 在终端导入&#xff1a;npm i pinia 和 npm i pinia-plugin-persistedstate 接下来引入代码&#xff1a; import { defineSt…
阅读更多...
Tensorflow 2.0 安装过程

Tensorflow 2.0 安装过程

第一步&#xff1a;进入国内清华软件网站 anaconda | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirroranaconda 使用帮助 | 镜像站使用帮助 | 清华大学开源软件镜像站&#xff0c;致力于为国内和校内用户提供高质量的开源软件镜像、Linux 镜像源服务&…
阅读更多...
【数据库基础-mysql详解之索引的魅力(N叉树)】

【数据库基础-mysql详解之索引的魅力(N叉树)】

索引的魅力目录 &#x1f308;索引的概念&#x1f308;使用场景&#x1f308;索引的使用&#x1f31e;&#x1f31e;&#x1f31e;查看MySQL中的默认索引&#x1f31e;&#x1f31e;&#x1f31e;创建索引&#x1f31e;&#x1f31e;&#x1f31e;删除索引 站在索引背后的那个男…
阅读更多...
基于CNN卷积神经网络的金融数据预测matlab仿真,对比BP,RBF,LSTM

基于CNN卷积神经网络的金融数据预测matlab仿真,对比BP,RBF,LSTM

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 反向传播网络&#xff08;BP&#xff0c;多层感知器MLP&#xff09; 4.2 径向基函数网络&#xff08;RBF&#xff09; 4.3 卷积神经网络&#xff08;CNN&#xff09; 4.4 长短期记忆网…
阅读更多...
FPGA的VGA显示

FPGA的VGA显示

文章目录 一显示自定义字符1VGA介绍2准备字符数据3代码及实现的效果 二显示彩色条纹1实现代码及效果三显示彩色图片1准备图片数据2产生ROM IP核将生成的mif文件保存在ROM中3Pll ip核4更改分辨率5代码及实现效果 一显示自定义字符 1VGA介绍 本文基于DE2-115&#xff0c;如果有…
阅读更多...
springboot基础篇(快速入门+要点总结)

springboot基础篇(快速入门+要点总结)

目录 一、SpringBoot简介 二、创建SpringBoot&#xff08;通过Idea脚手架搭建项目&#xff09; 三、properties配置文件 properties 配置文件说明 ①. properties 基本语法 ②. 读取配置⽂件 ③. properties 缺点 2. yml 配置⽂件说明 ①. yml 基本语法 ②. yml 使用进…
阅读更多...
python 面对对象 类 魔法方法

python 面对对象 类 魔法方法

魔法方法 一、__init__ 构造函数&#xff0c;可以理解为初始化 触发条件&#xff1a;在实例化的时候就会触发 class People():def __init__(self, name):print(init被执行)self.name namedef eat(self):print(f{self.name}要吃饭)a People(张三) a.eat() # in…
阅读更多...
数据结构（三）循环链表

数据结构（三）循环链表

文章目录 一、循环链表&#xff08;一&#xff09;概念&#xff08;二&#xff09;示意图&#xff08;三&#xff09;操作1. 创建循环链表&#xff08;1&#xff09;函数声明&#xff08;2&#xff09;注意点&#xff08;3&#xff09;代码实现 2. 插入&#xff08;头插&#x…
阅读更多...
Redis数据类型（上篇）

Redis数据类型（上篇）

前提&#xff1a;&#xff08;key代表键&#xff09; Redis常用的命令 命令作用keys *查看当前库所有的keyexists key判断某个key是否存在type key查看key是什么类型del key 删除指定的keyunlink key非阻塞删除&#xff0c;仅仅将keys从keyspace元数据中删除&#xff0c;真正的…
阅读更多...
【机器学习】模型、算法与数据—机器学习三要素

【机器学习】模型、算法与数据—机器学习三要素

探索机器学习三要素&#xff1a;模型、算法与数据的交融之旅 一、模型&#xff1a;构建机器学习的基石二、算法&#xff1a;驱动模型学习的引擎三、数据&#xff1a;驱动机器学习的动力源泉四、代码实例&#xff1a;展示三要素的交融与碰撞 在数字时代的浪潮中&#xff0c;机器…
阅读更多...
C++模板——函数模板和类模板

C++模板——函数模板和类模板

目录 泛型编程 函数模板 函数模板概念 函数模板的定义和语法 函数模板的工作原理 函数模板的实例化 隐式实例化 显示实例化 函数模板的匹配原则 类模板 类模板的定义格式 类模板的实例化 泛型编程 什么是泛型编程&#xff1f; 泛型编程&#xff08;Generic Pr…
阅读更多...
具身人工智能：人工智能机器人如何感知世界

具身人工智能：人工智能机器人如何感知世界

什么是具身人工智能 虽然近年来机器人在智能城市、工厂和家庭中大量出现，但我们大部分时间都在与由传统手工算法控制的机器人互动。这些机器人的目标很狭隘，很少从周围环境中学习。相比之下，能够与物理环境互动并从中学习的人工智能 (AI) 代理（机器人、虚拟助手或其他智能系…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023