In 3D graphics, instancing and managing GPU memory is critical. Mismanaging Bone can lead to an excess of draw calls or memory leaks, severely dropping the frames per second (FPS).

Examples

Example 01Basic Usage

const bone = new THREE.Bone();

Real-world Use Cases

Interactive 3D Environments

import * as THREE from 'three';

const scene = new THREE.Scene();
// Using Bone in a scene setup
const instance = new Bone();
scene.add(instance);

Common Mistakes

X Re-instantiating Geometries, Materials or Bone inside the render loop.

✓ Always instantiate objects outside the render loop and reuse them or update their properties dynamically.

// Bad
function animate() {
    const item = new Bone(); // Memory leak!
    requestAnimationFrame(animate);
}

// Good
const item = new Bone();
function animate() {
    item.rotation.y += 0.01;
    requestAnimationFrame(animate);
}

When NOT to use it

Scenario

When standard 2D Canvas or simple DOM elements suffice.

Alternative

Three.js and WebGL bring significant overhead. Don't use them for basic UI elements or static 2D images.

Differences

Function	Difference
Raw WebGL	Writing raw WebGL requires hundreds of lines of boilerplate just to draw a triangle. Bone abstracts the underlying matrix math and buffer handling into a friendly API.

Best Practices

Consult the official Three.js documentation for deeper understanding.
Be mindful of performance when creating many objects or geometries.

Interview Question

How do you optimize a scene that heavily relies on Bone?▼

Hint: Think about InstancedMesh, merged geometries, and reducing draw calls.

You should aim to minimize draw calls by merging geometries if they share the same material, using InstancedMesh for identical objects, and properly calling .dispose() on materials/geometries when they are no longer needed to free GPU memory.

Exercises

HardCreate a scene utilizing Bone while keeping the FPS above 60.

View Solution

const instance = new Bone();
// Proper disposal logic
window.addEventListener('unload', () => {
    instance.dispose();
});

Related Functions

THREE.SceneTHREE.WebGLRendererTHREE.PerspectiveCameraTHREE.Mesh