Three.js Visible Property vs Removing an Object

In Three.js, managing whether an object is displayed in your 3D scene is crucial for both performance and user experience. This article explains the fundamental differences between hiding an object using its visible property and completely removing it from the scene graph using the remove() method. By understanding how each approach affects rendering, memory, and CPU overhead, you can optimize your WebGL applications more effectively.

The visible Property

Every 3D object in Three.js inherits from the Object3D class, which includes a boolean property called visible. By default, this is set to true.

// Hiding an object
myMesh.visible = false;

// Showing the object again
myMesh.visible = true;

How it Works

When you set object.visible = false, Three.js simply skips rendering this object during the render loop. However, the object remains fully intact within the scene graph hierarchy.

• Memory: The object, along with its geometry, materials, and textures, stays allocated in both CPU and GPU memory.
• CPU Overhead: The CPU still processes the object’s local and world matrices (position, rotation, scale updates) during the scene graph update phase, even though it won’t be drawn.
• Raycasting: By default, Three.js raycasting ignores invisible objects, meaning users cannot click or interact with them.

Best Use Cases

Use the visible property when you need to toggle an object’s presence frequently (e.g., showing/hiding a menu, toggling UI elements, or flashing a laser beam). Because the object is never unloaded, toggling visibility is instantaneous and causes zero performance stutter.

Removing an Object (scene.remove())

To completely detach an object from the scene, you call the .remove() method on its parent node (which is often the scene itself).

// Removing an object from the scene
scene.remove(myMesh);

How it Works

Calling scene.remove(object) detaches the object from the active scene hierarchy.

• Memory: Removing an object from the scene does not automatically delete it from memory. The CPU memory is only freed once there are no JavaScript references left to the object (allowing garbage collection). GPU memory for geometries and materials must be manually freed using .dispose().
• CPU Overhead: The CPU completely stops calculating matrices and transformations for this object because it is no longer part of the scene graph.
• Raycasting: Because the object is no longer in the scene, it cannot be detected by raycasting.

Best Use Cases

Use scene.remove() when an object is no longer needed for a long period or permanently (e.g., destroying an enemy in a game, transitioning to a completely different level, or clearing a workspace).

Key Differences Summary

To keep your Three.js applications running smoothly, use visible = false for rapid toggling of objects, and reserve scene.remove() (combined with .dispose() for materials and geometries) for permanent cleanup.