18c How to make interactive cube of moving balls using position and velocity three.js
Вставка
- Опубліковано 14 жов 2024
- Learn how to create skybox in three.js, add and set orbit controls three.js, add stats.js three.js, add dat.gui slider controls three.js, create callback functions for dat.gui slider controls, dispose of meshes in three.js, create moving balls using position and velocity vectors three.js, check if a moving ball is colliding with a cube edge, and rebound a ball by changing position and velocity.
Timestamps:
00:00 Intro/demo
00:49 Project to do list
01:07 Import JavaScript modules
01:46 Global variables
02:51 Create setup functions
03:46 Create scene, camera, renderer
04:05 Create skybox three.js
05:00 Add directional light three.js
05:46 Add and set orbit controls three.js
06:10 Add stats.js display three.js
07:01 Add dat.gui slider controls three.js
11:17 Create callback functions for slider controls
14:16 How to clear screen of meshes three.js
15:59 Create container cube
17:13 Create moving balls by adding velocity three.js
20:21 Update ball position by adding velocity to position vectors three.js
22:21 How to check if ball is colliding with edge of cube and rebound ball of cube three.js
30:51 Add window resize capability
Resources:
Three.module.js
github.com/mrd...
OrbitControls.js module:
github.com/mrd...
Stats.js module:
github.com/mrd...
dat.GUI module:
github.com/dat...
Space Skybox:
opengameart.or...
Three.js Vector3 docs:
threejs.org/do...
Discover Three.js - Coordinate System:
discoverthreej...