摘要：自定义顶点建立几何体与克隆本身已经有很多的网格模型，基本已经够我们的使用，但是如果我们还是想自己根据顶点坐标来建立几何模型的话，也是可以的。并且不仅要更新顶点，还要更新线条的连接方式，否则是没有效果的。
自定义顶点建立几何体与克隆
Three.js本身已经有很多的网格模型，基本已经够我们的使用，但是如果我们还是想自己根据顶点坐标来建立几何模型的话，Three.js也是可以的。
基本效果如图：
实际上出于性能的考虑，three.js是认为我们的几何体在整个生命周期中是不会改变的，但是我们还是想使用dat.gui.js去实时更新我们自定义几何体的顶点信息。
当顶点信息发生变化时，我们就需要使用
geometry.verticesNeedUpdate = true;
但是在每一帧渲染完后这个值又会变为false，所以我们需要每次渲染中都更新这个值。
完整代码如下：
Three.js
*
特别要注意的是在顶点发生变化时，如果是多材质对象的话，需要使用遍历每一个子对象来进行更新顶点数据。并且不仅要更新顶点，还要更新线条的连接方式geometry.elementsNeedUpdate = true，否则是没有效果的。（甚至尝试了一下不更新顶点，只更新线条也是可以达到实时更新的效果）
let vertices = [];
for (let i = 0; i < 8; i++) {
vertices.push(new THREE.Vector3(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z));
}
mesh.children.forEach(function (e) {
e.geometry.vertices = vertices;
e.geometry.verticesNeedUpdate = true;//通知顶点更新
e.geometry.elementsNeedUpdate = true;//特别重要，通知线条连接方式更新
e.geometry.computeFaceNormals();
});
如果是单一的材质几何体，就不需要去遍历每一个子物体，直接把几何体的每一个顶点值更改，然后在通知顶点更新，就可以了。
//单材质几何体要更新顶点的话使用这一段语句
for (let i = 0; i < 8; i++) {
console.log(mesh);
mesh.geometry.vertices[i].set(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z);
mesh.geometry.verticesNeedUpdate = true;
mesh.geometry.computeFaceNormals();
}
注：
老版本的three.js，SceneUtils是没有多带带拿出来作为一个js文件的，是直接写在three.js里。
而且使用69版本的three.js时，不需要更新线条的连接方式也可以实现实时更新。但是103版本试了很多次，都不行。
另外，使用的OrbitControls.js和dat.gui.min.js最好都是和自己用的Three.js版本要一致，否则可能会报错。有一些教程的示例程序版本可能就比较旧了，如果直接拿来用可能会出问题，注意分辨一下。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103808.html
摘要：学习笔记使用粒子系统模拟时空隧道本例的运行结果如图时空隧道演示地址的粒子系统的粒子系统主要是依靠精灵体来创建的，要实现中的粒子系统创建，一般有两种方式。 WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图：showImg(https://img-blog.csdnimg.cn/20190426222855492.png?x-oss-process=ima...
摘要：一般说来，对于制图建模软通常使正交投影，这样不会因为投影而改变物体比例而对于其他大多数应用，通常使用透视投影，因为这更接近人眼的观察效果。 showImg(https://segmentfault.com/img/remote/1460000012581680?w=1920&h=1080); 1. 概述 1.1 什么是WebGL？ WebGL是在浏览器中实现三维效果的一套规范 想要使用...
摘要：次时代传统的方式就是创建次时代模型，对应中的材质是高光网格材质对象，通常贴图文件包含颜色贴图法线贴图和高光贴图。 产品在线展示案例预览 玉镯在线预览：http://www.yanhuangxueyuan.co... 汽车在线预览：http://www.yanhuangxueyuan.co... Web3D技术历史 可通过插件或WebGL技术实现Web3D，在线网页上预览操作三维...
阅读 3087·2023-04-25 15:02
阅读 2726·2021-11-23 09:51
阅读 1982·2021-09-27 13:47
阅读 1943·2021-09-13 10:33
阅读 883·2019-08-30 15:54
阅读 2615·2019-08-30 15:53
阅读 2818·2019-08-29 13:58
阅读 824·2019-08-29 13:54
