Getting Started
Installation
Get started with TresJS.
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.clientsuffix or<ClientOnly />) - ⚙️ Automatic configuration of the Vue compiler for TresJS components
- ✨ DX Magic that comes with Nuxt