Tresjs/docs/fr/guide/getting-started.md

Installation

Apprennez comment installer TresJS

::: code-group

pnpm add three @tresjs/core

npm install three @tresjs/core

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.

::: code-group

npm install @types/three -D

yarn add @types/three -D

pnpm add @types/three -D

:::

Commencer

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

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

<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:

import { templateCompilerOptions } from '@tresjs/core'

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