Installation

Erfahre, wie du TresJS installieren kannst.

pnpm

pnpm add three @tresjs/core

npm

npm install three @tresjs/core

yarn

yarn add three @tresjs/core

Besser mit Vue 3.x und Composition API

Typescript

TresJS ist in Typescript geschrieben und vollständig typisiert. Installiere die Typdeklarationen für Three um alle Vorteile von Typescript zu genießen.

npm

npm install @types/three -D

yarn

yarn add @types/three -D

pnpm

pnpm add @types/three -D

Loslegen

Du kannst TresJS wie jedes andere Vue-Plugin installieren.

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')

Oder du kannst es direkt in deiner Komponente verwenden.

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

<template>
  <TresCanvas>
    <!-- Deine Szene lebt hier -->
  </TresCanvas>
</template>

TIP

Aufgrund von Performance und Bundlegröße ist dieser Ansatz zu empfehlen, da durch das Tree-Shaking nur die tatsächlich verwendeten Komponenten importiert werden.

Vite

Da die Version 2 ein benutzerdefinierter Renderer ist, müssen wir dem vue-compiler deiner Anwendung mitteilen, die Tres-Komponenten miteinzubeziehen, um die Warnung [Vue warn]: Failed to resolve component zu vermeiden.

Du musst lediglich Folgendes zu deiner vite.config.ts-Datei innerhalb des Vue-Plugins hinzufügen:

vite.config.ts

import { templateCompilerOptions } from '@tresjs/core'

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