import * as THREE from "three";
const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();scene.background = new THREE.Color(0x111318);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 1.5, 5);
const cube = new THREE.Mesh(  new THREE.BoxGeometry(1, 1, 1),  new THREE.MeshStandardMaterial({ color: 0x3a86ff }),);scene.add(cube);const light = new THREE.DirectionalLight(0xffffff, 2);light.position.set(3, 4, 5); // shines from its position toward the originscene.add(light);scene.add(new THREE.AmbientLight(0xffffff, 0.4));
const timer = new THREE.Timer();timer.connect(document); // freezes the delta while the tab is hidden
function animate() {  timer.update(); // advance the timer first thing each frame  cube.rotation.y += timer.getDelta(); // seconds since the previous frame  renderer.render(scene, camera);}renderer.setAnimationLoop(animate);
window.addEventListener("resize", () => {  camera.aspect = window.innerWidth / window.innerHeight;  camera.updateProjectionMatrix();  renderer.setSize(window.innerWidth, window.innerHeight);});

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111318); // solid colorscene.fog = new THREE.Fog(0x111318, 1, 100); // linear fog: near, farscene.fog = new THREE.FogExp2(0x111318, 0.02); // exponential fog: density (pick one)

// PerspectiveCamera(fov in degrees, aspect, near, far)const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 5, 10);camera.lookAt(0, 0, 0); // rotates the camera to face the target
camera.fov = 60;camera.updateProjectionMatrix(); // required after changing fov, aspect, near or far

// OrthographicCamera(left, right, top, bottom, near, far); frustum size in world unitsconst aspect = window.innerWidth / window.innerHeight;const frustumHeight = 10;const camera = new THREE.OrthographicCamera(  (-frustumHeight * aspect) / 2,  (frustumHeight * aspect) / 2,  frustumHeight / 2,  -frustumHeight / 2,  0.1,  1000,);// on resize: recompute left and right from the new aspect, then call camera.updateProjectionMatrix()

// Renders the scene once per sub-camera, each into its own viewport.// Viewport units under WebGLRenderer are drawing-buffer pixels (CSS size × pixel ratio);// WebGPURenderer multiplies CSS pixels by the pixel ratio itself.const width = window.innerWidth;const height = window.innerHeight;const dpr = renderer.getPixelRatio();const cameras = [];for (let i = 0; i < 4; i++) {  const subCamera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);  subCamera.viewport = new THREE.Vector4(    ((i % 2) * width * dpr) / 2,    (Math.floor(i / 2) * height * dpr) / 2,    (width * dpr) / 2,    (height * dpr) / 2,  );  subCamera.position.set(-2 + (i % 2) * 4, 1.5, 6);  subCamera.lookAt(0, 0, 0);  subCamera.updateMatrixWorld(); // sub-cameras are not scene-graph children; update them when they move  cameras.push(subCamera);}const arrayCamera = new THREE.ArrayCamera(cameras);arrayCamera.position.set(0, 1.5, 6); // WebGLRenderer culls every viewport with this camera's frustum (fov 50, aspect 1 by default); WebGPURenderer uses each sub-camera's frustumrenderer.render(scene, arrayCamera);

const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256);const cubeCamera = new THREE.CubeCamera(0.1, 1000, cubeRenderTarget);scene.add(cubeCamera);
const chrome = new THREE.Mesh(  new THREE.SphereGeometry(1, 32, 16),  new THREE.MeshStandardMaterial({ color: 0xffffff, metalness: 1, roughness: 0 }),);chrome.material.envMap = cubeRenderTarget.texture;scene.add(chrome);
// every frame: hide the reflective mesh, or it is drawn into the map it sampleschrome.visible = false;cubeCamera.position.copy(chrome.position);cubeCamera.update(renderer, scene);chrome.visible = true;

const renderer = new THREE.WebGLRenderer({  canvas: document.querySelector("#canvas"), // reuse an existing canvas; omit to create one  antialias: true, // MSAA  alpha: true, // let the page background show through the canvas  stencil: true, // stencil is off by default; pass this for stencil techniques  powerPreference: "high-performance",  preserveDrawingBuffer: true, // keep the drawing buffer for readPixels / screenshots});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // cap the fill rate on high-DPI displaysrenderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping; // or AgXToneMapping, NeutralToneMapping; NoToneMapping is the defaultrenderer.toneMappingExposure = 1.0;// renderer.outputColorSpace is SRGBColorSpace by default; leave it alone
renderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFShadowMap; // the default, already soft; VSMShadowMap and BasicShadowMap are the alternatives
renderer.setClearColor(0x000000, 0); // clear alpha 0 keeps the alpha: true canvas transparentrenderer.render(scene, camera);

const obj = new THREE.Object3D();const child = new THREE.Object3D();
obj.position.set(1, 2, 3); // translationobj.rotation.set(0, Math.PI / 4, 0); // Euler angles in radians; kept in sync with quaternionobj.quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI / 4); // the same rotation as a quaternionobj.scale.set(1, 1, 1);
obj.getWorldPosition(new THREE.Vector3()); // world-space queries take a target vector to write intoobj.getWorldQuaternion(new THREE.Quaternion());obj.getWorldDirection(new THREE.Vector3()); // the +Z axis in world space; cameras return their view direction (−Z)
obj.add(child); // reparents child; also removes it from its previous parentobj.attach(child); // reparents and keeps child's world transform; add() keeps the local oneobj.remove(child);obj.visible = false; // hides the whole subtree
obj.layers.enable(1); // ADD layer 1; set(1) would replace the mask and leave layer 0obj.layers.disable(1);obj.layers.test(camera.layers); // true when the object shares a layer with the camera
obj.traverse((descendant) => {  if (descendant.isMesh) descendant.castShadow = true; // visits obj itself, then all descendants});
// matrix updates run automatically while matrixAutoUpdate is true (the default)obj.matrixAutoUpdate = false;obj.updateMatrix(); // composes obj.matrix and flags the world matrix dirty// when writing obj.matrix directly instead, flag the world matrix yourself:obj.matrixWorldNeedsUpdate = true;

const group = new THREE.Group(); // an Object3D that exists to hold childrenconst ball = new THREE.Mesh(new THREE.SphereGeometry(0.5), new THREE.MeshStandardMaterial());group.add(ball);group.rotation.y = Math.PI / 4; // transforms the whole subtreescene.add(group);

const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshStandardMaterial());scene.add(mesh);
// one material per geometry group; BoxGeometry has six (+x, −x, +y, −y, +z, −z)// a group whose materialIndex has no material is not drawnconst faceColors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff];const dice = new THREE.Mesh(  new THREE.BoxGeometry(1, 1, 1),  faceColors.map((color) => new THREE.MeshStandardMaterial({ color })),);
mesh.castShadow = true; // this object casts shadowsmesh.receiveShadow = true; // this object shows shadowsmesh.frustumCulled = true; // default: skipped when its bounding sphere leaves the camera frustummesh.renderOrder = 10; // renders later within the same transparency bucket

const axesHelper = new THREE.AxesHelper(5); // red X, green Y, blue Z; 5 = axis lengthscene.add(axesHelper);

const a = new THREE.Vector3(1, 0, 0);const b = new THREE.Vector3(0, 1, 0);const c = a.clone(); // new vector with the same values
a.copy(b); // a becomes ba.add(b); // in place: a = a + ba.sub(b);a.multiplyScalar(2);a.divideScalar(2);a.lerp(b, 0.5); // move halfway toward ba.normalize(); // unit lengtha.negate();a.cross(b); // cross product, written into a (right-hand rule)
const len = a.length();const lenSq = a.lengthSq(); // compare lengths without a square rootconst dist = a.distanceTo(b);const dot = a.dot(b); // > 0 same half-space, < 0 opposite, 0 perpendicularconst angle = a.angleTo(b); // radians
a.applyQuaternion(new THREE.Quaternion());a.applyMatrix4(new THREE.Matrix4());a.project(camera); // world position to normalized device coordinatesa.unproject(camera); // normalized device coordinates back to world

const m = new THREE.Matrix4();m.identity();m.makeTranslation(1, 2, 3);m.makeRotationY(Math.PI / 4);m.makeScale(2, 2, 2);
const position = new THREE.Vector3();const quaternion = new THREE.Quaternion();const scale = new THREE.Vector3(1, 1, 1);m.compose(position, quaternion, scale); // build from transform componentsm.decompose(position, quaternion, scale); // read them back
m.multiply(new THREE.Matrix4()); // m = m * other (other applied first)m.premultiply(new THREE.Matrix4()); // m = other * mm.invert();m.lookAt(new THREE.Vector3(0, 0, 1), new THREE.Vector3(), new THREE.Vector3(0, 1, 0)); // eye, target, up
const q = new THREE.Quaternion();q.setFromEuler(new THREE.Euler(0, Math.PI / 2, 0, "YXZ")); // Euler order matters, XYZ is the defaultq.setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI / 4);q.setFromRotationMatrix(m);q.slerp(new THREE.Quaternion(), 0.5); // spherical interpolation, written into qq.invert();

const color = new THREE.Color(0xff0000); // hex numberconst sky = new THREE.Color("#87ceeb"); // also color names and "rgb(255, 0, 0)"
color.setHex(0x0000ff);color.setRGB(1, 0.5, 0); // 0–1 in the linear working color space; hex and CSS strings are sRGBcolor.setRGB(1, 128 / 255, 0, THREE.SRGBColorSpace); // sRGB components, the same color as 0xff8000color.setHSL(0.5, 1, 0.5); // hue, saturation, lightness in 0–1, also linear unless a color space is passedcolor.lerp(sky, 0.5); // interpolate toward the target, written into colorcolor.multiplyScalar(2); // scale the components

const clamped = THREE.MathUtils.clamp(15, 1, 10); // 10const mixed = THREE.MathUtils.lerp(0, 10, 0.5); // 5const mapped = THREE.MathUtils.mapLinear(0.5, 0, 1, 0, 100); // 50const radians = THREE.MathUtils.degToRad(90);const degrees = THREE.MathUtils.radToDeg(Math.PI);const random = THREE.MathUtils.randFloat(1, 10);const eased = THREE.MathUtils.smoothstep(0.5, 0, 1); // eased 0–1 curve

const manager = new THREE.LoadingManager();manager.onStart = (url, loaded, total) => console.log(`started ${url}`);manager.onProgress = (url, loaded, total) => console.log(`${loaded}/${total} ${url}`);manager.onLoad = () => console.log("all items loaded");manager.onError = (url) => console.error(`failed ${url}`);
const loader = new THREE.TextureLoader(manager); // any loader takes a manager

scene.remove(mesh);// dispose geometry, materials and textures only when nothing else still uses themmesh.geometry.dispose();const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];for (const material of materials) {  for (const value of Object.values(material)) {    if (value?.isTexture) value.dispose(); // material.dispose() leaves its textures alone  }  material.dispose();}mesh.dispose(); // frees renderer state kept for this object only
renderer.setAnimationLoop(null); // stop the looprenderer.dispose(); // frees the renderer's GPU resources; the WebGL context stays aliverenderer.forceContextLoss(); // also release the context when the canvas is discarded

import * as BufferGeometryUtils from "three/addons/utils/BufferGeometryUtils.js";
// inputs must carry the same set of attributesconst merged = BufferGeometryUtils.mergeGeometries([  new THREE.BoxGeometry(1, 1, 1),  new THREE.SphereGeometry(1, 32, 16),]);
const lod = new THREE.LOD();lod.addLevel(new THREE.Mesh(new THREE.SphereGeometry(1, 32, 16)), 0); // distance 0: full detaillod.addLevel(new THREE.Mesh(new THREE.SphereGeometry(1, 12, 8)), 20);lod.addLevel(new THREE.Mesh(new THREE.SphereGeometry(1, 6, 4)), 60);scene.add(lod);

import * as THREE from "three/webgpu";
const renderer = new THREE.WebGPURenderer({ antialias: true });await renderer.init(); // must complete before any other use of the rendererrenderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();scene.background = new THREE.Color(0x111318); // the WebGPU canvas is transparent by default
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 1.5, 5);
const cube = new THREE.Mesh(  new THREE.BoxGeometry(1, 1, 1),  new THREE.MeshStandardNodeMaterial({ color: 0x3a86ff }),);scene.add(cube);const light = new THREE.DirectionalLight(0xffffff, 2);light.position.set(3, 4, 5); // shines from its position toward the originscene.add(light);scene.add(new THREE.AmbientLight(0xffffff, 0.4));
const timer = new THREE.Timer();timer.connect(document);
function animate() {  timer.update();  cube.rotation.y += timer.getDelta();  renderer.render(scene, camera);}renderer.setAnimationLoop(animate);