Tresjs/docs/guide/index.md

Introduction

<FirstScene style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"/>

::: code-group

npm install three @tresjs/core -D

yarn add three @tresjs/core -D

pnpm add three @tresjs/core -D

:::

Try it online

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

Motivation

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

The React ecosystem has an impressive custom renderer-based solution called React-three-fiber that allows you to 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 an amazing library called Lunchbox which, like R3F for React, 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)
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 and is intelligent enough to generate Vue components based on the three:latest constructors with 0-to-no maintenance required. That's TresjS.