Installation

Get started with TresJS.

Quick Start (Recommended)

The fastest way to get started with TresJS is using our interactive CLI wizard:

npx create-tres my-tres-project

yarn create tres my-tres-project

pnpm create tres my-tres-project

The CLI provides an interactive wizard that guides you through:

🎯 Template selection: Choose between Vue + Vite or Nuxt
📦 Ecosystem packages: Select from TresJS ecosystem packages (Cientos, Post-processing, Leches)
🔧 TypeScript support: Type safe development with TypeScript
📏 ESLint integration: Code quality with TresJS ESLint config

This is the recommended approach for new projects as it handles all the configuration automatically and lets you choose exactly what you need.

Manual Installation

If you prefer to set up TresJS manually or add it to an existing project, follow the instructions below:

Vue project

Install TresJS and Three.js

Install the core TresJS package and the Three.js dependency:

npm install @tresjs/core three

yarn add @tresjs/core three

pnpm add @tresjs/core three

Install TypeScript types (Optional)

If you're using TypeScript, install the Three.js type definitions:

npm install @types/three -D

yarn add @types/three -D

pnpm add @types/three -D

Configure Vite

Add the TresJS template compiler options to your vite.config.ts:

vite.config.ts

import { templateCompilerOptions } from '@tresjs/core'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      // Other config
      ...templateCompilerOptions
    }),
  ],
})

This configuration is required to make the template compiler work with the TresJS custom renderer and prevent console warnings.

Ecosystem packages (Optional)

Install additional TresJS ecosystem packages for extended functionality:

npm install @tresjs/cientos @tresjs/post-processing

yarn add @tresjs/cientos @tresjs/post-processing

pnpm add @tresjs/cientos @tresjs/post-processing

These packages will be automatically imported by the Nuxt module:

Cientos: A collection of useful helpers and components
Post-processing: Post-processing effects for enhanced visuals

Nuxt project

If you're using Nuxt, you can use the official TresJS Nuxt module for a seamless integration experience.

Install the Nuxt module

Install the TresJS Nuxt module and Three.js:

npm install three @tresjs/nuxt

yarn add three @tresjs/nuxt

pnpm add three @tresjs/nuxt

Configure the module

Add @tresjs/nuxt to the modules section of your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@tresjs/nuxt'],
})

Start using TresJS

That's it! The module provides several benefits:

🤓 Auto-import components and composables from the TresJS ecosystem
🖥️ Client-only rendering for TresCanvas (no need for .client suffix or <ClientOnly />)
⚙️ Automatic configuration of the Vue compiler for TresJS components
✨ DX Magic that comes with Nuxt

Introduction

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.

Your First Scene

Learn how to create your first 3D scene with TresJS with this step-by-step guide.