Introduction

npm

npm install @tresjs/core three

yarn

yarn add @tresjs/core three

pnpm

pnpm add @tresjs/core three

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

npm install @types/three -D

yarn

yarn add @types/three -D

pnpm

pnpm add @types/three -D

Vite

Si vous utilisez Vite, vous devez ajoutez ceci à votre vite.config.ts:

import { templateCompilerOptions } from '@tresjs/core'

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

Ceci est nécessaire afin que le compilateur de template fonctionne avec le moteur de rendu personnalisé et ne renvoie pas d'erreur dans la console. Pour plus d'informations, consultez cet article.

Essayer en ligne

Sandbox

Vous pouvez essayer TresJS en ligne en utilisant la sandbox officielle. Testez ici:

StackBlitz

Nous avons un nouveau starter StackBlitz afin d'essayer TresJS en ligne. Testez ici:

Loading...

Playground

Nous avons aussi un playground où vous pouvez essayer TresJS en ligne. Testez ici.

Motivation

ThreeJS est une merveilleuse bibliothèque pour faire de superbes sites en 3D avec WebGL. C'est aussi une bibliothèque en perpétuelle évolution, ce qui rend complèxe le maintien de wrapper comme TroisJS afin de le garder constamment à jour.

L'écosytème React possède un impréssionnant moteur de rendu personnalisé appellé React-three-fiber qui permet de créer des scènes 3D, de manière déclarative, avec des composants réutilisables et autonomes qui réagissent aux états.

Dans ma recherche d'un outil similaire dans l'écosytème VueJS j'ai trouvé cette incroyable bibliothèque nommée Lunchbox qui fonctionne de la même manière que R3F, il propose un moteur de rendu personnalisé Vue3. Je contribue aussi à améliorer cette bibliothèque afin qu'elle devienne aussi mature et complète que R3F.

Le seul problème concerne le mélange des compilateurs et des moteurs de rendu en Vue3. C'est un sujet sur lequel la communauté Vue travaille encore. Pour plus d'informations voir ici.

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

Ces deux bibliothèques m'ont donc inspiré pour créer un moteur de rendu personnalisé Vue pour ThreeJS. Il s'appel TresJS v2.