ThreeJS - Understanding Animation
Vložit
- čas přidán 3. 11. 2021
- Taking a look at how the ThreeJS lifecycle works and what's actually happening when something animates. Knowing how this works will greatly help your understanding and fun when playing with ThreeJS.
REPO: github.com/davidfitzgibbon/lo...
You should have 100k subs! Keep up the great work!!
Thanks for the video
Happy to help!
Question: The other day i was using gsap smoothScroller its turned out well but, it got complicated when i deployed as i was using trial and gsap is little costly for me
can you make exact same with vanilla js
If the slider was to be used for rotating the cube instead of moving, would a 0-360 number slider need to be converted into radians in the function?
It would need to be converted to radians, yes. You have lots of freedom there though, you could also have a scale 0-1 to have one turn.
In the end you'll have a formula something like:
Math.PI * 2 * ( chosenValue / maxValue)
For 0-360 degrees that would be:
Math.PI * 2 * ( chosenValue / 360)
For 0-1 turns that would be:
Math.PI * 2 * ( chosenValue / 1)
I made a really reduced example here: codepen.io/loficodes/pen/podRqOQ/1e181cc8d3ef9782b5788708ffc59181?editors=1010 no matter what you set the max to on the input, it works the same, because we're dividing by that max again later.
Hopefully that makes sense, didnt have too much time to send this!
@@LoFiCodes Great, thanks that all makes sense!