在 ThreeJS 中訪問孩子的孩子

Question

我一直在學習 ThreeJs，男孩在嘗試調用我的文件時遇到了困難。

讓我先解釋一下我想要做什么，我有 3 個模型要在頁面上顯示，因為人們滾動應該顯示不同的表情符號，比如小部分。 經典的 webapge 方式。

我從攪拌機中將這些模型導入到一個 gltb 文件中以提高性能，從理論上講，節省時間，其中兩個對象是組，另一個是網格。 導入中沒有其他內容。

但是，在使用 gltf loader 加載我的模型后，我找不到一種方法來訪問它們以將它們容納在我希望它們所處的位置和旋轉中。 請幫忙。

我加載了我的場景：

gltfLoader.load(
'EMOJIS.gltf',
(gltf) =>
{
    gltf.scene.scale.set(0.25, 0.25, 0.25)
    gltf.scene.position.set(0, 0, 0)

    mixer = new THREE.AnimationMixer(gltf.scene)
    scene.add(gltf.scene)
}

之后，我檢查了我的日志以獲取對象

console.log(scene)
console.log(scene.children)
console.log(scene.children[3])

第一個和第二個日志顯示如下：

我意識到我應該聯系場景的孩子們來獲取我的 3 個表情符號：心、桃、心眼。 例如，我想我可以調用scene.children[3].children[0] 。 並打電話給心臟 object 表情符號但我不能打電話給他們？ 我嘗試了很多方法，但它總是顯示為未定義。

console.log(scene.children) 顯示了一個從 0 到 3 的數組，在 [3] 插槽中我可以看到我想要的表情符號元素，但調用 console.log(scene.children[3]) 顯示未定義，我該怎么做訪問我想要的組？

打電話

var heart = scene.getObjectByName( "heart", true );

或通過他們的 ID（16、15 和 23）調用也顯示未定義。

非常感謝所有幫助。

Answer 1

我在訪問襯衫 model 的孩子時遇到了一些麻煩，所以我創建了一個 object ，其中孩子的名字（如 Blender 中的命名）作為屬性以便於訪問。 也許這會幫助你：

     // prepare shirt (js) object
     let shirt = {};

        ... after importing the gltf ...

      scene.add(gltf.scene);

      // loop through all children and create a property 
      // for every child based on it's name
      gltf.scene.children.forEach((item) => {
        shirt[item.name] = item;
      });

      // then you can access every child through 
      // the named property of the shirt object

      shirt.Back.children[0].material = shirtMat;

      shirt.Sleeves.children[0].material = shirtMat;

      shirt.Front.children[0].material = shirtMat;
      shirt.Front.children[1].material = buttonMat;

      shirt.CollarClassic.children[0].material = shirtMat;

      shirt.CollarCut.children[0].material = shirtMat;
      shirt.CollarCut.visible = false;

      shirt.CollarButton.children[0].material = shirtMat;
      shirt.CollarButton.children[1].material = buttonMat;
      shirt.CollarButton.visible = false;

        ... etc