Time: 14 November, 2024 at 3:15pm CET

💬 Discord Discussions

Goals

• Create your first 3D scene with Vue
• Load 3D models
• Animate the rotation of the planet
• Animate the airplane to orbit the planet
• Animate the clouds to orbit the planet

Prerequisites

• Clone Boilerplate Code - [https://github.com/alvarosabu/vue-forge-low-poly-planet]
• Knowledge of basic Vue, including async operations and Suspense (recommendable)
• Install pnpm https://pnpm.io/ (recommendable)
• Try creating a small TresJS scene with this guide https://docs.tresjs.org/guide/your-first-scene.html

Steps

1. Install dependencies of the project, preferably with pnpm https://pnpm.io/

2. Add your first object to the scene inside TheExperience.vue , we are going to add a “donut” 🍩

   <TresMesh>
       <TresTorusGeometry :args="[2, 0.75, 16, 32]" />
       <TresMeshNormalMaterial />
     </TresMesh>
   

3. Now try changing the position and rotation of the TresMesh by using props

   <aside> 💡 HINT: Follow the args and props guide https://docs.tresjs.org/api/instances-arguments-and-props.html#props

   </aside>

4. Create a component ThePlanet.vue and try loading the planet model using this path public/low-poly-planet/low-poly-planet.glb by using the useGLTF composable https://cientos.tresjs.org/guide/loaders/use-gltf.html

5. Add it to your TheExperience.vue . Remember to wrap it with Supense since it is an async operation