pn-threejs-core

Three.js core skill

When to use

• Structuring or refactoring a Three.js scene
• Adding or configuring cameras, lights, or materials
• Loading and managing assets (GLTF, textures, Draco, KTX2)
• Implementing or tuning animations
• Integrating physics (Rapier, Cannon-es)
• Optimizing draw calls, LOD, or culling
• Migrating to WebGPU (Three.js r171+)
• Using React Three Fiber (R3F) or Drei

Scene structure

1. Hierarchy: Group objects logically (e.g. scene.add(group)) with clear names. Use groups for: environment, characters, UI overlays, effects. Ensures correct transforms and makes dispose/visibility easier.
2. Naming: Use consistent prefixes or suffixes (e.g. env_ground, char_player, fx_particles) so objects can be found and disposed correctly.
3. Disposal: When removing meshes or switching scenes, dispose of geometries, materials, and textures. Reuse where it avoids repeated allocation (e.g. instanced meshes, shared materials). Call dispose() on resources before removing references.

Camera management

• Orbit: Use OrbitControls for editor-style or exploration cameras. Set enableDamping, dampingFactor, and minDistance/maxDistance for smooth feel.
• Follow: For third-person games, interpolate camera position toward a target (lerp or smooth damp). Keep camera behind and above the player; handle wall clipping.
• Cinematic: Use keyframe-based paths or splines for cutscenes. Separate camera logic from gameplay camera.

Lighting

• Baked vs realtime: Prefer baked lighting (lightmaps) for static scenes when possible. Use realtime lights sparingly; limit count for mobile.
• Light probes: Use LightProbe or ReflectionProbe for ambient/reflection when available. Reduces per-object setup.
• Shadows: Limit shadow-casting lights; use castShadow/receiveShadow only where needed. Tune shadowMapSize, bias, and radius to avoid artifacts.

Asset loading

• GLTF/GLB: Use GLTFLoader; prefer GLB for single-file. Use Draco compression (DRACOLoader) for large meshes.
• Textures: Use KTX2 (KTX2Loader) for compressed textures when supported. Set colorSpace (e.g. SRGBColorSpace) and flipY correctly.
• Loading managers: Use LoadingManager for progress UI. Centralize loaders to avoid duplicate fetches.
• Caching: Reuse loaded assets across instances; avoid loading the same model multiple times.