You are reading Tres v1 docs. Head over for V2 docs.
Skip to content
On this page


You’re browsing the documentation for TresJS v1. If you’re looking for the documentation for v2, please visit


npm install three @tresjs/core@1.8.1 -D
yarn add three @tresjs/core@1.8.1 -D
pnpm add three @tresjs/core@1.8.1 -D

Try it online

You can fork this template example on StackBlitz and play with it 😋 without installing anything locally.



ThreeJS is a wonderful library to create awesome WebGL 3D websites. Is also a constantly updated library that makes hard for wrapper maintainers like TroisJS to keep up with all the enhancements.

React ecosystem has an impresive custom render solution called React-three-fiber that allows you build your scenes declaratively with re-usable, 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 improve 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)

// lunchbox app
const lunchboxApp = createLunchboxApp(LunchboxApp)
// assuming there's an element with ID `lunchbox` in your HTML app

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 manteinance required three:latest. That's TresjS.