javascript - 从对象创建网格数组(THREE.JS 和 GLTF)

Question

下面是我将网格加载到对象上的一段代码。目前它遍历整个事情。

当前代码:

var loader = new THREE.GLTFLoader();
            loader.load( '../gtf/Box.gltf', function ( gltf ) {
                model = gltf.scene;

                gltf.scene.traverse( function ( child ) {
                    if ( child.isMesh ) {
                        child.material.map = texture;
                    }
                } );

                scene.add( model);
            } );

我将如何制作一个 children[] 数组？然后每个 child 都会允许我分配单独的纹理。

我在 Blender 中使用单独的网格和 Material 制作了模型。

在 THREE.JS 中，我希望能够去:

children[0].material.map = blueTexture;

children[1].material.map = greenTexture;

等等

Answer 1

如果我正确理解您的问题，您可以执行以下操作:

var loader = new THREE.GLTFLoader();
loader.load( '../gtf/Box.gltf', function ( gltf ) {
  model = gltf.scene;

  var children = []

  // Construct array of children during traversal of gltf object
  gltf.scene.traverse( function ( child ) {
      if ( child.isMesh ) {
          children.push(child)
      }
  } );

  // Assuming array length is 2 or more, and blueTexture/greenTexture are defined
  children[0].material.map = blueTexture;
  children[1].material.map = greenTexture;

  scene.add( model);
} );