I have been attempting to delete a specific part/mesh ('olympiaPart2' as an example) from this Object3D:
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
I've tried different methods but nothing seems to work so far :
scene.remove( circle3D.children[0].getObjectByName('olympiaPart2') )
and
const removePart = circle3D.getObjectByName('olympiaPart2')
scene.remove(removePart)
Despite no errors being returned and even after checking my scene or object3D with console.log, there is no change in the displayed result.
This is how I created my object3D:
// Circle
const circle3D = new THREE.Object3D
circle3D.name = 'circle3D'
scene.add(circle3D)
const importModel = (_model) => {
// Using 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 for better control
for(let i=0; i<gltf.scene.children.length; i++) {
gltf.scene.children[i].name = `olympiaPart${i}`
}
// Add to circle3D object
circle3D.add(gltf.scene)
}
)
}
// 'olympia' is the imported gltf model using webpack
importModel(olympia)
//
The desired outcome is to make certain parts/meshes of my object3D disappear after a specific delay/event such as timeout or click. I suspect that my issue might be related to updating either the object or the scene, and despite trying various options, I haven't had any success.
Just in case, here's my loop function:
loop() {
window.requestAnimationFrame(loop)
// Renderer & Update
// Render already manages other animations like rotations & easing for other objects
update()
renderer.render(scene, camera)
}