threejs-skills

Systematically create high-quality 3D scenes and interactive experiences using Three.js best practices. Always use the correct CDN version (r128): CRITICAL : Do NOT use example imports like THREE.OrbitControls - they won't work on the CDN. Every Three.js artifact needs these core components: Use requestAnimationFrame for smooth rendering: Start by identifying: Choose appropriate geometry types: Basic Shapes: IMPORTANT : Do NOT use CapsuleGeometry (introduced in r142, not available in r128) Alternatives for capsules: Choose materials based on visual needs: Common Materials: If using lit materials (Standard, Phong, Lambert), add lights: Skip lighting if using MeshBasicMaterial - it's unlit by design. Always add window resize handling: Since THREE.OrbitControls isn't available on CDN, implement custom controls: Detect mouse clicks and hovers on 3D objects: User: "Create an interactive 3D sphere that responds to mouse movement" Black screen / Nothing renders: Poor performance: Objects not visible: Shadows: Environment Maps & Reflections: Tone Mapping & Output Encoding: Fog for Depth: While advanced post-processing may not be available in r128 CDN, basic effects can be achieved with shaders and render targets. Three.js artifacts require systematic setup: Follow these patterns for reliable, performant 3D experiences. While this skill focuses on CDN-based Three.js (r128) for artifact...