参考资料:threejs中文网

threejs qq交流群:814702116

视频讲解:模型命名

模型命名(程序与美术协作)—层级模型节点选择

开发一些web3d项目,比如一个小区、工厂的可视化,场景中会有多个模型对象,程序员加载三维模型的时候,通过什么方式才能获取到自己想要的某个模型节点是个问题。

三维软件模型命名

课程提供了一个Blender的模型例子,你可以打开查看。

其实模型节点命名可以类比前后端API接口命名,web3d前端和后端对接需要命名接口,和3D美术对接,同样需要给一些模型节点命名。

  • 模型命名可以使用汉字、英文、拼音其他语言形式。

  • 如果使用汉字注意,有些三维建模软件可能存在导出乱码问题。

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

加载gltf模型,通过gltf.scene可以获取模型的数据,你可以通过浏览器控制打印gltf.scene,然后和你三维建模软件中的模型目录树对比,比较两者的结构是否相同。

  • 模型父对象节点可以用Object3D对象表示,也可以用组对象Group表示。
  • 通过.children属性可以查看一个父对象模型的的所有子对象。
  • 通过.name属性可以查看模型节点的名称
loader.load("./简易小区.glb", function (gltf) { 
    console.log('场景3D模型树结构', gltf.scene);
    model.add(gltf.scene);
})

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

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

// 返回名.name为"1号楼"对应的对象
const nameNode = gltf.scene.getObjectByName("1号楼");
nameNode.material.color.set(0xff0000);//改变1号楼Mesh材质颜色

分组管理

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

//获得所有'洋房'房子的父对象
const obj = gltf.scene.getObjectByName('洋房');
console.log('obj', obj); //控制台查看返回结果
console.log('obj.children', obj.children); 
// obj.children的所有子对象都是Mesh,改变Mesh对应颜色
obj.children.forEach(function (mesh) {
    mesh.material.color.set(0xffff00);
})
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐