Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.

Three.js Fundamentals Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer. Quick Start Without a bundler, the browser loads three.js as ES modules through an import map; this is the map for the WebGLRenderer examples above: For WebGPURenderer work, map all four keys — three.tsl.js imports three/webgpu , so the map fails without that entry: Scene scene.background also accepts a CubeTexture , or a Texture whose mapping is THREE.EquirectangularReflectionMapping ; a plain unmapped texture is drawn as a flat screen filling quad, not a skybox. scene.environment lights MeshStandardMaterial and MeshPhysicalMaterial on both renderers, and MeshLambertMaterial and MeshPhongMaterial on WebGLRenderer only. scene.environmentIntensity scales it — material.envMapIntensity scales only material.envMap . See threejs loaders for HDR environments. Cameras PerspectiveCamera OrthographicCamera ArrayCamera CubeCamera With WebGPURenderer, build the target with CubeRenderTarget from three/webgpu instead of WebGLCubeRenderTarget . WebGLRenderer Objects Object3D Base class of Mesh, Group, Light and Camera. Group and Mesh Coordinate System Right handed, +Y up: +X right, +Y up, +Z toward the viewer. A camera at the origin with no rotation looks down −Z. Math Utilities Vector3 Matrix4, Quaternion, Euler Color MathUtils Loading Manager Cleanup Object3D.dispose() releases per object renderer state (WebGPURenderer bindings, WebGLRenderer instanced mesh buffers); it does not visit children or free geometry, material or textures. To tear down a subtree, traverse it and dispose each mesh as above. A custom Object3D subclass that overrides dispose() calls super.dispose() . timer.dispose() disconnects a connected timer. Performance Frustum culling tests a bounding sphere, not the bounding box: geometry.boundingSphere for a plain mesh, the object's own boundingSphere for InstancedMesh, SkinnedMesh and BatchedMesh. Both are computed once, so after editing positions call geometry.computeBoundingSphere() , and after moving instances or bones far from where they started call object.computeBoundingSphere() , or visible objects get culled. Merge static geometry that shares a material into one mesh, and use InstancedMesh for many copies of one object (threejs geometry). Switch meshes by distance with LOD ; the renderer calls update(camera) for you each frame. On WebGLRenderer, renderer.info.render.calls counts the draw calls of the last render() call (with several passes per frame, set renderer.info.autoReset = false and call renderer.info.reset() once per frame), and renderer.info.memory the live geometries and textures; check them after merging meshes or disposing objects. WebGPU and TSL renderer.render() throws until await renderer.init() has completed. setAnimationLoop would run the init too, but await init() right after construction, before setup code touches the renderer: the WebGL 2 fallback replaces renderer.backend during init() . WebGPURenderer falls back to WebGL 2 by itself when WebGPU is unavailable; new THREE.WebGPURenderer({ forceWebGL: true }) forces the fallback, and after await renderer.init() , renderer.backend.isWebGPUBackend reports which backend runs. Node materials and TSL target WebGPURenderer (either backend). WebGLRenderer renders them only through the WebGLNodesHandler addon ( three/addons/tsl/WebGLNodesHandler.js , passed to renderer.setNodesHandler() ), a migration aid without VSM shadows, MRT, transmission or the WebGPU post processing stack. ShaderMaterial and onBeforeCompile are WebGLRenderer only. Custom shading starts in threejs shaders. Built in materials such as MeshStandardMaterial are converted to their node versions automatically; use the NodeMaterial classes when you set node slots. There is no renderer.capabilities object here: anisotropy comes from renderer.getMaxAnisotropy() . GPU readback stays asynchronous: await renderer.getArrayBufferAsync(attribute) . Common Mistakes renderer.shadowMap.type = THREE.PCFSoftShadowMap → renderer.shadowMap.type = THREE.PCFShadowMap : deprecated in r182; both renderers now warn and fall back to PCFShadowMap, which is already soft. const clock = new THREE.Clock() → const timer = new THREE.Timer(); timer.connect(document); : Clock is deprecated in r183 and warns on construction; call timer.update() once per frame before timer.getDelta() or timer.getElapsed() . requestAnimationFrame(animate) → renderer.setAnimationLoop(animate) : both renderers' docs advise it over a manual loop, WebXR frames run only through it, and on WebGPURenderer render() throws before the async init that setAnimationLoop performs. subCamera.viewport = new THREE.Vector4(0, 0, 0.5, 0.5) → subCamera.viewport = new THREE.Vector4(x dpr, y dpr, width dpr, height dpr) : ArrayCamera viewports are drawing buffer pixels under WebGLRenderer (WebGPURenderer scales CSS pixels by the pixel ratio itself), so fractions draw nothing. cubeCamera.update(renderer, scene) → mesh.visible = false; cubeCamera.update(renderer, scene); mesh.visible = true; : a visible reflective mesh is rendered into the very cube map its material samples. scene.background = texture → texture.mapping = THREE.EquirectangularReflectionMapping; scene.background = texture : without an equirect or cube mapping the texture draws as a flat screen filling quad, not a skybox. import { mergeGeometries } from "three/examples/jsm/utils/BufferGeometryUtils.js" → import as BufferGeometryUtils from "three/addons/utils/BufferGeometryUtils.js" : the three/examples/jsm/ specifier does not resolve under the standard import map, which maps three/addons/ instead. <script src="three.min.js" </script → <script type="module" import as THREE from "three";</script : build/three.js and build/three.min.js were removed in r161, so in the browser three.js loads as an ES module behind an import map. mesh.layers.set(1) → mesh.layers.enable(1) : set replaces the layer mask and takes the mesh off layer 0, where the default camera and lights live. renderer.outputEncoding = THREE.sRGBEncoding → renderer.outputColorSpace = THREE.SRGBColorSpace : the encoding API no longer exists, and the color space property already defaults to SRGBColorSpace , so the assignment is usually unnecessary. renderer.physicallyCorrectLights = true → const bulb = new THREE.PointLight(0xffffff, 100) : physically based light units are always on and the physicallyCorrectLights and useLegacyLights switches no longer exist, so delete the line and give point and spot lights candela intensities that suit their distance (threejs lighting). material.envMapIntensity = 0.5 → scene.environmentIntensity = 0.5 : envMapIntensity scales only the material's own envMap , not scene.environment . mesh.dispose() → mesh.dispose(); mesh.geometry.dispose(); for (const value of Object.values(mesh.material)) if (value?.isTexture) value.dispose(); mesh.material.dispose(); : the object level dispose frees only per object renderer state, never the geometry, material or textures, and material.dispose() leaves the textures alone too. import { WebGLCubeRenderTarget } from "three/webgpu" → import { CubeRenderTarget } from "three/webgpu" : three/webgpu does not export WebGLCubeRenderTarget, which does not work with WebGPURenderer; keep it for WebGLRenderer. await renderer.renderAsync(scene, camera) → await renderer.init(); renderer.render(scene, camera) : the async render methods are deprecated in r181; initialize once, then render synchronously in the loop. See Also threejs geometry — creating and editing BufferGeometry, instancing, merging, bounding volumes. threejs materials — choosing and configuring materials and their texture slots. threejs textures — loading textures, color spaces, UV channels. threejs lighting — light types, units, and shadow configuration. threejs animation — the AnimationMixer and clip system for keyframed motion. threejs interaction — raycasting, pointer events, and camera controls. threejs loaders — glTF and other file loaders, async loading patterns. threejs shaders — ShaderMaterial and GLSL on WebGLRenderer, TSL node materials on WebGPURenderer. threejs postprocessing — EffectComposer passes and the WebGPU render pipeline. threejs performance — measuring frame cost and cutting draw calls, memory and fill rate. threejs react three fiber — the same scene graph written as React components.

threejs-fundamentals