資訊專欄INFORMATION COLUMN
摘要：自定義頂點(diǎn)建立幾何體與克隆本身已經(jīng)有很多的網(wǎng)格模型，基本已經(jīng)夠我們的使用，但是如果我們還是想自己根據(jù)頂點(diǎn)坐標(biāo)來(lái)建立幾何模型的話，也是可以的。并且不僅要更新頂點(diǎn)，還要更新線條的連接方式，否則是沒(méi)有效果的。
自定義頂點(diǎn)建立幾何體與克隆
Three.js本身已經(jīng)有很多的網(wǎng)格模型，基本已經(jīng)夠我們的使用，但是如果我們還是想自己根據(jù)頂點(diǎn)坐標(biāo)來(lái)建立幾何模型的話，Three.js也是可以的。
基本效果如圖：
實(shí)際上出于性能的考慮，three.js是認(rèn)為我們的幾何體在整個(gè)生命周期中是不會(huì)改變的，但是我們還是想使用dat.gui.js去實(shí)時(shí)更新我們自定義幾何體的頂點(diǎn)信息。
當(dāng)頂點(diǎn)信息發(fā)生變化時(shí)，我們就需要使用
geometry.verticesNeedUpdate = true;
但是在每一幀渲染完后這個(gè)值又會(huì)變?yōu)閒alse，所以我們需要每次渲染中都更新這個(gè)值。
完整代碼如下：
Three.js
*
特別要注意的是在頂點(diǎn)發(fā)生變化時(shí)，如果是多材質(zhì)對(duì)象的話，需要使用遍歷每一個(gè)子對(duì)象來(lái)進(jìn)行更新頂點(diǎn)數(shù)據(jù)。并且不僅要更新頂點(diǎn)，還要更新線條的連接方式geometry.elementsNeedUpdate = true，否則是沒(méi)有效果的。（甚至嘗試了一下不更新頂點(diǎn)，只更新線條也是可以達(dá)到實(shí)時(shí)更新的效果）
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;//通知頂點(diǎn)更新
e.geometry.elementsNeedUpdate = true;//特別重要，通知線條連接方式更新
e.geometry.computeFaceNormals();
});
如果是單一的材質(zhì)幾何體，就不需要去遍歷每一個(gè)子物體，直接把幾何體的每一個(gè)頂點(diǎn)值更改，然后在通知頂點(diǎn)更新，就可以了。
//單材質(zhì)幾何體要更新頂點(diǎn)的話使用這一段語(yǔ)句
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是沒(méi)有多帶帶拿出來(lái)作為一個(gè)js文件的，是直接寫在three.js里。
而且使用69版本的three.js時(shí)，不需要更新線條的連接方式也可以實(shí)現(xiàn)實(shí)時(shí)更新。但是103版本試了很多次，都不行。
另外，使用的OrbitControls.js和dat.gui.min.js最好都是和自己用的Three.js版本要一致，否則可能會(huì)報(bào)錯(cuò)。有一些教程的示例程序版本可能就比較舊了，如果直接拿來(lái)用可能會(huì)出問(wèn)題，注意分辨一下。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/103808.html
摘要：學(xué)習(xí)筆記使用粒子系統(tǒng)模擬時(shí)空隧道本例的運(yùn)行結(jié)果如圖時(shí)空隧道演示地址的粒子系統(tǒng)的粒子系統(tǒng)主要是依靠精靈體來(lái)創(chuàng)建的，要實(shí)現(xiàn)中的粒子系統(tǒng)創(chuàng)建，一般有兩種方式。 WebGL three.js學(xué)習(xí)筆記 使用粒子系統(tǒng)模擬時(shí)空隧道 本例的運(yùn)行結(jié)果如圖：showImg(https://img-blog.csdnimg.cn/20190426222855492.png?x-oss-process=ima...
摘要：一般說(shuō)來(lái)，對(duì)于制圖建模軟通常使正交投影，這樣不會(huì)因?yàn)橥队岸淖兾矬w比例而對(duì)于其他大多數(shù)應(yīng)用，通常使用透視投影，因?yàn)檫@更接近人眼的觀察效果。 showImg(https://segmentfault.com/img/remote/1460000012581680?w=1920&h=1080); 1. 概述 1.1 什么是WebGL？ WebGL是在瀏覽器中實(shí)現(xiàn)三維效果的一套規(guī)范 想要使用...
摘要：次時(shí)代傳統(tǒng)的方式就是創(chuàng)建次時(shí)代模型，對(duì)應(yīng)中的材質(zhì)是高光網(wǎng)格材質(zhì)對(duì)象，通常貼圖文件包含顏色貼圖法線貼圖和高光貼圖。 產(chǎn)品在線展示案例預(yù)覽 玉鐲在線預(yù)覽：http://www.yanhuangxueyuan.co... 汽車在線預(yù)覽：http://www.yanhuangxueyuan.co... Web3D技術(shù)歷史 可通過(guò)插件或WebGL技術(shù)實(shí)現(xiàn)Web3D，在線網(wǎng)頁(yè)上預(yù)覽操作三維...
閱讀 3122·2023-04-25 15:02
閱讀 2827·2021-11-23 09:51
閱讀 2039·2021-09-27 13:47
閱讀 1994·2021-09-13 10:33
閱讀 982·2019-08-30 15:54
閱讀 2648·2019-08-30 15:53
閱讀 2864·2019-08-29 13:58
閱讀 898·2019-08-29 13:54
