Three.js / Frameworks
Framework integration guides
Same 3D, any framework. Pick the stack you are already in and get the setup that works there, along with the pitfalls it brings.
- 01Setup that survives SSR
- 02Real code, not pseudocode
- 03Pros, cons and use cases
- 04The pitfalls of each stack
Same 3D, any framework
Three.js renders identically whichever framework wraps it. What differs is how the canvas gets mounted, what happens during server rendering, and how the bundle is split, and those three things are where the time goes when you wire it up for the first time.
Each guide below covers the install, a working setup for that framework, the pros and cons, and the questions people hit most often.
Three.js with Next.js
Build high-performance 3D web apps with React & Next.js SSR
- nextjs
- react
- react-three-fiber
Three.js with Nuxt.js
Bring WebGL 3D scenes into the Vue & Nuxt ecosystem
- nuxt
- vue
- tresjs
Three.js with SvelteKit
Minimal boilerplate, maximum 3D performance with SvelteKit
- svelte
- sveltekit
- threlte
Three.js with Astro
Zero-JS by default — ship only the 3D you need with Astro
- astro
- react-three-fiber
- islands
Three.js with Vite
The fastest dev server for vanilla Three.js projects
- vite
- vanilla-js
- build-tools
Sponsorship
Support us, grow the community
Three.js Resources is independent and free to use. Take a sponsored slot to help keep it growing, and put your product in front of 200,000+ monthly visitors building 3D on the web.
Get a Sponsor Slot →F.A.Q
Frequently Asked Questions.
Everything people ask before wiring Three.js into a framework.
Choosing one
Which framework suits the project.
No. Three.js renders the same way underneath whichever framework wraps it. What changes is how the canvas gets mounted, how server rendering is handled, and how the bundle is split. Every guide here covers those three things for its framework.
Follow the rest of the project rather than the 3D. If the app is already React, Next.js and React Three Fiber fit naturally. Vue teams have Nuxt and TresJS, Svelte teams have Threlte, and Astro suits a mostly static site with one interactive island. For a standalone scene with no app around it, Vite is the fastest route.
Common pitfalls
What trips people up in every stack.
Three.js needs a real browser: a DOM element to mount the canvas and a WebGL context. Any framework that renders on the server has to skip that work until the component is on the client, which is why each guide starts with the dynamic or client-only import for that framework.
No. Plain Three.js works in every framework on this page. R3F, TresJS and Threlte are convenience layers for React, Vue and Svelte respectively, and they help most when the scene needs to react to application state.
Want it built rather than wired up?
I build production Three.js into existing React, Next.js and Vue codebases.