Three.js + Tween.js Tutorial | How to Animate 3D Objects

In this Three.js tutorial, we go over Tween.js, the JavaScript library that makes it easy to code animations. We start off with a setup guide and dive into different helper functions that allow us to delay and repeat animations. Then we look at easing functions and finally dive into chaining animations.
📖 Code - github.com/SuboptimalEng/thre...
🐦 Twitter - / suboptimaleng
💻 GitHub - github.com/SuboptimalEng
🌎 Website - suboptimaleng.com
== [ Credits ] ==
James Harness - sketchfab.com/James.Harness
CRT Monitor by James Harness - sketchfab.com/3d-models/crt-m...
== [ Resources ] ==
Three.js - threejs.org
Easing Functions - easings.net
Three.js Tutorials - sbcode.net/threejs
Discover Three.js - discoverthreejs.com
== [ Timestamps ] ==
00:00 Intro to Tween.js
00:40 Three.js Setup Guide
01:15 Basic Tween.js Example
02:58 Delay and Repeat Functions
03:31 Easing Functions
05:26 Chaining Functions
== [ Tags ] ==
#suboptimal #metaverse #threejs

[@shayan-gg]

Thank you. I completed your Three.js tutorial and i just wanna tell you how grateful i am that you made this great tutorial free. I will notify you when i complete my site.

[@SuboptimalEng]

Thanks! I'll be on the lookout for your website.

[@coezbay]

Awesome! Was the best intro for Tween.js!

[@cristianramos7343]

Cool tutorial thanks. I'm a developer but sometimes when you need a quick start a short video is better than just reading the docs :)

[@AndersonMancini]

Great tutorial 👏🏻. I will recommend your channel for those who ask me about animation. Congrats.

[@SuboptimalEng]

Thanks Anderson, I'm glad you found the video helpful!

[@hengyang2328]

Thank you so much for this tutorial! I was lost for days trying to figure out how to animate my camera when I clicked on a div. Animating my camera to lookAt() a target.position and then passing in a tween to move my camera, as a prop to my react App component, allowed me to get the desired effect I wanted! Thank you, very much!

[@SuboptimalEng]

Glad to hear the video helped!

[@jack_wyus2013]

Thanks bro :D

[@ansible9340]

Hey great video, but @2:55, is the cube floating? If not, why isn't it clipping when rotating?

[@SuboptimalEng]

Good question! I move the ground mesh down in the Y direction to make sure that the box does not get clipped when it rotates. You can see the exact code on GitHub.

[@lih3391]

Is there any way to do this without the help of an external library like tween.js?

[@Ivan-dt9mc]

Hello what js library do you recommend for a beginner trying to make 2d/3d games in javascript? Nice Video btw !!

[@SuboptimalEng]

Thanks Ivan! For 2D game dev, you can write simple JS in a HTML canvas or use something like PixiJS. For 3D game dev you can try a JS game engine like Babylon.js or PlayCanvas.

[@Ivan-dt9mc]

@@SuboptimalEng alright thanks:))

[@Ivan-dt9mc]

@@SuboptimalEng for 3d game dev, isn't three.js more popular?

[@SuboptimalEng]

@@Ivan-dt9mc Three.js helps you render 3D objects in your canvas element, but game development is much more than that.
Babylon.js and Play Canvas act like Unity or Unreal engine but with JavaScript.

[@lucutes2936]

how can i group animations?

[@vivekascoder]

Aww, I also love Iosevka, it's just the best

[@SuboptimalEng]

Glad I found it, such a clean font. Saves a lot of horizontal space too 👏

[@FreQ35Hz]

where to learn this three.js ? any suggestion or smth i reallly want to learn this three.js

[@SuboptimalEng]

Discover Three.js is a good website to get started.

[@FreQ35Hz]

@@SuboptimalEng thanks a lot , I appreciate it

[@snudge763]

im getting this error: "TWEEN.Tween is not a consturctor"