---
title: Introduction
description: TresJS's goal is to make 3D development approachable for Vue developers by using familiar concepts, such as components and composables, thereby reducing the Three.js learning curve.
navigation:
  icon: i-lucide-house
---

**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.

:::scene-wrapper
  :::intro-scene
:::

### 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:

```ts [scene.ts]
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:

```vue
<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.