18b How to find distance between 2 objects three.js
Вставка
- Опубліковано 20 лип 2024
- Learn how to calculate distance between 2 objects using distanceToPoint method, how to round distance to one decimal point, and update distance in a heads-up display(HUD) with a 3d CSS text effect.
Timestamps:
00:00 Intro/demo
00:07 What is the distanceToPoint method
00:31 To do list
00:47 Heads-up display, CSS, JS HTML span element
02:15 3js boilerplate: scene, camera, renderer, orbit controls, lights, ground
02:22 How to make a Box3 bounding box
03:14 Set target point as ball position
04:03 How to update bounding box position to cube position
04:37 How to measure distance between objects to one decimal place
06:25 How to update heads-up display
Resources:
Three.js docs Box3: threejs.org/docs/?q=box3#api/...
Three.js docs Sphere: threejs.org/docs/?q=sphere#ap...