Loading...
Loading...
Use when building 3D scenes with TresJS (Vue Three.js) - provides TresCanvas, composables (useTres, useLoop), Cientos helpers (OrbitControls, useGLTF, Environment), and post-processing effects
npx skill4agent add onmax/nuxt-skills tresjs@tresjs/core@tresjs/cientos@tresjs/post-processing# 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 |
<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>TresTHREE.PerspectiveCamera<TresPerspectiveCamera />THREE.Mesh<TresMesh />THREE.BoxGeometry<TresBoxGeometry />THREE.MeshStandardMaterial<TresMeshStandardMaterial />:args<TresPerspectiveCamera :args="[75, 1, 0.1, 1000]" /><script setup>
const color = ref('orange')
const position = ref([0, 0, 0])
</script>
<template>
<TresMesh :position="position">
<TresMeshStandardMaterial :color="color" />
</TresMesh>
</template><script setup>
import { useGLTF } from '@tresjs/cientos'
const { scene } = await useGLTF('/model.glb')
</script>
<template>
<primitive :object="scene" />
</template>