Playing with Nuxt in 3D
summary
Live demo builds a browser mini‑game proof‑of‑concept using Nuxt + WebGL + ThreeJS + TresJS, loads glTF models (windmill with rotating blades driven by useLoop), and stores game state in Pinia state store. Shadows and water rely on custom shaders and reveal shadow bias and distance artifacts; performance needs Draco compression for large models and has limits on lower‑end devices and gamepad/VR support in Tres. Code is open source and currently supports two buildable buildings.
AI-written summary · about
chapters (17)
- 0:003D on the web
- 1:06WebGL and rendering layers
- 2:353D scene with Tres.js
- 3:19Cameras lights meshes
- 5:25Materials and shadows
- 6:28GLTF model loading
- 7:09Animations with render loops
- 8:14Browser 3D game
- 9:38Time and dynamic lighting
- 10:21Click events interactivity
- 11:23Browser 3D gaming pros/cons
- 13:11Q&A performance state
- 15:37VR AR support accessibility
- 17:29Multiplayer WebSocket
- 18:13Tres.js limits workarounds
- 19:14Browser maps 3D models
- 20:41Summary
related talks
16mAdd 3D to your Nuxt site using ThreeJS
32mHow to create 3D experiences using Vue with TresJS
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
17mBuilding Immersive Experiences on the Web
22mTresJS, a declarative way of creating 3D scenes from Vue components