threejs

Referencia completa de vanilla Three.js para 3D web. Cubre el ecosistema WebGL/WebGPU con fundamentos, asset loading, interacción, efectos, rendering avanzado y specialized features. Complementa la skill hermana r3f (React Three Fiber) — usá esta para vanilla JS, usá r3f para React.

Scope

Incluye: vanilla Three.js (WebGL + WebGPU), TSL (node-based shaders), post-processing, physics, VR/XR.

No incluye: React Three Fiber, drei. Para esos, usá la skill r3f.

Cuando se activa

Al trabajar con 3D web no-React:

Triggers
“three.js”, “threejs”
“webgl”, “webgpu”
“glTF”, “FBX loader”
“OrbitControls”, “raycasting”
“bloom”, “SSAO”, “SSR”, “post-processing”
“TSL shaders”, “node materials”
“PBR material”, “instancing”, “LOD”
“VR/XR”, “WebXR”

Estructura del skill

16 references organizados por categoría:

Fundamentals

  • 01-getting-started — Scene setup, basic geometries, render loop
  • 04-cameras — Perspective, orthographic, controls
  • 05-lights — Types, shadows, helpers
  • 07-math — Vectors, matrices, quaternions, curves

Assets & Content

  • 02-loaders — GLTF, FBX, OBJ, texture loaders
  • 03-textures — Types, mapping, wrapping, filtering
  • 06-animations — Clips, mixer, keyframes
  • 15-specialized-loaders — SVG, VRML, domain-specific

Interaction & Effects

  • 08-interaction — Raycasting, picking, transforms
  • 09-postprocessing — Passes, bloom, SSAO, SSR
  • 10-controls — Orbit, transform, first-person

Advanced Rendering

  • 11-materials-advanced — PBR, custom shaders
  • 12-performance — Instancing, LOD, batching, culling
  • 13-node-materials — Shader graphs, compute (TSL)

Specialized

  • 14-physics-vr — Ammo, Rapier, Jolt, VR/XR
  • 16-webgpu — Modern backend, compute shaders

Quick Start 

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(),
  new THREE.MeshStandardMaterial({ color: 0x00ff00 })
);
scene.add(cube);
scene.add(new THREE.DirectionalLight(0xffffff, 1));

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  renderer.render(scene, camera);
}
animate();