如何使用three.js 查找.OBJ 3D 模型的子部分？

Question

我需要实现一个功能，用户可以上传一个 OBJ 3D 模型，然后我将在浏览器中显示该模型的不同子部分。 （与https://www.sculpteo.com 所做的相同。）。

但我找不到 OBJ 模型的子部分。我正在使用 three.js 在浏览器中显示 OBJ 模型。

有没有办法使用three.js 找到OBJ 模型的子部件？

我正在共享代码以加载 OBJ 模型 =>

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'path' );
mtlLoader.load( 'model.mtl', function( materials ) {
  materials.preload();

  var objLoader = new THREE.OBJLoader();
  objLoader.setMaterials( materials );
  objLoader.setPath( 'path' );
  objLoader.load( 'model.obj', function ( object ) {
    scene.add( object);
  });
});

现在我不知道如何找到这个“model.obj”的子部分。请帮忙。提前致谢。

Answer 1

OJBLoader 返回 (THREE.Object3D() (它在 r71)) THREE.Group() (r81) 和 THREE.Mesh 的子级。

仅当您的 .obj 文件具有对象组时，您才会将子部件作为对象的子网格。没有它，你只会得到一个单一的子网格。 阅读Wavefront .obj file format。 因此，如果您在

下分组的子部分数据

o [object name]

标签，那么您将拥有与 .obj 文件中的“o”组一样多的子网格，然后您可以遍历。

upd#1：它也适用于“g”标签。

g [group name]

example 基于 Threejs.org 的“webgl_interactive_cubes”，.obj 文件中以“g”标签（skull、uteeth、jaw、lteeth）分组的子部分数据

Answer 2

当您加载对象时，您可以在回调函数中执行此操作：

   objLoader.load('yourUrl.obj', function (object) {
     object.traverse(function (child) {
       if (child instanceof THREE.Mesh) {
         console.log(child);
         // here you can make what you want with the children of object
       }
     });
   });