The Subtle Art of 3D Scrolly-telling and Product Customization using TresJS
summary
Shows a working Vue 3D stack: TresJS as a Vue custom renderer that wraps threejs, a Storyblok integration with a Storyblok plugin for material fields, and Centos composables like useGLTF and scroll controls. Builds a scrollytelling page and a product configurator (a configurable rocket) that loads a GLTF, drives rotation and animations from scroll progress via linear interpolation, saves choices to localStorage, demos live coding successfully and even produced a 3D print raffle.
AI-written summary · about
chapters (11)
- 0:003D scrolly-telling with TresJS
- 2:44Why 3D enhances storytelling
- 4:54TresJS for 3D web dev
- 9:26TresJS features and benefits
- 10:51Live coding 3D scene
- 16:58Product configurator demo
- 18:21Raffle 3D-printed rocket
- 19:30Nuts stack with Storyblok
- 21:39TresJS + Storyblok CMS
- 23:24Scroll-controlled 3D animations
- 24:54Summary
related talks
32mHow to create 3D experiences using Vue with TresJS
22mTresJS, a declarative way of creating 3D scenes from Vue components
51mCreate a 3D Low Poly Planet Scene with TresJS Solution LIVE
06mIntro to How to Create a 3D Low Poly Planet Scene with TresJS
21mShiny, Pretty and Post-processed TresJS Effects for Visuals
21mPlaying with Nuxt in 3D
16mAdd 3D to your Nuxt site using ThreeJS
10mAI and Developer Tooling