Skip to content


npm install @tresjs/core three
yarn add @tresjs/core three
pnpm add @tresjs/core three


TresJS is written in Typescript and it's fully typed. If you are using Typescript, you will get the full benefit of the typings. Just make sure you install the types for three.

npm install @types/three -D
yarn add @types/three -D
pnpm add @types/three -D


If you are using Vite, you just need to import and add the templateCompilerOptions from TresJS to your vite.config.ts inside of the vue plugin:

import { templateCompilerOptions } from '@tresjs/core'

export default defineConfig({
  plugins: [
      // Other config

This is required to make the template compiler work with the custom renderer so it does not throw warnings on the console. For more info check here.

Try it online


You can try TresJS online using the official playground. Check it out:


We have a brand new StackBlitz starter to try TresJS online. Check it out:


We also have a showcase lab of examples made with TresJS. Check it out here.


ThreeJS is a wonderful library to create awesome WebGL 3D websites. It's also a library, which is constantly updated, which makes it hard for wrapper maintainers like TroisJS to keep up with all the enhancements.

The React ecosystem has an impressive 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 as 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 issue with this is, mixing compilers renderers in Vue 3 is something the Vue community is still working on - see here for more information.

// 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 a Vue custom renderer for ThreeJS. That's TresJS v2.