Three.js教程：模型材質(zhì)和幾何體屬性

推薦：將NSDT場(chǎng)景編輯器加入你的3D工具鏈

其他工具集：NSDT簡(jiǎn)石數(shù)字孿生

本節(jié)課給大家介紹模型對(duì)象的幾何體.geometry和材質(zhì)屬性.material。

瀏覽器控制打印模型對(duì)象mesh，可以展開(kāi)對(duì)象，查看對(duì)象的幾何體.geometry和材質(zhì)屬性.material。

const mesh = new THREE.Mesh(geometry, material);
console.log('mesh',mesh);

瀏覽器控制臺(tái)打印模型的幾何體屬性.geometry和材質(zhì)屬性.material。

console.log('mesh.geometry',mesh.geometry);
console.log('mesh.material',mesh.material);

// 訪問(wèn)模型材質(zhì),并設(shè)置材質(zhì)的顏色屬性
mesh.material.color.set(0xffff00);

// 訪問(wèn)模型幾何體,并平移幾何體頂點(diǎn)數(shù)據(jù)
mesh.geometry.translate(0,100,0);

const mesh = new THREE.Mesh(geometry, material);
const mesh2 = new THREE.Mesh(geometry, material);
mesh2.position.x = 100;
// 兩個(gè)mesh共享一個(gè)材質(zhì)，改變一個(gè)mesh的顏色，另一個(gè)mesh2的顏色也會(huì)跟著改變
// mesh.material和mesh2.material都指向同一個(gè)material
// 三者等價(jià)：mesh.material、mesh2.material、material
mesh.material.color.set(0xffff00);
// 三者等價(jià)：mesh.geometry、mesh2.geometry、geometry
mesh.geometry.translate(0,100,0);