Build 3D web apps with Three.js (WebGL/WebGPU). Use for 3D scenes, animations, custom shaders, PBR materials, VR/XR experiences, games, data visualizations, product configurators.
Build high-performance 3D web applications using Three.js - a cross-browser WebGL/WebGPU library.
Use when working with:
references/00-fundamentals.md - Fundamentalsreferences/01-getting-started.md - Scene setup, basic geometries, materials, lights, rendering loopreferences/02-loaders.md - GLTF, FBX, OBJ, texture loadersreferences/03-textures.md - Types, mapping, wrapping, filteringreferences/04-cameras.md - Perspective, orthographic, controlsreferences/05-lights.md - Types, shadows, helpersreferences/06-animations.md - Clips, mixer, keyframesreferences/07-math.md - Vectors, matrices, quaternions, curvesreferences/18-geometry.md - Built-in shapes, BufferGeometry, custom geometry, instancingreferences/11-materials.md - PBR, basic, phong, lambert, physical, toon, normal, depth, raw, shader materials, material propertiesreferences/08-interaction.md - Raycasting, picking, transformsreferences/09-postprocessing.md - Passes, bloom, SSAO, SSRreferences/10-controls.md - Orbit, transform, first-personreferences/11-materials-advanced.md - PBR, custom shadersreferences/12-performance.md - Instancing, LOD, batching, cullingreferences/13-node-materials.md - Shader graphs, computereferences/14-physics-vr.md - Ammo, Rapier, Jolt, VR/XRreferences/15-specialized-loaders.md - SVG, VRML, domain-specificreferences/16-webgpu.md - Modern backend, compute shadersreferences/17-shader.md - GLSL, ShaderMaterial, uniforms, custom effects// 1. Scene, Camera, Renderer
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);
// 2. Add Objects
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 3. Add Lights
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));
// 4. Animation Loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();