Installation ​

Learn how to install TresJS

pnpm add three @tresjs/core

npm install three @tresjs/core

yarn add three @tresjs/core

Better use with Vue 3.x and composition API

Typescript ​

TresJS is written in Typescript and it's fully typed. If you are using Typescript, you will get the full benefit of the typings. Just make sure you install the types for three.

npm install @types/three -D

yarn add @types/three -D

pnpm add @types/three -D

Getting started ​

You can install TresJS as any other Vue plugin

import { createApp } from 'vue'
import App from './App.vue'

import Tres from '@tresjs/core'

export const app = createApp(App)

app.use(Tres)
app.mount('#app')

Or you can use it directly in your component

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
</script>
<template>
  <TresCanvas>
    <!-- Your scene here -->
  </TresCanvas>
</template>

Vite ​

Since v2 is a custom renderer, we need to let the vue-compiler of your app know that the components of Tres are ok to be included to avoid the [Vue warn]: Failed to resolve component warning.

You just need to add this to your vite.config.ts inside of the vue plugin:

export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
      },
    },
  }),
})