Video Thumbnail

Sign up for a plan to instantly unlock all premium lessons.


Premium Features

Download Video

Replace Points with Rectangular Prisms

Published 2 years ago

Our points are currently displayed as spheres using Three.js' SphereGeometry object, however, this could potentially limit our ability to display some sort of useful data attribute based on the size of our geometry. It would make more sense to change our SphereGeometry to a BoxGeometry, affecting the individual geometries height so that they're easily differentiated from one another when representing some sort of data.

Although you may think it's as simple as swapping out our geometry object type, you'll quickly realize that doing so creates for an awkward effect where rectangular geometries are placed on the globe without any rotation.

To alleviate this, we'll be using Three.js' lookAt method on top of our geometry. Finally, we'll translate our newly created rectangular prisms using a Matrix4 (an array with four rows and columns that represents how an object should be moved in 3D space).

For more info on matrices and the Matrix4 object, check out the following link which helped me overcome some initial road blocks when learning about the subject:


Want to participate?

Create a free Chris Courses account to begin


No comments yet, be the first to add one

Providing the lift to launch your development career

© 2023 Chris Courses. All rights reserved.