Skip to content

简介

bash
npm install @tresjs/core three
bash
yarn add @tresjs/core three
bash
pnpm add @tresjs/core three

Typescript

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

bash
npm install @types/three -D
bash
yarn add @types/three -D
bash
pnpm add @types/three -D

Vite

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

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 社区仍在努力解决的问题 —— 更多信息参阅此处

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

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