How to create 3D experiences using Vue with TresJS
summary
Demo shows a working small 3D scene built live — a box and a sphere rendered inside a Tres canvas using three.js under the hood, with tres-mesh, tres-box-geometry and a normal material; an early runtime error appears and is fixed live so the scene renders. TresJS is a custom render API for Vue, offers a playground (play.tres.org), ships as core plus ecosystem packages, targets v4 features, postprocessing, XR and physics roadmaps, and warns that per-frame animation needs care for performance.
AI-written summary · about
chapters (10)
- 0:00TresJS and 3D in Vue
- 4:23Why TresJS created
- 7:37Core concepts
- 11:41Live 3D scene demo
- 16:44Code with components
- 17:26TresJS ecosystem
- 19:12TresJS 2024 roadmap
- 20:59Post-processing & XR plans
- 21:42Resources & support
- 22:46Q&A
related talks
22mTresJS, a declarative way of creating 3D scenes from Vue components
51mCreate a 3D Low Poly Planet Scene with TresJS Solution LIVE
26mThe Subtle Art of 3D Scrolly-telling and Product Customization using TresJS
18mHow vitejs is Powering the TresJS Ecosystem
06mIntro to How to Create a 3D Low Poly Planet Scene with TresJS
16mAdd 3D to your Nuxt site using ThreeJS
10mAI and Developer Tooling
21mShiny, Pretty and Post-processed TresJS Effects for Visuals