TresJS, a declarative way of creating 3D scenes from Vue components
summary
TresJS provides a Vue custom renderer that maps ThreeJS classes to Vue components so scenes are declared with TresCanvas, TresPerspectiveCamera, TresMesh, TresBoxGeometry and the same constructor args via an args prop; installation is pnpm add tresjs/core plus three. Performance details: frame updates use a composable (UseRenderLoop) and template refs/shallowRef to avoid proxy overhead. A separate Cientos package supplies higher-level primitives (Text3D, Levioso/Float, model loaders). Version 2 release candidate goes public today and demos (live demo cube + animation) run successfully.
AI-written summary · about
chapters (13)
- 0:00Intro
- 2:43ThreeJS
- 3:19React-three-fiber
- 3:57TroisJS & Lunchbox
- 4:37TresJS
- 6:14Getting started
- 8:46Adding an Object
- 10:18From ThreeJS Instances to Components
- 11:45Demonstration
- 16:52Cientos package
- 17:56Levioso (Float)
- 18:14TresJS EcoSystem
- 18:55Resources
related talks
32mHow to create 3D experiences using Vue with TresJS
18mHow vitejs is Powering the TresJS Ecosystem
26mThe Subtle Art of 3D Scrolly-telling and Product Customization using TresJS
51mCreate a 3D Low Poly Planet Scene with TresJS Solution LIVE
24mWhat's hot on TresJS v4 🔥?
21mShiny, Pretty and Post-processed TresJS Effects for Visuals
10mAI and Developer Tooling
19mTresJS Effects for Jaw-Dropping Visuals!