threejs

Create a WebGLRenderer bound to a canvas, a Scene, and a PerspectiveCamera, then add a Mesh combining Geometry and Material with lights. Drive animation with requestAnimationFrame, updating rotation each frame before calling renderer.render(scene, camera).

Use GLTFLoader for glTF models, TextureLoader for images, and DRACOLoader for Draco-compressed glTF files. For production, prefer compressed textures and KTX2 or Draco to reduce download size and startup time.

Stretched rendering happens when resize events are not handled. On resize, call renderer.setSize with the canvas client dimensions, update camera.aspect to width divided by height, and call camera.updateProjectionMatrix().

Crashes after route changes usually come from leaked WebGL resources. In SPAs you must call geometry.dispose(), material.dispose(), texture.dispose(), and renderer.dispose(), remove event listeners, and cancel the animation frame loop.

Cap pixel ratio with Math.min(window.devicePixelRatio, 2), reduce texture and model sizes, and limit lights and shadows. Fake lighting with baked textures when possible, since many dynamic lights are expensive on mobile GPUs.

Check the prefers-reduced-motion media query and, when set, render a single still frame instead of running the requestAnimationFrame loop, or significantly slow down time-based updates.