Introduction

TresJS is an open-source library that provides a declarative way of using Three.js in Vue. Build your scenes using Vue components in a declarative way with all the power of Vue's reactivity.

TresJS (pronounced "/tres/", Spanish for "three") builds upon Three.js by creating a Vue 3 custom renderer that transforms Vue components into Three.js objects. The library aims to make 3D web development more accessible by leveraging Vue's reactivity system and component-based architecture, while maintaining compatibility with the latest Three.js features.

Why TresJS?

Three.js is an incredibly powerful 3D library, but it can have a steep learning curve, especially for developers coming from component-based frameworks like Vue. TresJS bridges this gap by:

• 🧩 Familiar Components: Use Vue components to build your 3D scenes instead of imperative Three.js code.
• ⚡ Reactive by Default: Leverage Vue's reactivity system to create dynamic 3D experiences.
• 📦 Composables: Access powerful composables that encapsulate common 3D patterns and functionality.
• 🎯 Declarative: Describe what your scene should look like, not how to build it step by step.
• 🔧 Developer Experience: Get the full Vue developer experience with hot module replacement, TypeScript support, and Vue DevTools integration.

From Imperative to Declarative

Instead of writing imperative Three.js code like this:

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer()

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({ color: 0x00FF00 })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

You can write declarative Vue components:

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[0, 0, 5]" />
    <TresMesh>
      <TresBoxGeometry />
      <TresMeshBasicMaterial :color="0x00FF00" />
    </TresMesh>
  </TresCanvas>
</template>

This approach reduces the learning curve significantly while preserving all the power and flexibility of Three.js.