資訊專欄INFORMATION COLUMN
摘要：自定義頂點建立幾何體與克隆本身已經有很多的網格模型，基本已經夠我們的使用，但是如果我們還是想自己根據頂點坐標來建立幾何模型的話，也是可以的。并且不僅要更新頂點，還要更新線條的連接方式，否則是沒有效果的。
自定義頂點建立幾何體與克隆
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版本要一致，否則可能會報錯。有一些教程的示例程序版本可能就比較舊了，如果直接拿來用可能會出問題，注意分辨一下。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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，在線網頁上預覽操作三維...
閱讀 3115·2023-04-25 15:02
閱讀 2806·2021-11-23 09:51
閱讀 2030·2021-09-27 13:47
閱讀 1984·2021-09-13 10:33
閱讀 957·2019-08-30 15:54
閱讀 2640·2019-08-30 15:53
閱讀 2853·2019-08-29 13:58
閱讀 881·2019-08-29 13:54
