three.js Starter — Motion Blur
This is the boilerplate scene Niccolò Fanton reuses as the starting point for his three.js
demos. This copy adds velocity-based motion blur with adjustable streak length and object spin. It runs on three's WebGPU renderer with an automatic WebGL fallback and has
no lights at all: everything is lit by an HDRI environment map assigned to
scene.environment, rotated and scaled from the control panel. Seven shapes
(sphere, gem, capsule, torus, torus knot, box, extruded letter) share a single
MeshPhysicalNodeMaterial built with TSL nodes, so metal, glass, rubber and
bubble are the same material with different tint, roughness, transmission, thickness, IOR,
clearcoat and iridescence values. The backdrop is a solid colour, a vertical gradient or the
HDRI itself, each with a vignette, and the contact shadow is faked with a flat disc and a
radial alpha falloff rather than a shadow map. A render pipeline records motion vectors and samples the image along them. The panel is
driftpane on top of Tweakpane v4,
with persisted state and presets, and stats-gl draws the FPS/CPU/GPU graphs.
Based on the three-starter repository and the three-particles motion blur experiment. More three.js experiments on the three.js demos hub, and the rest of the work on Niccolò Fanton's portfolio.