SINGULARITY

Demo for the tutorial on optimizing complex Three.js scenes while preserving quality

Live demo · Article on Codrops · Mirror demo

Installation

This project uses Yarn (a yarn.lock is committed, so Yarn is the canonical path).

Install dependencies:

yarn

Start a local development server:

yarn dev

Create a production build:

yarn build

Using npm instead

If you prefer npm, note that the dev dependencies pin eslint ^9 and eslint-config-next 15.1.6 while the runtime uses next 14.2.22, which causes a peer-dependency conflict on install. You can work around it with --force (it skips the peer check; it does not change the installed runtime):

npm install --force
npm run dev
npm run build

Tech stack

• Next.js 14 + TypeScript
• React Three Fiber and Drei for the Three.js scene
• @react-three/postprocessing for visual effects
• @react-three/rapier for physics
• Leva and r3f-perf for live tweaking and performance monitoring
• Tailwind CSS

Credits

Original models

• gameboy
• klonoa 2 emerald ring
• rayman
• solid snake
• clank
• crash bandicoot
• daft punk
• minecraft pickaxe
• minecraft steve
• ape escape
• mario
• ak47
• dualshock
• halo energy sword
• vhs
• dropout bear
• deadmau5
• sly cooper
• zelda rupee
• daxter
• juggernog

Misc

Follow Niccolò Fanton: Twitter, Instagram, GitHub

Follow Codrops: Bluesky, Facebook, GitHub, Instagram, X

License

MIT

Made with 💙 by Codrops