Tip
3D Scene with Vue using TresJS
In this tip, we are going to learn how to use the TresJS starter with ViteJS
Check out the full course!
TresJS is a Vue custom renderer for ThreeJS that allows you to create 3D scenes declarative by using Vue components and composables.
Using vanilla ThreeJS can be intimidating for new developers, and code can get spaghetti :spaghetti: really quickly making the DX often unpleasant. TresJS aims to reduce this gap by offering users a way of building interactive 3D scenes with a familiar workflow using their favorite framework.
In this tip, we are going to learn how to use the TresJS starter with ViteJS:
- Creating a new scene from scratch with TresCanvas
- Add an object with its geometry and material
- Transform objects using position, rotation, scale
- Animate objects using Vue template refs and useRenderLoop composable