Search code examples
three.jsvisibility

Toggle visibility of the meshes from the scene in Three.js

I have faced with an issue. when I set the cubes' visible property to false. It is hiding the mesh from the user, but it is actual place is staying there and preventing from clicking the another mesh that is behind.

enter image description here

I want to hide the cube and make the circle mesh hoverable and clickable.

I have tried mesh.visible property of the mesh, it is hiding the mesh, but the actual place stays there and preventing to click another meshes behind of it.

Solution

  • You forgot to tell us how you handle clicking. If you are casting a ray using THREE.Raycaster, then yes it will indeed hit also invisible objects.

    The simplest option would be to manually filter out from the raycast result those hits that are not visible.

    Alternatively, you can look into Raycaster.layers, which lets you raycast only a subset of the scene.