)
TresJS Webdev
February 13, 2023
TresJS ▲ ■ ●, a declarative way of bringing the magic of ThreeJS using everyday Vue Components and composables. Think of it as React-three-fiber or Lunchbox but without the need for a custom renderer. It just works.
This is my third OSS library, and probably the one I have been more excited about.
Documentation https://tresjs.org/
Playground https://playground.tresjs.org/
Motivation
React ecosystem has an impressive custom render solution called React-three-fiber that allows you to build your scenes declaratively with reusable, self-contained components that react to state.
In my search for something similar in the VueJS ecosystem, I found this amazing library called Lunchbox which works with the same concept that R3F, it provides a custom Vue3 Renderer. I'm also contributing to improving this library so it gets as mature and feature-rich as R3F.
The only problem is, mixing different renderers in Vue 3 is something the Vue community is still working on - see here for more information.
Until there is a solution similar to React Reconciliation you will need to create 2 separate Apps which might be not ideal.
// Example Vite setup
import { createApp } from 'vue'
import { createApp as createLunchboxApp } from 'lunchboxjs'
import App from './App.vue'
import LunchboxApp from './LunchboxApp.vue'
// html app
const app = createApp(App)
app.mount('#app')
// lunchbox app
const lunchboxApp = createLunchboxApp(LunchboxApp)
// assuming there's an element with ID `lunchbox` in your HTML app
lunchboxApp.mount('#lunchbox')
So I was inspired by both libraries to create something that wouldn't require creating a custom renderer but intelligent enough to generate Vue components based on the ThreeJS constructors with 0-to-none maintenance required three:latest. That's TresjS.