如何从场景中删除 object3D 的网格？

Question

我正在尝试删除此 object3D 的某些部分/网格（例如“olympiaPart2”）：

Object3D {uuid: "78E3A86E-3AF3-4C0F-8805-DE8531F3D512", name: "circle3D", type: "Object3D", parent: Scene, children: Array(1), …}
    castShadow: false
    children: Array(1)
        0: Scene
        autoUpdate: true
        background: null
        castShadow: false
        children: Array(8)
            0: Mesh {uuid: "812FC68F-1421-4C9F-92A9-68D969E955F3", name: "olympiaPart0", type: "Mesh", parent: Scene, children: Array(2), …}
            1: Mesh {uuid: "DF3A40D8-5449-4480-88C3-DDBC2EC5FDAB", name: "olympiaPart1", type: "Mesh", parent: Scene, children: Array(2), …}
-->         2: Mesh {uuid: "80C9467C-95E8-460D-844F-57F37673F745", name: "olympiaPart2", type: "Mesh", parent: Scene, children: Array(2), …}
            3: Mesh {uuid: "12C8660E-80B3-4FBC-BC0B-C72C8AAD8355", name: "olympiaPart3", type: "Mesh", parent: Scene, children: Array(2), …}
            4: Mesh {uuid: "1851A94E-5D8F-4A87-B66C-E1B2C7706B36", name: "olympiaPart4", type: "Mesh", parent: Scene, children: Array(2), …}
            5: Mesh {uuid: "BA629A09-AB2E-499F-AAE0-17A3FB2B18C1", name: "olympiaPart5", type: "Mesh", parent: Scene, children: Array(2), …}
            6: Mesh {uuid: "8D014976-92A5-4290-A876-77F27375EFD8", name: "olympiaPart6", type: "Mesh", parent: Scene, children: Array(2), …}
            7: Mesh {uuid: "3B656568-0C4C-4C69-AE80-7A76E29C496E", name: "olympiaPart7", type: "Mesh", parent: Scene, children: Array(2), …}
            length: 8

我不确定如何继续，但我已经尝试过：

scene.remove( circle3D.children[0].getObjectByName('olympiaPart2') )

和

const removePart = circle3D.getObjectByName('olympiaPart2')
scene.remove(removePart)

即使我 console.log 我的场景或 object3D 也没有任何改变。 没有返回错误，屏幕上没有任何变化。

这就是我的 object3D 的创建方式：

// Circle
const circle3D = new THREE.Object3D
circle3D.name = 'circle3D'
scene.add(circle3D)

const importModel = (_model) => {
    // I use gltf-loader from : www.npmjs.com/package/three-gltf-loader
    let modelLoader = new GLTFLoader()

    modelLoader.load(
        _model,
        ( gltf ) => {
            gltf.scene.rotation.x = 270 * Math.PI / 180

            // Name each mesh to control them
            for(let i=0; i<gltf.scene.children.length; i++) {
                gltf.scene.children[i].name = `olympiaPart${i}`
            }

            // Append to circle3D object
            circle3D.add(gltf.scene)
        }
    )
}

// olympia is the gltf model I import with webpack
importModel(olympia)
//

预期的结果是我的 object3D 的某些部分/网格在超时或单击等特定延迟/事件后消失。 我知道我的问题必须有一些关于更新对象或场景的链接，但老实说，我觉得我已经尝试了我能想象到的所有选项。

这是我的循环函数以防万一：

loop() {
    window.requestAnimationFrame(loop)

    // Renderer & Update
    // Render is handling other animations already implemented (rotations & easing for others objects)
    update()
    renderer.render(scene, camera)
}

Answer 1

您必须从其父级中删除网格，而不是从scene 本身。试试这个：

const removePart = circle3D.getObjectByName('olympiaPart2');
const parent = removePart.parent;
parent.remove( removePart );

three.js R107