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: