Three.js開發(fā):?jiǎn)蝹€(gè)模型效果簡(jiǎn)單設(shè)置
在Three.js中加載的gltf模型,模型加載參見?GIS開發(fā):Threejs加載gltf模型,可以對(duì)模型的一些效果進(jìn)行設(shè)置,比如設(shè)置模型的透明度、顯示線框圖、或者設(shè)置模型的顏色等。
Three.js加載的模型是一個(gè)模型場(chǎng)景(scene)數(shù)據(jù),場(chǎng)景中包括三維對(duì)象(Object3d),一個(gè)或者多個(gè)對(duì)象,所以,設(shè)置模型的時(shí)候,一般都是要循環(huán)場(chǎng)景中的模型。
加載gltf模型的時(shí)候,要設(shè)置一下模型場(chǎng)景(scene)的name,方便初始化的場(chǎng)景(scene)獲取到此模型場(chǎng)景。
//設(shè)置模型場(chǎng)景的名稱
? ? ? ?model = gltf.scene;
? ? ? ?model.name = "testmodel";
//大場(chǎng)景獲取模型場(chǎng)景?
let modelscene = scene.getObjectByName('testmodel');模型場(chǎng)景的三維模型需要traverse進(jìn)行遍歷。
模型的透明度設(shè)置:
? ? ? ?modelscene.traverse(function(object) {
? ? ? ?if (object.isMesh) {
? ? ? ? ? ?? ?//先設(shè)置模型透明,不然透明度不起效果
? ? ? ? ? ? ? object.material.transparent = true;
??? ? ? ? ? ?//設(shè)置模型材質(zhì)透明度
? ? ? ? ? ? ? object.material.opacity = 0.8;
? ? ? ? ? ?}?});

設(shè)置模型的線框圖:
? ? ? modelscene.traverse(function(object) {
if (object.isMesh) {
?? ? ? ? ? ?//設(shè)置線框圖為true
? ? ? ? ? ?? object.material.wireframe = true;
? ? ? ? ? ?}?});

設(shè)置顏色覆蓋模型:
let modelscene = scene.getObjectByName('testmodel');
modelscene.traverse(function(object) {?
if (object.isMesh) {??
?? ? ? ? ? ? ? ? ? ? ? //設(shè)置材質(zhì)的顏色
object.material.color = new THREE.Color(0xff0000);
}});

還有一些其他的模型效果設(shè)置,可以參照three.js官方文章api進(jìn)行設(shè)置。
參考文檔:http://www.webgl3d.cn/threejs/docs/index.html#api/zh/objects/Mesh