Create awesome 3D experiences with Vue
Build 3D with Vue
TresJS reduces the gap between developers and the intimidating world of 3D.
A custom renderer for Three.js powered by Vite.
Declarative
Scenes
TresJS enables you to utilise all capabilities of Three.js declaratively by using Vue components and let <TresCanvas /> manage the rest. Utilise the lifecycle of Vue components to engage with events and manage state transitions.
<script setup>
import { TresCanvas } from '@tresjs/core'
</script>
<template>
<TresCanvas clear-color=”#82DBC5” window-size>
<TresPerspectiveCamera />
<TresMesh
@click=”onClick”
>
<TresBoxGeometry :args="[1, 1, 1]" />
<TresMeshNormalMaterial />
</TresMesh>
</TresCanvas>
</template>DX-focused Ecosystem
Expand the core capabilities with packages like cientos and post-processing to reduce the 🍝 code for tasks like handling 3D Models or adding camera controls.
<script setup>
import { TresCanvas } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos'
import UgglyBunny from '/@/components'
</script>
<template>
<TresCanvas clear-color=”#82DBC5”>
<TresPerspectiveCamera />
<OrbitControls />
<Suspense>
<UgglyBuny />
</Suspense>
</TresCanvas>
</template><script setup lang="ts">
import { useAnimations, useGLTF } from '@tresjs/cientos'
const { scene: model, animations } = await useGLTF(
'models/ugly-bunny.gltf',
)
const { actions, mixer } = useAnimations(animations, model)
const currentAction = ref(actions.Greeting)
currentAction.value.play()
</script>
<template>
<primitive :object="model" />
</template>Showcase your work
Be part of a big community of creators and 3D enthusiasts.
Thanks to our Sponsors 🙏🏻
TresJS is build by a small team of 3D and Vue enthusiasts that maintain the project on their free-time 😊
Please consider sponsoring us to help us keep working on this project ✌️
Take the community’s word for it
Bruno Simon
Author of Three.js JourneyWhile Three.js makes 3D for the web easier, TresJS makes it effortless and accessible. In just a few lines of code, you can create awesome experiences while maintaining low-level accessibility.
Vue.js is lucky to have such a dedicated and talented community and I’m always pleased to see new projects made with TresJS.
Daniel Roe
Nuxt core team leadTresJS is one of the projects I’m most excited about seeing take off in the Vue community. The team are doing amazing work at ensuring building with three.js is effortless in Nuxt (and more broadly!). Great work
Evan you
Creator of @vuejs, @vite_jsI’ve always wanted to see a polished 3D solution in the Vue ecosystem, and I think TresJS is just that! Excited to see it unlock the creativity for Vue devs in another dimension :)
Francesco Michelini
Freelance Creative Developer / @AWWWARDS judgeManaged to add @dimforge’s Rapier to @tresjs_dev This is not a standalone package yet but simply a custom integration, but it’s a good start. Now I can’t stop playing with this stuff
Matias Capeletto (Patak)
Vite, Vitest core team memberTresJS is not only a fantastic ally for your 3D adventures. It’s also a welcoming community of creators building a fundamental library for the Vue ecosystem. Check out the movement in their Discord and GitHub; there are high chances you’ll end up involved in the project!
Yaël Guilloux (Tahul)
Author of pinceau.devVue ecosystem needed someone that pushed the 3D subject and thankfully @tresjs_dev finally did it! Try it ASAP, you’re just a few clicks away from the playground!
Verekia
MiniMana.io | 🧑💻 https://WebGameDev.comTresJS is an excellent way for Vue developers to get into 3D and game development. It has a solid ecosystem and a passionate community. I highly recommend it!