I'm facing an issue with my three.js project where I am unable to remove 4 meshes from the scene when clicking on them. Changing the geometry material works fine, but removing them doesn't seem to be working. Below is the raycasting code that I'm using:
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onMouseClick( event ) {
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects([a, b, c, d]);
for ( var i = 0; i < intersects.length; i++ ) {
if (intersects[ i ].object.geometry.type == "PlaneGeometry") {
intersects[ i ].object.parent.remove(intersects[ i ].object);
}
}
}