ThreeUse

Three.js WebGPU + Vue 3 组合式工具库

简介

ThreeUse 是一个类似 VueUse 风格的 Three.js 工具库，基于 Three.js WebGPU 和 Vue 3 Composition API 构建。

设计哲学

• 非单例：每次调用 create3dApp() 返回独立实例，支持同页面多 canvas
• 插件优先：通过 app.use(Plugin) 扩展功能，app.$xxx 直接访问
• TSL 优先：效果使用 Three.js Shading Language 编写，跨 WebGPU/WebGL 可用
• 代码即文档：每个函数目录包含 index.ts、index.md、demo.vue

快速开始

pnpm add @threeuse/core three vue

import { create3dApp } from '@threeuse/core'
import { AmbientLight, BoxGeometry, DirectionalLight, Mesh, MeshStandardMaterial } from 'three'

const app = create3dApp({ antialias: true })

const light = new AmbientLight(0xFFFFFF, 0.5)
const dLight = new DirectionalLight(0xFFFFFF, 1)
dLight.position.set(5, 5, 5)

const mesh = new Mesh(
  new BoxGeometry(),
  new MeshStandardMaterial({ color: 0x7C4DFF }),
)

app.scene.add(light, dLight, mesh)
app.onBeforeRender((delta) => { mesh.rotation.y += delta })
app.mount('#app')

包列表

包	说明
@threeuse/core	核心工厂函数和组合式函数
@threeuse/core/plugins	插件和控制器模块（OrbitControls、Stats、GUI 等）
@threeuse/effects	TSL 效果（Fresnel、Outline、Dissolve、Hologram）