简介

npm

npm install @tresjs/core three

yarn

yarn add @tresjs/core three

pnpm

pnpm add @tresjs/core three

Typescript

TresJS 是用 Typescript 编写的，是完全类型化的。如果您使用的是 Typescript，您就能充分享受类型的好处。 只需要保证你安装了 three 的类型定义。

npm

npm install @types/three -D

yarn

yarn add @types/three -D

pnpm

pnpm add @types/three -D

Vite

如果你使用 Vite，你需要在你的 vite.config.ts 中添加下面的配置:

vite.config.ts

import { templateCompilerOptions } from '@tresjs/core'

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

要使模板编译器能与自定义渲染器一起工作，并且不会在控制台上发出警告，这样做是必须的。获得更多信息，请点击此处。

线上尝试

演练场

你可以在官方演练场中线上尝试 TresJS。尝试一下：

StackBlitz

我们现在有一个全新的StackBlitz模板供线上尝试 TresJS。尝试一下：

Loading...

实验室

我们同时也拥有一个使用 TresJS 制作的实例展示实验室。点击这里来查看。

动机

ThreeJS 在创建超棒 WebGL 3D 网站方面是一个奇妙的库。同时他也是一个保持不断更新的库，一些对其封装的维护者，如 TroisJS，往往很难跟上其所有的更新。

React 生态系统中有一个令人印象深刻的使用自定义渲染器的解决方案叫 React-three-fiber，它能让你使用一些可重用，独立的对状态做出反应的组件进行声明式的构建你的场景。

我在 VueJS 生态系统中寻找类似的东西时，发现了这个名为 Lunchbox 的神奇库，它的工作原理与 R3F 相同，提供了一个自定义的 Vue3 渲染器。我也在不断改进这个库，让它变得像 R3F 一样成熟、功能丰富。

同时唯一的问题是，混合编译不同的渲染器是 Vue 社区仍在努力解决的问题 —— 更多信息参阅此处。

// Example Vite setup
import { createApp as createLunchboxApp } from 'lunchboxjs'
import { createApp } from 'vue'
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')

因此，我受到这两个库的启发，为 ThreeJS 创建了一个 Vue 自定义渲染器。这就是 TresJS v2。