Skip to content

Installation

Apprennez comment installer TresJS

bash
pnpm add three @tresjs/core
bash
npm install three @tresjs/core
bash
yarn add three @tresjs/core

Meilleur usage avec Vue 3.x et Composition API

Typescript

TresJS est écrit en TypeScript et est entièrement typé. Si vous utilisez Typescript, vous pouvez obtenir tous les bénéfices du typage. Assurez vous seulement d'installer les types pour Three.

bash
npm install @types/three -D
bash
yarn add @types/three -D
bash
pnpm add @types/three -D

Commencer

Vous pouvez installer TresJS comme n'importe quel autre plugin Vue

ts
import Tres from '@tresjs/core'
import { createApp } from 'vue'
import App from './App.vue'

export const app = createApp(App)

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

Ou vous pouvez l'utiliser directement dans vos composants

vue
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas>
    <!-- Votre scene ici -->
  </TresCanvas>
</template>

TIP

Ceci est recommandé pour des raisons de performances et de taille du projet. Le tree-shaking fonctionnera mieux et seuls les composants utilisé seront importés.

Vite

Depuis que v2 es un moteur de rendu personnalisé, il nous faut informer le vue-compiler de votre application que les composants de Tres sont autorisés à être importés sans retourner l'erreur : [Vue warn]: Failed to resolve component.

Vous devez seulement ajouter ceci à votre vite.config.ts dans le plugin Vue:

ts
import { templateCompilerOptions } from '@tresjs/core'

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