TresJS 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) Installation

Core (required)

pnpm add three @tresjs/core

Helpers - controls, loaders, materials, staging

pnpm add @tresjs/cientos

Post-processing effects

pnpm add @tresjs/post-processing Quick Reference 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 Loading Files Load based on your task: references/core.md - TresCanvas setup, composables, events, primitives references/cientos.md - OrbitControls, useGLTF, Environment, materials references/effects.md - EffectComposer, bloom, glitch, DOF references/cookbook.md - Load models, camera setup, animations DO NOT load all files at once. Load only what's relevant. Core Concepts TresCanvas Root component that creates WebGL renderer and scene:

Component Naming All Three.js classes available as Vue components with Tres prefix: THREE.PerspectiveCamera → THREE.Mesh → THREE.BoxGeometry → THREE.MeshStandardMaterial → Constructor arguments via :args prop: Reactivity Props are reactive - changes update the 3D scene:

Primitive Component Inject existing Three.js objects directly:

Available Guidance 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