名称：tresjs 描述：用于使用TresJS（Vue Three.js）构建3D场景 - 提供TresCanvas、组合式函数（useTres、useLoop）、Cientos助手（OrbitControls、useGLTF、Environment）以及后期处理效果许可证：MIT

TresJS

用于构建3D场景的Vue 3框架，使用Three.js。声明式组件包装Three.js对象。

包： @tresjs/core（必需）、@tresjs/cientos（助手）、@tresjs/post-processing（效果）

安装

# 核心（必需）
pnpm add three @tresjs/core

# 助手 - 控件、加载器、材质、场景设置
pnpm add @tresjs/cientos

# 后期处理效果
pnpm add @tresjs/post-processing

快速参考

正在处理…	加载文件
TresCanvas, useTres, useLoop	references/core.md
控件、加载器、材质	references/cientos.md
绽放、故障、景深效果	references/effects.md
常见模式、食谱	references/cookbook.md

加载文件

根据任务加载：

[ ] references/core.md - TresCanvas设置、组合式函数、事件、原始组件
[ ] references/cientos.md - OrbitControls、useGLTF、Environment、材质
[ ] references/effects.md - EffectComposer、绽放、故障、景深
[ ] references/cookbook.md - 加载模型、相机设置、动画

不要同时加载所有文件。 只加载相关部分。

核心概念

TresCanvas

根组件，创建WebGL渲染器和场景：

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

<template>
  <TresCanvas shadows alpha>
    <TresPerspectiveCamera :position="[5, 5, 5]" />
    <TresMesh>
      <TresBoxGeometry />
      <TresMeshStandardMaterial color="orange" />
    </TresMesh>
    <TresAmbientLight :intensity="0.5" />
    <TresDirectionalLight :position="[3, 3, 3]" :intensity="1" />
  </TresCanvas>
</template>

组件命名

所有Three.js类都可用作Vue组件，带有Tres前缀：

THREE.PerspectiveCamera → <TresPerspectiveCamera />
THREE.Mesh → <TresMesh />
THREE.BoxGeometry → <TresBoxGeometry />
THREE.MeshStandardMaterial → <TresMeshStandardMaterial />

构造函数参数通过:args属性传递：

<TresPerspectiveCamera :args="[75, 1, 0.1, 1000]" />

响应性

属性是响应式的 - 更改会更新3D场景：

<script setup>
const color = ref('orange')
const position = ref([0, 0, 0])
</script>

<template>
  <TresMesh :position="position">
    <TresMeshStandardMaterial :color="color" />
  </TresMesh>
</template>

原始组件

直接注入现有的Three.js对象：

<script setup>
import { useGLTF } from '@tresjs/cientos'
const { scene } = await useGLTF('/model.glb')
</script>

<template>
  <primitive :object="scene" />
</template>

可用指南

references/core.md - TresCanvas属性、useTres、useLoop、useGraph、事件、性能

references/cientos.md - OrbitControls、useGLTF、useTexture、Environment、Sky、材质、形状

references/effects.md - EffectComposer vs EffectComposerPmndrs、绽放、故障、景深、效果堆叠

references/cookbook.md - 加载3D模型、带控件的相机、动画循环、后期处理

名称：tresjs 描述：用于使用TresJS（Vue Three.js）构建3D场景 - 提供TresCanvas、组合式函数（useTres、useLoop）、Cientos助手（OrbitControls、useGLTF、Environment）以及后期处理效果 许可证：MIT