mcpField
T
tresjs

tresjs

github.com/onmax创意与媒体7231.2k 次安装今天更新
代码仓库

关于 tresjs

tresjs 是面向 Vue 3 开发者的 3D 场景技能，通过声明式组件封装 Three.js 对象。内容涵盖核心 API、辅助工具、后期处理效果和常见场景搭建方式。

主要功能

  1. 01声明式 Three.js 组件
  2. 02响应式场景属性
  3. 03TresCanvas 场景与渲染器
  4. 04模型、控制器与材质辅助
  5. 05后期处理效果

适用场景

  1. 01在 Vue 3 中搭建 3D 场景
  2. 02加载并展示 3D 模型
  3. 03添加相机控制与动画
  4. 04为场景配置后期处理

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/onmax/nuxt-skills --skill tresjs

安装后在 Claude Code 中输入/tresjs确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
cientos.md
cookbook.md
core.md
effects.md

详细介绍

TresJS

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

软件包： @tresjs/core（必需）、@tresjs/cientos（辅助工具）、@tresjs/post-processing（效果）

安装

# Core (required)
pnpm add three @tresjs/core

# Helpers - controls, loaders, materials, staging
pnpm add @tresjs/cientos

# Post-processing effects
pnpm add @tresjs/post-processing

快速参考

正在处理……加载文件
TresCanvas、useTres、useLoopreferences/core.md
控制器、加载器、材质references/cientos.md
Bloom、glitch、DOF 效果references/effects.md
常见模式、配方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 prop 传入构造函数参数：

<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>
Primitive 组件

直接注入现有的 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 与 EffectComposerPmndrs 的区别、bloom、glitch、DOF、效果叠加

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

评论

支持 Markdown