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...

КОМЕНТАРІ •