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

Posted

技术标签:

【中文标题】从对象创建一个网格数组(THREE.JS 和 GLTF)【英文标题】:Create an Array of Meshes from Object (THREE.JS and GLTF) 【发布时间】:2019-02-03 17:19:30 【问题描述】:

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

当前代码:

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[] 的数组?然后每个孩子将允许我分配单独的纹理。

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

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

children[0].material.map = blueTexture;

children[1].material.map = greenTexture;

【问题讨论】:

【参考方案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);
 );

【讨论】:

嘿 Dacre,正是我想要的。我会再次发表评论,让您知道它是否有效在遍历后是否有一个调用/函数可以用来获取数组的大小? children.length 嘿@TheGoldenD0nut 很高兴我能帮上忙——是的,你可以这样做:children.length 在遍历完成后获取数组的大小。如果您需要在load() 处理程序之外访问此数组,只需将var children = [] 移到该函数之外。希望这会有所帮助!

以上是关于从对象创建一个网格数组(THREE.JS 和 GLTF)的主要内容,如果未能解决你的问题,请参考以下文章

Three.js开发指南---创建,加载高级网格和几何体(第八章)

THREE.js:将网格划分为零件

Three.js建模基础

Three.js 3D建模必备基础

渲染后将几何图形添加到 three.js 网格

Three.js 子网格位置总是返回 (0,0,0)