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

Опубликовано: 22 Октябрь 2024
на канале: Suboptimal Engineer

12,022

301

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 - https://github.com/SuboptimalEng/thre...
🎥 YouTube -    / suboptimaleng
🐦 Twitter -   / suboptimaleng
📸 Instagram -   / suboptimaleng
💻 GitHub - https://github.com/SuboptimalEng
🌎 Website - https://suboptimaleng.com

== [ Credits ] ==
James Harness - https://sketchfab.com/James.Harness
CRT Monitor by James Harness - https://sketchfab.com/3d-models/crt-m...

== [ Resources ] ==
Three.js - https://threejs.org
Easing Functions - https://easings.net
Three.js Tutorials - https://sbcode.net/threejs
Discover Three.js - https://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 #threejs #gamedev