Add 3D to your Nuxt site using ThreeJS
summary
A working Nuxt v3 demo renders a 3D cat and a simple rotating sphere using Nuxt v3 and ThreeJS with WebGL; code shows mesh(geometry, material), a perspective camera (must set position or scene is black), initialization via a template ref and lifecycle hook, and a requestAnimationFrame loop at ~60fps to animate. Performance notes: avoid putting ThreeJS instances in reactive proxies (use shallowRef/unwrap or composables) and use a client-only component or .client suffix for SSR. Repos and a StackBlitz demo are linked.
AI-written summary · about
chapters (8)
- 0:00Start
- 2:01Motivation
- 5:12Something to draw
- 5:38A camera to see it
- 8:01The Loop
- 8:49A Reactivity
- 10:26Next steps
- 11:33Resources
related talks
21mPlaying with Nuxt in 3D
32mHow to create 3D experiences using Vue with TresJS
22mTresJS, a declarative way of creating 3D scenes from Vue components
17mBuilding Immersive Experiences on the Web
51mCreate a 3D Low Poly Planet Scene with TresJS Solution LIVE
37mCreating 3D Experiences with React
26mThe Subtle Art of 3D Scrolly-telling and Product Customization using TresJS
41mGetting started with three js and WebGL