Installation
Apprennez comment installer TresJS
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.
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
}),
]
})