安装

了解如何安装 TresJS

pnpm

pnpm add three @tresjs/core

npm

npm install three @tresjs/core

yarn

yarn add three @tresjs/core

最好与 Vue 3.x 和组合式 API 一起使用

Typescript

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

npm

npm install @types/three -D

yarn

yarn add @types/three -D

pnpm

pnpm add @types/three -D

开始

你可以像其他的 Vue 插件一样安装 TresJS

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

或者你可以直接在你的组件中使用

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

<template>
  <TresCanvas>
    <!-- Your scene here -->
  </TresCanvas>
</template>

TIP

出于性能和捆绑包大小的考虑，建议采用这种方法，树摇的效果会更好，而且您只需导入您使用的组件。

Vite

由于 v2 是自定义渲染器，我们需要让应用程序的 vue-compiler 知道 Tres 的组件是被包含在内的，以避免出现 [Vue warn]: Failed to resolve component 警告。

您只需将此添加到 vue 插件中的 vite.config.ts：

vite.config.ts

import { templateCompilerOptions } from '@tresjs/core'

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