Back to Browse

TresJS - Animate your 3D Objects with Vue

3.6K views
Jun 15, 2023
14:32

TresJS is now released and Open-source 🎉 In this second video, we will bring our cube to life by adding animations by using the useRenderLoop composable and Vue's Template Refs. As always, you can support us with a nice Like, and don't forget to subscribe for more 3D content on Vue. Resources - Repository of the code used in this tutorial https://github.com/alvarosabu/tresjs-basics/tree/feat/animate-objects - TresJS Basic animations https://tresjs.org/examples/basic-animations.html - Playground https://playground.tresjs.org/ - requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame ---- 00:00 - Intro 00:09 - Previous Recap 00:25 - How animation works 01:37 - Frames Per Second (FPS) 02:11 - requestAnimationFrame in ThreeJS 04:14 - useTweakPane fps graph 04:36 - Animating using TemplateRefs and onLoop 09:55 - delta and elapsed 11:13 - Animate with Trigonometry 12:48 - Outro

Download

0 formats

No download links available.

TresJS - Animate your 3D Objects with Vue | NatokHD