Einführung

npm

npm install @tresjs/core three

yarn

yarn add @tresjs/core three

pnpm

pnpm add @tresjs/core three

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

Vite

Wenn du Vite verwendest, solltest du Folgendes zu deiner vite.config.ts hinzufügen:

import { templateCompilerOptions } from '@tresjs/core'

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

Das ist notwendig, damit der Templatecompiler mit dem benutzerdefinierten Renderer funktioniert und keine Warnungen in der Konsole ausgibt. Für weitere Informationen siehe hier.

Probiere es online aus

Playground

Du kannst TresJS online mit der offiziellen Playground ausprobieren:

StackBlitz

Wir haben einen neuen StackBlitz Startpunkt, um TresJS online zu testen:

Labs

Wir haben auch ein Showroom-Labor mit Beispielen, die mit TresJS erstellt wurden. Probiere es hier aus.

Motivation

Three.js ist eine wunderbare Bibliothek für die Erstellung von erstaunlichen 3D-Webseiten mit WebGL. Sie wird konstant weiterentwickelt, was es für die Maintainer von Wrappern wie TroisJS schwierig macht, mit allen Verbesserungen Schritt zu halten.

Das React-Ökosystem hat eine beeindruckendes custom Rendering Projekt namens react-three-fiber, das es dir ermöglicht, deine Szenen deklarativ mit wiederverwendbaren, reaktiven Komponenten zu bauen.

Auf der Suche nach etwas Ähnlichem im VueJS-Ökosystem fand ich eine erstaunliche Bibliothek namens Lunchbox, die mit demselben Konzept wie R3F arbeitet und einen custom Vue3-Renderer bereitstellt. Ich habe seinerzeit auch dazu beigetragen, diese Bibliothek zu verbessern, damit sie so ausgereift und funktionsreich wie R3F wird.

Das einzige Problem ist, dass die Kombination von Compilern und Renderern in Vue3-Templates etwas ist, an dem die Vue-Community noch arbeitet. Mehr Informationen dazu findest du hier.

// Example Vite setup
import { createApp } from 'vue'
import { createApp as createLunchboxApp } from 'lunchboxjs'
import App from './App.vue'
import LunchboxApp from './LunchboxApp.vue'

// html app
const app = createApp(App)
app.mount('#app')

// lunchbox app
const lunchboxApp = createLunchboxApp(LunchboxApp)
// assuming there's an element with ID `lunchbox` in your HTML app
lunchboxApp.mount('#lunchbox')

Von diesen beiden Bibliotheken inspiriert, entschied ich mich dazu einen eigenen Vue-Renderer für Three.js zu erstellen. Das ist TresJS v2.