WebGL three.js学习笔记 自定义顶点建立几何体

自定义顶点建立几何体与克隆

Three.js本身已经有很多的网格模型，基本已经够我们的使用，但是如果我们还是想自己根据顶点坐标来建立几何模型的话，Three.js也是可以的。

基本效果如图：

点击查看demo演示

demo演示：https://nsytsqdtn.github.io/d...

实际上出于性能的考虑，three.js是认为我们的几何体在整个生命周期中是不会改变的，但是我们还是想使用dat.gui.js去实时更新我们自定义几何体的顶点信息。

当顶点信息发生变化时，我们就需要使用
geometry.verticesNeedUpdate = true;
但是在每一帧渲染完后这个值又会变为false，所以我们需要每次渲染中都更新这个值。

完整代码如下：

*

特别要注意的是

在顶点发生变化时，如果是多材质对象的话，需要使用遍历每一个子对象来进行更新顶点数据。并且不仅要更新顶点，还要更新线条的连接方式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版本要一致，否则可能会报错。有一些教程的示例程序版本可能就比较旧了，如果直接拿来用可能会出问题，注意分辨一下。