Video Thumbnail

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

Premium Features

Download Video

Displaying Points With Rectangular Prisms

Published 4 months 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

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2021 Chris Courses. All rights reserved.