threejs 层级模型节点选择 学习笔记

threejs yekong

浏览器控制台查看3D模型树结构

加载gltf模型,通过gltf. scene可以获取模型的数据,你可以通过浏览器控制打印gltf. scene,然后和你三维建模软件中的模型目录树对比,比较两者的结构是否相同。
模型父对象节点可以用Oaiect3D对象表示,也可以用组对象Group 表示。
通过.children属性可以查看一个父对象模型的的所有子对象。通过.name 属性可以查看模型节点的

模型父对象节点可以用Obiect3D对象表示,也可以用组对象 Group 表示。
通过.children属性可以查看一个父对象模型的的所有子对象。
通过.name 属性可以查看模型节点的名称

loader.load(modelUrl, function (gltf) {
    console.log( 场景3D模型树结构’,gltf.scene):
    model.add(gltf.scene)
})

getObjectByName()根据. name获取模型节点

一般三维建模软件的目录树,都有模型的名称,threejs加载外部模型,外部模型的名称体现为three.js对象的。name 属性,threejs可以通过getObjectByName()方法,把模型节点的名字,name 作为改函数参数,快速查找某个模型对象。

// 返回名.name为”1号楼“对应的对家
const nameNode = gltf.scene.getObjectByName('1号楼');
nameNode.material.color.set(0xff0000)
// /改变1号楼mesh村质颜色

分组管理

对于大类,可以进行分组,这样更好管理,比如高层分为一组,洋房分为一组。如果这样做的好处是,程序员可以通过分类名称,快速获取所有模型,然后进行同样的渲染操作,比如洋房批量改变颜色。

const obj = gltf.scene.getObjectByName('洋房');
obj.children.forEach(function (mesh) {
    mesh.material.color.set(0xffff00)
})
喜欢