Three.js guides
Scenes, materials, cameras and React Three Fiber composition.
- Blender Workflow and Bakingblender to three.js, baking lightmaps, baked texture, bake render into texture, gltf export settings, glb export blender
- Code Structuring for Bigger Three.js Projectsstructuring bigger three.js projects, three.js architecture, experience class, experience singleton, singleton pattern three.js, how do I organize three.js code
- Custom Shading and Lights in Shaderscustom shader lighting, lights in shaders, shader light model, phong shading glsl, ambient light shader, directional light shader
- Debug UI and Deploymentlil-gui, dat.GUI, debug panel, tweak panel, GUI controls, how do I add a slider to tweak a value
- Drei Catalogdrei, react-three-drei, drei helpers, r3f helpers, CameraControls, ScrollControls
- Environment Maps and Realistic Renderenvironment map, envMap, scene.environment, scene.background, cube texture, CubeTextureLoader
- Lights and Shadowslights, shadows, AmbientLight, DirectionalLight, HemisphereLight, PointLight
- Loading and HTML Integrationloading manager, LoadingManager progress, loading screen three.js, loader bar, progress bar webgl, intro fade
- MaterialsMeshBasicMaterial, MeshNormalMaterial, MeshMatcapMaterial, MeshDepthMaterial, MeshLambertMaterial, MeshPhongMaterial
- Models and 3D TextTextGeometry, 3d text, typeface font, FontLoader, convert font to typeface json, center text geometry
- Particlesparticles, Points, PointsMaterial, THREE.Points, particle system, stars
- Performanceperformance, performance tips, fps drops, my three.js scene is slow, how do I make three.js faster, stats.js fps meter
- Physicsphysics engine, cannon-es, cannon.js, rapier, ammo.js, @react-three/rapier
- Post-Processingpost processing three.js, effectcomposer, render pass, shaderpass, custom pass shader, tDiffuse uniform
- Postprocessing Library Referencepmndrs postprocessing, postprocessing npm package, react-three postprocessing api, effectpass merging, effect catalog, selective bloom
- R3F API Referencer3f api, canvas props, frameloop, frameloop demand, on demand rendering, invalidate
- R3F Interaction, Portfolio Patterns, and Gamesr3f pointer events, onClick mesh, onPointerEnter onPointerLeave, click through object, stopPropagation raycaster, cursor pointer on hover 3d
- R3F Staging, Models, and Scene Portingdrei Environment, environment map r3f, HDRI in react three fiber, Environment preset, Lightformer, Stage helper
- Rapier Physics Referencerapier api reference, react three rapier props, Physics component props, timeStep vary, paused physics, physics interpolation
- React Three Fiber Fundamentalsr3f, react three fiber, fiber, declarative three.js, jsx scene graph, Canvas component
- Scroll and Mouse Interactionscroll based animation, scroll synced camera, three.js background of html page, transparent canvas, alpha renderer, parallax effect
- Shader Effects Recipesshader effects, custom shader material, ShaderMaterial recipes, raging sea, animated water shader, ocean waves
- Shader Particles and GPGPUshader particles, custom particles ShaderMaterial, Points custom shader, gl_PointSize, size attenuation formula, gl_PointCoord
- Shaders Fundamentalsglsl basics, custom shader, ShaderMaterial, RawShaderMaterial, vertex shader, fragment shader
- Texturestexture loading, TextureLoader, LoadingManager, PBR textures, albedo map, color map
- Three.js Fundamentalswhat is webgl, why use three.js, three.js setup, scene camera renderer, first three.js scene, black screen nothing renders
- Three.js Official Manual, Distilledthree.js installation, three addons import, three/addons/, importmap three.js, OrbitControls import, GLTFLoader import
- WebGPU and TSLWebGPURenderer, webgpu renderer setup, three webgpu, TSL, three shading language, node material