Three.js Skills for Claude Code

Use the following table to choose the appropriate light type based on your scene requirements and performance budget:

*RectAreaLight shadows require custom solutions.

The Three.js animation system consists of three core components:

1. AnimationClip: A container that holds keyframe data.
2. AnimationMixer: The engine that plays animations on a specific root object and its descendants.
3. AnimationAction: The controller used to manage the playback (play, stop, loop, etc.) of a specific AnimationClip via the mixer.

For advanced lighting implementations, consider using these related skills:

• threejs-materials: Manage how materials respond to light.
• threejs-textures: Work with lightmaps and environment maps.
• threejs-postprocessing: Implement bloom and other light-based visual effects.

To load compressed GLTF models, use DRACOLoader in conjunction with GLTFLoader. You must provide a path to the Draco decoder files using setDecoderPath().

import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath(
  "https://www.gstatic.com/draco/versioned/decoders/1.5.6/",
);
dracoLoader.preload();

const gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);

gltfLoader.load("compressed-model.glb", (gltf) => {
  scene.add(gltf.scene);
});

To use the output of a render as a texture on a material, create a WebGLRenderTarget, set the renderer's target to it, render the scene, and then reset the target to null.

// Create render target
const renderTarget = new THREE.WebGLRenderTarget(512, 512);

// Render scene to target
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);
renderer.setRenderTarget(null);

// Use texture
const texture = renderTarget.texture;
otherMaterial.map = texture;

Additive blending allows you to layer animations (like a 'breathing' effect) on top of a base pose. Use THREE.AnimationUtils.makeClipAdditive(clip) to convert a clip to additive mode, and set the action's blendMode to THREE.AdditiveAnimationBlendMode.

// Convert clip to additive
THREE.AnimationUtils.makeClipAdditive(additiveClip);

// Apply as additive layer
const additiveAction = mixer.clipAction(additiveClip);
additiveAction.blendMode = THREE.AdditiveAnimationBlendMode;
additiveAction.play();

To load a basic image texture and apply it to a material, use THREE.TextureLoader and assign the resulting texture to a material property like map.

import * as THREE from "three";

// Load texture
const loader = new THREE.TextureLoader();
const texture = loader.load("texture.jpg");

// Apply to material
const material = new THREE.MeshStandardMaterial({
  map: texture,
});

Post-processing can be GPU-intensive. Use these strategies to maintain performance:

• Limit passes: Each pass requires a full-screen render.
• Lower resolution: Use smaller render targets for expensive passes like blur.
• Toggle effects: Use the .enabled property to disable unused passes.
• Choose efficient AA: Use FXAA instead of MSAA for lower cost.
• Device-specific logic: Disable expensive effects on mobile devices.

// Disable pass
bloomPass.enabled = false;

// Reduce bloom resolution
const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth / 2, window.innerHeight / 2),
  strength,
  radius,
  threshold,
);

// Only apply effects in high-performance scenarios
const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
if (!isMobile) {
  composer.addPass(expensivePass);
}

You can inject standard Three.js shader logic (like common functions or packing utilities) into your custom GLSL code using ShaderChunk. This allows you to use built-in utilities like perspectiveDepthToViewZ without manually defining them.

import { ShaderChunk } from "three";

const fragmentShader = `
  ${ShaderChunk.common}
  ${ShaderChunk.packing}

  uniform sampler2D depthTexture;
  varying vec2 vUv;

  void main() {
    float depth = texture2D(depthTexture, vUv).r;
    float linearDepth = perspectiveDepthToViewZ(depth, 0.1, 1000.0);
    gl_FragColor = vec4(vec3(-linearDepth / 100.0), 1.0);
  }
`;