npx skills add https://github.com/onmax/nuxt-skills --skill tresjs用于基于 Three.js 构建 3D 场景的 Vue 3 框架。提供封装 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 |
| Controls, loaders, materials | references/cientos.md |
| Bloom, glitch, DOF effects | references/effects.md |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| Common patterns, recipes | references/cookbook.md |
根据你的任务加载:
请勿一次性加载所有文件。 仅加载相关部分。
创建 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 类都可用作带有 Tres 前缀的 Vue 组件:
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 与 EffectComposerPmndrs、bloom、glitch、景深、特效叠加
references/cookbook.md - 加载 3D 模型、带控制的相机、动画循环、后期处理
每周安装量
339
代码仓库
GitHub 星标数
606
首次出现
2026年2月2日
安全审计
安装于
opencode289
gemini-cli286
codex286
github-copilot285
kimi-cli267
amp266
Vue 3 framework for building 3D scenes with Three.js. Declarative components that wrap Three.js objects.
Packages: @tresjs/core (required), @tresjs/cientos (helpers), @tresjs/post-processing (effects)
# Core (required)
pnpm add three @tresjs/core
# Helpers - controls, loaders, materials, staging
pnpm add @tresjs/cientos
# Post-processing effects
pnpm add @tresjs/post-processing
| Working on... | Load file |
|---|---|
| TresCanvas, useTres, useLoop | references/core.md |
| Controls, loaders, materials | references/cientos.md |
| Bloom, glitch, DOF effects | references/effects.md |
| Common patterns, recipes | references/cookbook.md |
Load based on your task:
DO NOT load all files at once. Load only what's relevant.
Root component that creates WebGL renderer and scene:
<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>
All Three.js classes available as Vue components with Tres prefix:
THREE.PerspectiveCamera → <TresPerspectiveCamera />THREE.Mesh → <TresMesh />THREE.BoxGeometry → <TresBoxGeometry />THREE.MeshStandardMaterial → <TresMeshStandardMaterial />Constructor arguments via :args prop:
<TresPerspectiveCamera :args="[75, 1, 0.1, 1000]" />
Props are reactive - changes update the 3D scene:
<script setup>
const color = ref('orange')
const position = ref([0, 0, 0])
</script>
<template>
<TresMesh :position="position">
<TresMeshStandardMaterial :color="color" />
</TresMesh>
</template>
Inject existing Three.js objects directly:
<script setup>
import { useGLTF } from '@tresjs/cientos'
const { scene } = await useGLTF('/model.glb')
</script>
<template>
<primitive :object="scene" />
</template>
references/core.md - TresCanvas props, useTres, useLoop, useGraph, events, performance
references/cientos.md - OrbitControls, useGLTF, useTexture, Environment, Sky, materials, shapes
references/effects.md - EffectComposer vs EffectComposerPmndrs, bloom, glitch, DOF, effect stacking
references/cookbook.md - Load 3D model, camera with controls, animation loop, post-processing
Weekly Installs
339
Repository
GitHub Stars
606
First Seen
Feb 2, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode289
gemini-cli286
codex286
github-copilot285
kimi-cli267
amp266
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装