TresJS a new declarative ThreeJS as Vue components

What if you could build complex 3D scenes using only Vue components? TresJS offers a declarative, always up-to-date way to use Three.js in your app.

#1about 3 minutes

Introducing TresJS for declarative 3D in Vue

TresJS allows you to build complex Three.js scenes declaratively using standard Vue components and composables.

#2about 4 minutes

Motivation for a modern Three.js library for Vue

Existing Vue wrappers for Three.js struggle with updates, inspiring a new library similar to React Three Fiber but without a custom renderer.

#3about 4 minutes

Getting started with the TresCanvas and basic scene setup

Install TresJS as a plugin and use the TresCanvas component as the root for your 3D scene, which handles the renderer and camera setup.

#4about 5 minutes

Creating 3D objects with auto-generated components

TresJS automatically generates components from Three.js constructors, allowing you to compose objects by nesting geometry and material components.

#5about 4 minutes

Animating objects using the onLoop composable

Use template refs to get the Three.js instance and the `onLoop` composable to animate object properties on every frame.

#6about 2 minutes

Extending TresJS with non-core Three.js modules

Use the `extend` method from the `useCatalog` composable to add components for Three.js modules that are not part of the core library, like OrbitControls.

#7about 4 minutes

Applying materials and textures to objects

Enhance object appearance by using different material components and loading complex PBR textures with the `useTexture` composable.

#8about 5 minutes

Implementing realistic lighting and shadows in a scene

Add various light types like ambient and directional lights, and enable shadows by setting properties on the canvas, lights, and objects.

#9about 3 minutes

Configuring the environment and handling pointer events

Fine-tune the rendering environment with canvas props and handle user interactions like clicks and hovers using built-in pointer events.

#10about 6 minutes

Introducing Cientos for loading models and other utilities

The Cientos package provides helpful abstractions and components for common tasks like loading GLTF models, adding controls, and debugging.

#11about 4 minutes

Exploring the TresJS ecosystem and future roadmap

TresJS is designed as an ecosystem with packages for core functionality, utilities, performance, and post-processing, with a roadmap including HMR improvements and a Nuxt module.

#12about 3 minutes