Tresjs/docs/guide/index.md

Introduction

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

Typescript

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.

Vite

If you are using Vite, you have add the following to your vite.config.ts:

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

Try it online

Sandbox

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

StackBlitz

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

Playground

We also have a playground where you can try TresJS online. Check it out here.

Motivation

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 compilers renderers in Vue 3 is something the Vue community is still working on - see here for more information.

So I was inspired by both libraries to create a Vue custom renderer for ThreeJS. That's TresJS v2.