frontier-threejs

Ship the idea at the current production ceiling of browser 3D, not at tutorial level. The bar is the recent wave of AI-built Three.js demos: hills with long crawling shadows, oceans with foam and wakes, forests that move in one shared wind, and light that changes over the course of a day.

This skill sets the level to aim for. It is not a fixed recipe. Every idea gets its own art direction, and the systems below are how you reach that level for it.

Ground truth over memory

Three.js changes every ~2 months and model memory lags behind. Before writing code, check the version you are actually running on (node_modules/three/package.json, or npm view three version). Then confirm every addon import exists in node_modules/three/examples/jsm/. The closest official webgpu_* example is the canonical usage. The verified r186 inventory, with import paths, is in TOOLBOX.md. Traps models commonly fall into:

• PostProcessing was renamed RenderPipeline in r183, so write renderPipeline.outputNode = ….
• SunLight (cascaded shadows) only works after renderer.library.addLight( SunLightNode, SunLight ).
• godrays() supports only Directional/Point lights, not SunLight.
• WaterMesh is still a normal-map water. A hero ocean needs FFT compute (see TOOLBOX).
• Import from three/webgpu and three/tsl. Never mix those with the three WebGL build in one scene.

Stack