Declarative ThreeJS using Vue Components

• 💡 Build 3D scenes with Vue components
• ⚡️ Powered by Vite
• 🎨 Vue custom renderer for Three.js
• 🥰 Always up-to-date with the latest Three.js features
• 🦾 Fully Typed

TresJS is a Vue custom renderer that lets you build Three.js scenes declaratively using Vue components. Any Three.js class can be used as a component by prefixing it with Tres (e.g., <TresMesh>, <TresBoxGeometry>).

pnpm i @tresjs/core three

Install Three.js type definitions:

pnpm i @types/three -D

Add the template compiler options to your vite.config.ts to make the custom renderer work and avoid console warnings:

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

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

Checkout the docs

To build the package run:

pnpm run build

pnpm run test

To run the playground:

pnpm run playground

MIT