Ultimate Three.js + immersive 3D web experience skill. Use this skill for ANY request involving Three.js or 3D on the web — scenes, animations, shaders, particles, GLTF models, post-processing, scroll-driven experiences, interactive 3D UIs, procedural geometry, or full immersive 3D web apps. Trigger keywords: "three.js", "3D scene", "WebGL", "GLSL", "shader", "3D animation", "particle system", "GLTF", "GLB", "3D background", "immersive web", "3D portfolio", "3D hero section", "scroll animation 3D", "anti-gravity effect", "floating 3D objects", "3D landing page", "WebGL effect", "three fiber", "R3F". Always consult this skill before writing any Three.js code — even for simple requests.
Merged from cloudai-x/threejs-skills (10 modules) + sickn33/antigravity-awesome-skills (3d-web-experience).
| User asks for… | Load these references |
|---|---|
| Basic scene / "just show something 3D" | fundamentals.md |
| Custom shapes, procedural geometry | geometry-materials.md |
| Lighting, shadows, PBR textures | lighting-textures.md |
Loading .glb / .gltf models, animations |
animation-loaders.md |
| Custom shaders, GLSL, visual effects | shaders-postprocessing.md |
| Click, hover, drag, camera controls | interaction-controls.md |
| Scroll-driven, particles, floating, parallax, landing page | 3d-web-experience.md |
| Performance issues, memory leaks, weird bugs | performance-pitfalls.md |
| Full immersive experience | Load all references |
<script type="importmap">
{ "imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
}}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
</script>
<!-- r128 is the version available on cdnjs.cloudflare.com -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script type="module">
import { OrbitControls } from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
</script>
⚠️ On r128: never use
THREE.CapsuleGeometry(added r142). Use CylinderGeometry + SphereGeometry instead.
npm install three @react-three/fiber @react-three/drei
→ See references/interaction-controls.md for R3F patterns.
Every Three.js project starts here. Adapt as needed.
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// --- Core ---
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); // never above 2
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;
renderer.outputColorSpace = THREE.SRGBColorSpace; // r152+ (was outputEncoding)
document.body.appendChild(renderer.domElement);
camera.position.set(0, 1.5, 5);
// --- Controls ---
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// --- Resize ---
window.addEventListener('resize', () => {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
});
// --- Loop ---
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta(); // use for mixer.update(delta)
const elapsed = clock.getElapsedTime(); // use for uniforms.uTime.value
controls.update();
renderer.render(scene, camera);
}
animate();
These apply to every Three.js project, no exceptions:
Math.min(devicePixelRatio, 2)outputColorSpace = THREE.SRGBColorSpace — outputEncoding is deprecated since r152controls.update() inside the animation loop when enableDamping = truecolorSpace = THREE.SRGBColorSpace on albedo/emissive textures; leave linear for normal/roughness/metalness mapscastShadow and receiveShadow on both the light AND the meshrenderer.domElement z-index for overlay UIsneedsUpdate = true after modifying geometry attributes or material uniforms liveWhich material?
MeshBasicMaterialMeshStandardMaterial (PBR)MeshPhysicalMaterialShaderMaterialPointsMaterialWhich camera?
PerspectiveCamera(75, aspect, 0.1, 1000)OrthographicCameraWhich light setup?
AmbientLight(0xffffff, 0.5) + DirectionalLight(0xffffff, 1)RGBELoader HDRI as scene.environmentPointLight + HemisphereLight with no ambientRead these when working in the relevant domain. Each is self-contained.
| File | Contents |
|---|---|
references/fundamentals.md | Scene, camera types, Object3D hierarchy, coordinate system, helpers |
references/geometry-materials.md | All built-in geometries, BufferGeometry, instancing, all material types |
references/lighting-textures.md | All light types, shadows, IBL/HDRI, texture loading, PBR maps, render targets |
references/animation-loaders.md | AnimationMixer, keyframe tracks, morph targets, GLTF/Draco/KTX2 loading |
references/shaders-postprocessing.md | ShaderMaterial, GLSL patterns, noise, EffectComposer, bloom, custom passes |
references/interaction-controls.md | Raycasting, OrbitControls, DragControls, R3F quick reference |
references/3d-web-experience.md | Scroll-driven animation, particles, anti-gravity floating, mouse parallax, immersive backgrounds |
references/performance-pitfalls.md | Optimization checklist, dispose patterns, LOD, common bugs table |