Tresjs
Wire Vue/Nuxt 3D scenes faster by importing TresJS Cientos controls, loaders, and helpers instead of hand-rolling Three.js glue.
Overview
Tresjs is an agent skill for the Build phase that documents TresJS Cientos helpers and controls so you can assemble Vue/Nuxt 3D scenes with correct imports and loader patterns.
Install
npx skills add https://github.com/onmax/nuxt-skills --skill tresjsWhat is this skill?
- Documents @tresjs/cientos imports without a Tres prefix—drop-in OrbitControls, CameraControls, TransformControls, and si
- useGLTF pattern with optional Draco decoding for glTF/GLB models bound via primitive :object
- Props and events called out for OrbitControls (damping, autoRotate, distance/polar limits, @change/@start/@end)
- Built on three-stdlib under the hood for solo builders already on the Nuxt/TresJS stack
- 7 control components tabulated (OrbitControls plus six alternatives in the controls table)
Adoption & trust: 766 installs on skills.sh; 674 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want interactive 3D in a Vue app but waste agent tokens guessing Cientos component names, props, and glTF loading conventions.
Who is it for?
Indie builders adding product demos, configurators, or marketing 3D to a Nuxt/Vue codebase already using TresJS.
Skip if: Teams not using Vue/TresJS, pure native/game-engine pipelines, or backend-only APIs with no WebGL UI.
When should I use this skill?
Implementing or refactoring TresJS/Cientos scenes in Vue or Nuxt when the agent needs correct component imports and loader syntax.
What do I get? / Deliverables
Your agent emits working TresCanvas snippets with the right controls and useGLTF usage instead of generic Three.js boilerplate.
- Vue template snippets with Cientos imports
- Configured control and GLTF loader usage
Recommended Skills
Journey fit
Canonical shelf is Build because the skill documents UI/runtime components for in-app 3D experiences, not distribution or ops. Frontend is the right subphase: OrbitControls, GLTF loaders, and canvas patterns are presentation-layer work in TresCanvas.
How it compares
Component-library cheat sheet for TresJS—not a generic Three.js tutorial or a Blender asset pipeline.
Common Questions / FAQ
Who is tresjs for?
Solo and indie frontend developers using TresJS and Nuxt who want agent-guided snippets for Cientos controls and model loaders.
When should I use tresjs?
During Build → frontend when scaffolding canvases, orbit cameras, GLB imports, or choosing among OrbitControls, MapControls, and TransformControls in Vue.
Is tresjs safe to install?
Review the Security Audits panel on this Prism page and the upstream nuxt-skills repo before installing; the skill itself is documentation-only and does not grant extra permissions beyond your agent environment.
SKILL.md
READMESKILL.md - Tresjs
# Cientos Collection of ready-made helpers and components for TresJS. Uses `three-stdlib` under the hood. ```bash pnpm add @tresjs/cientos ``` No `Tres` prefix needed - import and use directly. ## Controls ### OrbitControls Orbit around a target: ```vue <script setup> import { OrbitControls } from '@tresjs/cientos' </script> <template> <TresCanvas> <TresPerspectiveCamera :position="[5, 5, 5]" /> <OrbitControls enable-damping :damping-factor="0.05" /> </TresCanvas> </template> ``` Key props: `enableDamping`, `autoRotate`, `autoRotateSpeed`, `enableZoom`, `enablePan`, `minDistance`, `maxDistance`, `minPolarAngle`, `maxPolarAngle` Events: `@change`, `@start`, `@end` ### Other Controls | Component | Description | | --------------------- | ------------------------------------- | | `CameraControls` | Full-featured camera controller | | `PointerLockControls` | First-person controls (lock cursor) | | `KeyboardControls` | WASD movement | | `MapControls` | Panning-focused (like Google Maps) | | `TransformControls` | Move/rotate/scale objects with gizmo | | `ScrollControls` | Scroll-driven camera/scene animations | ## Loaders ### useGLTF Load glTF/GLB models: ```vue <script setup> import { useGLTF } from '@tresjs/cientos' const { scene, nodes, materials } = await useGLTF('/model.glb', { draco: true }) </script> <template> <primitive :object="scene" /> </template> ``` Returns: `scene`, `nodes`, `materials`, `animations` Options: `draco: boolean`, `decoderPath: string` ### GLTFModel Component Declarative alternative: ```vue <Suspense> <GLTFModel path="/model.glb" draco /> </Suspense> ``` ### Other Loaders ```ts import { useFBX, useTexture, useVideoTexture, useSVG } from '@tresjs/cientos' const fbx = await useFBX('/model.fbx') const texture = await useTexture('/texture.jpg') const video = useVideoTexture('/video.mp4') const svg = await useSVG('/icon.svg') ``` ### useProgress Track loading progress: ```vue <script setup> import { useProgress } from '@tresjs/cientos' const { progress, active, errors, item } = useProgress() </script> <template> <div v-if="active">Loading: {{ Math.round(progress) }}%</div> </template> ``` ## Materials ### GlassMaterial Realistic glass/crystal: ```vue <TresMesh> <TresSphereGeometry /> <GlassMaterial :thickness="0.5" :roughness="0" :transmission="1" /> </TresMesh> ``` ### HolographicMaterial Sci-fi hologram effect: ```vue <HolographicMaterial :fresnelAmount="0.5" :fresnelOpacity="0.8" :hologramBrightness="1.5" :scanlineSize="8" :signalSpeed="2" hologramColor="#00d5ff" /> ``` ### WobbleMaterial Animated wobble distortion: ```vue <WobbleMaterial :speed="2" :factor="0.5" color="hotpink" /> ``` ### Other Materials | Component | Description | | ------------------------ | --------------------------------------------- | | `CustomShaderMaterial` | Extend built-in materials with custom shaders | | `MeshReflectionMaterial` | Reflective surfaces like water/mirrors | | `PointMaterial` | For point clouds | | `MeshDiscardMaterial` | Invisible (for shadows only) | ## Staging ### Environment Set up scene environment and background: ```vue <Suspense> <Environment files="/sunset.hdr" :background="true" /> </Suspense> ``` Or use presets: ```vue <Environment preset="city" /> ``` Presets: `apartment`, `city`, `dawn`, `forest`, `lobby`, `night`, `park`, `studio`, `sunset`, `warehouse` ### Sky Procedural sky: ```vue <Sky :distance="450000" :sun-position="[1, 0.5, 0]" /> ``` ### Stars Starfield background: ```vue <Stars :count="5000" :depth="50" /> ``` ### Precipitation Rain/snow: ```vue <Precipitation :count="5000" :speed="0.5" /> ``` ### Other Staging | Component | Description | | --------------