three.js 利用点面绘制几何体

最新推荐文章于 2023-04-14 16:11:56 发布
最新推荐文章于 2023-04-14 16:11:56 发布
阅读量578 收藏 1
点赞数 1
分类专栏： 笔记 文章标签： javascript 3d 几何学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/quitv/article/details/125154085
版权

使用BufferGeometry
最终的效果展示
在这里插入图片描述
代码部分 ：
首先添加几何体的顶点

 var cubeGeometry = new THREE.BufferGeometry();
            const vertices = new Float32Array([
                10, 10, 10,
                -10, 10, 10,
                -10, -10, 10,
                10, -10, 10,
                10, -10, -10,
                10, 10, -10,
                -10, 10, -10,
                -10, -10, -10,
            ])
            cubeGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

利用顶点的索引关系绘制三角面

 var indexes = new Uint16Array([
                0, 1, 2,
                0, 2, 3,
                0, 3, 4,
                0, 4, 5,
                1, 6, 7,
                1, 7, 2,
                6, 5, 4,
                6, 4, 7,
                5, 6, 1,
                5, 1, 0,
                3, 2, 7,
                3, 7, 4,
            ])
            cubeGeometry.index = new THREE.BufferAttribute(indexes, 1);
            //初始化存放颜色信息的序列化数组

定义几何体的颜色

 //初始化存放颜色信息的序列化数组
const colors = new Float32Array([
                1.0, 0.0, 0.0,
                0.0, 1.0, 0.0,
                0.0, 0.0, 1.0,
                0.0, 0.5, 0.5
            ]);
            //设置颜色信息
            cubeGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

需要定义一个法向量 ，不然绘制的几何体显示黑色

 //生成法向量
            cubeGeometry.computeVertexNormals();

全部代码

<!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>
</head>
<script src="../../node_modules/three/build/three.js"></script>
<script src="../../node_modules/three/examples/js/controls/OrbitControls.js"></script>
<script src="../../node_modules/three/examples/js/libs/stats.min.js"></script>
<script src="../../node_modules/three/examples/js/libs/dat.gui.min.js"></script>

<body onload="draw();">
    <script>
        var renderer;

        function initRender() {
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(window.innerWidth, window.innerHeight);
            //告诉渲染器需要阴影效果
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
            document.body.appendChild(renderer.domElement);
        }

        var camera;

        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 40, 100);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
        }

        var scene;

        function initScene() {
            scene = new THREE.Scene();
        }

        //初始化dat.GUI简化试验流程
        var gui;

        function initGui() {
            //声明一个保存需求修改的相关数据的对象
            gui = {
                lightY: 30, //灯光y轴的位置
                cubeX: 25, //立方体的x轴位置
                cubeY: 10, //立方体的x轴位置
                cubeZ: -5 //立方体的z轴的位置
            };
            var datGui = new dat.GUI();
            //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
            datGui.add(gui, "lightY", 0, 100);
            datGui.add(gui, "cubeX", -30, 30);
            datGui.add(gui, "cubeY", -30, 30);
            datGui.add(gui, "cubeZ", -30, 30);
        }

        var light;

        function initLight() {
            scene.add(new THREE.AmbientLight(0x444444));

            light = new THREE.PointLight(0xffffff);
            light.position.set(15, 30, 10);

            //告诉平行光需要开启阴影投射
            light.castShadow = true;

            scene.add(light);
        }

        var cube;

        function initModel() {

            //辅助工具
            var helper = new THREE.AxisHelper(10);
            scene.add(helper);

            // 创建一个立方体
            //    v6----- v5
            //   /|      /|
            //  v1------v0|
            //  | |     | |
            //  | |v7---|-|v4
            //  |/      |/
            //  v2------v3

            //立方体
            var cubeGeometry = new THREE.BufferGeometry();
            const vertices = new Float32Array([
                10, 10, 10,
                -10, 10, 10,
                -10, -10, 10,
                10, -10, 10,
                10, -10, -10,
                10, 10, -10,
                -10, 10, -10,
                -10, -10, -10,
            ])
            cubeGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
            var indexes = new Uint16Array([
                0, 1, 2,
                0, 2, 3,
                0, 3, 4,
                0, 4, 5,
                1, 6, 7,
                1, 7, 2,
                6, 5, 4,
                6, 4, 7,
                5, 6, 1,
                5, 1, 0,
                3, 2, 7,
                3, 7, 4,
            ])
           
            //初始化存放颜色信息的序列化数组
            const colors = new Float32Array([
                1.0, 0.0, 0.0,
                0.0, 1.0, 0.0,
                0.0, 0.0, 1.0,
                0.0, 0.5, 0.5
            ]);
            //设置颜色信息
            cubeGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
            cubeGeometry.index = new THREE.BufferAttribute(indexes, 1);

            //生成法向量
            cubeGeometry.computeVertexNormals();

            var cubeMaterial = new THREE.MeshLambertMaterial({
                vertexColors: THREE.VertexColors, //使用缓存中的颜色
                side: THREE.DoubleSide
            });

            cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.position.x = 25;
            cube.position.y = 5;
            cube.position.z = -5;

            //告诉立方体需要投射阴影
            cube.castShadow = true;

            scene.add(cube);

            //底部平面
            var planeGeometry = new THREE.PlaneGeometry(100, 100);
            var planeMaterial = new THREE.MeshLambertMaterial({
                color: 0xaaaaaa
            });

            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.y = -0;

            //告诉底部平面需要接收阴影
            plane.receiveShadow = true;

            scene.add(plane);

        }

        //初始化性能插件
        var stats;

        function initStats() {
            stats = new Stats();
            document.body.appendChild(stats.dom);
        }

        //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
        var controls;

        function initControls() {

            controls = new THREE.OrbitControls(camera, renderer.domElement);

            // 如果使用animate方法时，将此函数删除
            //controls.addEventListener( 'change', render );
            // 使动画循环使用时阻尼或自转 意思是否有惯性
            controls.enableDamping = true;
            //动态阻尼系数 就是鼠标拖拽旋转灵敏度
            //controls.dampingFactor = 0.25;
            //是否可以缩放
            controls.enableZoom = true;
            //是否自动旋转
            controls.autoRotate = false;
            //设置相机距离原点的最远距离
            controls.minDistance = 50;
            //设置相机距离原点的最远距离
            controls.maxDistance = 200;
            //是否开启右键拖拽
            controls.enablePan = true;
        }

        function render() {
            renderer.render(scene, camera);
        }

        //窗口变动触发的函数
        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            render();
            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        function animate() {
            //更新控制器
            render();

            //更新性能插件
            stats.update();

            //更新相关位置
            light.position.y = gui.lightY;
            cube.position.x = gui.cubeX;
            cube.position.y = gui.cubeY;
            cube.position.z = gui.cubeZ;

            controls.update();

            requestAnimationFrame(animate);
        }

        function draw() {
            initGui();
            initRender();
            initScene();
            initCamera();
            initLight();
            initModel();
            initControls();
            initStats();

            animate();
            window.onresize = onWindowResize;
        }
    </script>
</body>

</html>
quitv
关注
专栏目录
Three.js入门（涉及如何让平面物体变成立体的、添加坐标辅助系、物体移动）
m0_46339022的博客
06-28 792
使用控制器（controls）。创建main01.js，复制main.js的内容。1.在最开始导入轨道控制器： 2.创建轨道控制器： OrbitControls( object : Camera, domElement : HTMLDOMElement )​ object: （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。 由于浏览器是不断刷新的，我们应该手动反复渲染，因此调用如下函数，并使用方法**requestAnimationFrame()**请求动画帧： 二、如
Three.js 使用顶点、面绘制模型
蜗牛速度额的博客
09-12 3977
我们在学些WebGL基础的时候每天都是在一直研究顶点位置，法向量，绘制下标什么的。虽然复杂，但是毕竟原生，性能没得说。 three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型 首先，我创建了一个空白的形状： //立方体 var cubeGeometry = new THREE.Geometry(); 然后添加了立方体的顶点，一共8个 //创建立方体的顶点 var ve...
threejs自定义顶点（vertex）创建几何体
popstarqq的博客
11-17 3560
threejs 提供了很多生成几何体的方法，如下: 调用上面的方法可以很方便创建各种几何体,比如创建一个平面和立方体盒子,设置长宽高或者长宽就可以创建，代码和效果如下: const material = new THREE.MeshBasicMaterial({ color: "orange", }); // 立方体 const cubegeometry = new THREE.BoxGeometry(10, 10, 10); const cube = new THREE.Mesh(.
three.js学习使用Scene对象，在三维空间中创建随机大小的立方体(vue中使用three.js03)
点燃火柴的博客
08-21 2526
Scene对象方法和属性学习的可视化demo一、demo效果总览二、scene对象相关的方法和属性1.给场景中添加物体 Scene.add(object)2.从场景中移除物体 Scene.remove(obj)3.从场景中查找物体 Scene.getChildByName(name)4.遍历场景中的物体 Scene.traverse(function)5.获取场景中的物体 Scene.children6.给场景设置雾化效果 Scene.fog7.统一场景中物体的材质 Scene.overrideMateri
使用几何对象Geometry通过点和面绘制立方体，克隆几何对象(vue中使用three.js04)
点燃火柴的博客
08-24 1591
创建坐标系 AxesHelper 用于简单模拟3个坐标轴的对象. 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴. var axesHelper = new THREE.AxesHelper( 5 ); scene.add( axesHelper ); 构造函数 AxesHelper( size : Number ) size – (可选的) 表示代表轴的线段长度. 默认为 1. ...
基于vue3使用three.js在三维直角坐标系中创建时空立方体
weixin_44875324的博客
03-04 2084
本篇使用vue3在直角坐标系中创建时空立方体。与原生js创建方式类似，但是有个别细节还是有一定的差异，接下来就开启创建简单的时空立方体吧！
Three.js利用顶点绘制立方体的方法详解
11-28
在本教程中，我们将深入探讨如何使用Three.js库利用顶点坐标来绘制立方体。Three.js是一个基于WebGL的JavaScript库，它简化了在浏览器中创建3D图形的过程。在这个过程中，我们将创建一个立方体几何体，定义其顶点、...
Test1_海洋_three.js大海_ThreeJS_threejs体绘制数据_threejs颜色_
10-03
在本项目中，"Test1_海洋_three.js大海_ThreeJS_threejs体绘制数据_threejs颜色_" 提供了一个关于使用Three.js库创建海洋温度颜色体绘制的实例。Three.js是一款强大的JavaScript库，专用于在Web浏览器中进行3D图形...
Three.js学习之几何形状
10-21
上述代码中，首先创建了一个基础材质，并指定了颜色和线框模式，然后利用THREE.CubeGeometry生成了一个立方体几何体，并将材质应用到该几何体上。最后，创建了一个Mesh对象，并将其添加到了场景中。 总之，Three.js...
three.js3维坐标系+绘制立方体（带边框）
02-28
在本文中，我们将深入探讨如何使用three.js库创建一个3维坐标系，并在该系统中绘制带有边框的立方体，以及在立方体表面绘制线条。three.js是JavaScript的一个强大库，专门用于在Web浏览器中进行3D图形编程。让我们一...
three. js的人体解剖图.zip
07-14
Three.js 提供了多种预定义的几何体，如BoxGeometry（立方体）、SphereGeometry（球体）和CylinderGeometry（圆柱体）等。对于人体解剖图，可能需要自定义几何体来精确匹配人体各个部位的形状。 2. 材质（Material）...
Three.js 基础- 第 2 章 - 几何体BufferGeometry
能带孩子会做饭
04-14 1627
Three.js 基础- 第 2 章 - 几何体BufferGeometry 1. 几何体顶点位置数据和点模型 2. 线模型对象 3. 网格模型(三角形概念) 4. 构建一个矩形平面几何体 5. 几何体顶点索引数据 6. 顶点法线数据 7. 查看threejs自带几何体顶点 8. 旋转、缩放、平移几何体
THREE.js 第三部分 canvas_geometry_birds.html
lp4966649的专栏
10-20 594
涉及到模拟鸟类飞行的状态，首先需要模拟鸟类的形态，代码如下： var Bird = function () { var scope = this; THREE.Geometry.call(this); v(5, 0, 0); v(-5, -2, 1); v(-5, 0, 0); v(-5, -2, -1); v(0, 2, -6);
three.js 之 入门篇 5之几何体的认知（ 顶点创建矩阵、炫酷三角形科技物体、基础网格材质 material ）
weixin_43845137的博客
01-11 431
基础网格材质 material等
【three.js】使用three做一个自己的彩红猫
角角兔的博客
11-30 1342
一直彩红猫中毒，在学了一些three.js之后，更想做一个属于自己的彩虹猫了。 最后的完成效果：彩红猫 手机显示效果也还可以。 目标 在做一件事情之前 最为重要的就是列出要做到的事情目标，同时目标要记得是可测量的（得知道怎么样算是完成） 彩红可调整猫使用帧动画进行动画效果 彩红猫的速度是可以动态调整的（即帧动画速度可调整） 彩红猫的贴图可以切换 切换不同风格的彩红猫 循环向左的彩色背景，速...
Threejs 导入动态模型 - 兔子岛
椰卤工程师的个人博客
01-19 1916
Threejs 3d动画兔子岛，兔年吉祥！
Threejs物联网，养殖场3D可视化（二）
左本Web3D
12-03 5618
1，介绍 该示例使用的是 r95版本Three.js库。 主要实现功能：引用养殖场模型进行展示。效果图如下： 2，主要说明 养殖场3D展示主要使用OBJLoader和MTLLoader加载模型并直接赋予材质进行展示。 引入模型代码如下： 3，源码 var camera; var renderer; var mesh; function init() { // 创建一个场景，它将包含我们所有的元素，如物体，相机和灯光。 va...
ThreeJS-BufferGeometry随机50个三角形（九）
以爱护甲,爱满枫林。
03-29 1083
/但是requestAnimationFrame的回调函数注册生命只有一次，因此需要循环注册，才能达到一直调用的效果。//将webgl渲染的canvas内容添加到body上。//监听画面变化，更新渲染画面，（自适应的大小）//创建轨道控制器，可以拖动,控制的是摄像头。//设置控制阻尼，让控制器有更真实的效果。//使用渲染器，通过相机将场景渲染进来。//渲染下一帧的时候就会调用回调函数。//更新摄像机的投影矩阵。//更新摄像机的宽高比。//设置渲染器的像素比。//将物体加入到场景。//控制3D物体移动。
Three.js - 绘制不规则图形（二十）
小小的前端
04-27 3738
Shape 形状 通过路径来绘制二维形状平面。简单理解就是在一个平面上用不规则的线连接成一个图形。 想在three.js中展示需要使用ExtrudeGeometry，ShapeGeometry来生成几何体。 它有一个.holes属性，用于在形状平面中挖洞。.holes值是一个THREE.Path()数组，定义了二维路径。 常用绘图函数 moveTo(x, y) 将绘图点移动到指定的 x、y 坐标处。 lineTo(x, y) 从当前位置创建一条到 x、y 坐标的线。 quadricCurveTo(cp
three.js在几何体表面绘制图形
最新发布
08-22
在Three.js中，要在几何体表面绘制图形，首先需要创建几何体并配置其属性。以下是一些基本步骤： 1. **创建几何体**[^1]: ```javascript const geometry = new THREE.LineGeometry(points, segments); // points...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值