Alvaro Saburido

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.

TresJS a new declarative ThreeJS as Vue components
#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

How to contribute and get involved with the community

Support the project by sharing your work, contributing code, joining the Discord community, or providing sponsorship.

#13about 10 minutes

Answering community questions about TresJS

Topics covered include tree-shaking, script setup usage, custom shaders, and compatibility with Nuxt 3.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Videos

See all videos
Building Better with Nuxt 341:22

Building Better with Nuxt 3

Daniel Roe

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly44:31

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

petite-vue - Progressively enhancing every application?44:40

petite-vue - Progressively enhancing every application?

Alexander Lichter

Under The Hood Of Vue 3 Reactivity54:44

Under The Hood Of Vue 3 Reactivity

Marc Backes

Under The Hood of Vue 3 Reactivity49:00

Under The Hood of Vue 3 Reactivity

Marc Backes

Vue3 practical development44:11

Vue3 practical development

Mikhail Kuznetcov

TDD for Vue.js Developers58:26

TDD for Vue.js Developers

Markus Oberlehner

Fast & Furious - Going headless with Nuxt.js!42:21

Fast & Furious - Going headless with Nuxt.js!

Samuel Snopko

From learning to earning

Jobs that call for the skills explored in this talk.