Create a 3D Low Poly Planet Scene with TresJS Solution LIVE
summary
Live-codes a Vue + TresJS scene that loads a glTF low poly planet and shows the exact steps to get it working: import the Tres canvas, wrap async model loading in Suspense, use the composable to load models (centos/useGLTF style) and render specific node with primitive + glTF nodes. Builds rotating planet, randomized orbiting clouds and a looping airplane using useLoop / onBeforeRender, computes geometry boundingSphere for placement, uses Draco for compression, and confirms it runs and animates in the demo.
AI-written summary · about
chapters (9)
- 0:00Welcome to TresJS planet scene
- 7:30Setting up TresJS scene
- 14:40Loading 3D planet model
- 20:46Animating planet rotation
- 26:29Adding clouds to planet
- 37:22Orbiting clouds animation
- 42:01Adding airplane orbit
- 46:30Final thoughts on performance
- 47:34Q&A on TresJS
related talks
32mHow to create 3D experiences using Vue with TresJS
22mTresJS, a declarative way of creating 3D scenes from Vue components
26mThe Subtle Art of 3D Scrolly-telling and Product Customization using TresJS
21mPlaying with Nuxt in 3D
16mAdd 3D to your Nuxt site using ThreeJS
37mCreating 3D Experiences with React
10mAI and Developer Tooling
08mEasy 3D Graphics with Vue