three-js_skill

Overview

This skill provides a complete, practical reference for building vanilla Three.js (imperative JavaScript) 3D web scenes. It focuses on scene setup, geometry, materials, loaders, animation, controls, shaders, post-processing, performance, WebGPU, physics, and XR integration. Use this skill when you need clear, executable guidance for Three.js r150+ patterns and APIs.

How this skill works

The skill inspects your goal and returns targeted Three.js guidance, code snippets, and patterns for vanilla JavaScript—no React wrappers. It covers renderer and camera configuration, object lifecycle and disposal, loaders (GLTF, HDR, Draco/KTX2), controls (OrbitControls), animation loops, raycasting, custom GLSL shaders, EffectComposer post-processing, WebGPU notes, and performance optimizations. Answers prioritize working examples, resize/cleanup best practices, and when-to-use recommendations.

When to use it

• Create a 3D scene, add meshes, lights, cameras, and basic animation.
• Load GLTF/FBX models, apply PBR materials, or implement DRACO/KTX2 compression.
• Add OrbitControls, raycasting-based interaction, or pointer drag/pick logic.
• Write custom GLSL ShaderMaterial or use node/TSL materials.
• Implement post-processing (bloom, DOF, SSAO) with EffectComposer.
• Optimize performance: LOD, instancing, batching, culling, texture streaming, or migrate to WebGPU.

Best practices

• Use devicePixelRatio clamping and resize handlers to balance quality and performance.
• Dispose geometries, textures, and materials by traversing Object3D to avoid memory leaks.
• Use BufferGeometry and InstancedMesh for large numbers of objects instead of many Meshes.
• Animate with THREE.Clock and use delta time for frame-rate independent motion.
• Prefer compressed textures (KTX2) and DRACO for model size reduction.
• Profile with the browser devtools and disable expensive features (shadows, post-processing) on low-end devices.

Example use cases

• Set up a lit environment with HDR environment map, PBR materials, and shadows.
• Load a GLTF character, hook up a mixer for skeletal animation, and blend clips.
• Add OrbitControls, implement raycast-based selection, and highlight chosen meshes.
• Create a bloom post-processing pass with EffectComposer and selective render targets.
• Write a simple fragment+vertex GLSL ShaderMaterial for a water or fire effect.
• Migrate a renderer to WebGPU for compute or advanced performance scenarios (r150+).