ThreeUse

Three.js WebGPU + Vue 3 Composable Utility Library

Introduction

ThreeUse is a VueUse-style composable library built on Three.js WebGPU and Vue 3 Composition API.

Design Philosophy

• Non-singleton: Each create3dApp() call returns an independent instance — multiple canvases on one page work fine
• Plugin-first: Extend via app.use(Plugin), access instances via app.$xxx
• TSL-first: Effects are written in Three.js Shading Language, compatible with WebGPU/WebGL
• Code as docs: Every function directory has index.ts, index.md, demo.vue

Quick Start

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

Package List

Package	Description
@threeuse/core	Core factory function and composables
@threeuse/core/plugins	Plugins and controller modules (OrbitControls, Stats, GUI, etc.)
@threeuse/effects	TSL effects (Fresnel, Outline, Dissolve, Hologram)