Create a cylinder at a coordinate and point at another coordinate

CesiumJS
1

Is it possible / how would you go about creating a cone with the apex at a coordinate and have the base point at another coordinate?

2

You can compute the difference between the base point and the apex. The distance between these points will be the height of the cylinder/cone. In order to align the cylinder with the line between these points, you can

  • compute the cross product between the difference and the Z-axis (to obtain a rotation axis)
  • compute the angle between the Z-axis and the difference (which is the rotation angle)

From that, you can create a quaterinion, put that into a matrix, and apply that matrix to the cylinder geometry.

Here is a sandcastle with a few examples, with the “entry point” being the function

function createCylinderPrimitive(
  position0,
  position1,
  topRadius,
  bottomRadius,
  color
) {
...
}

that allows creating arbitrarily-aligned cylinder primitives.

(Edited to properly rotate around the base of the cylinders)

3

Thank you for the response and the help. I have been tinkering around with the code you provided and I can’t seem to get the cone to line up how I expect. Please find attached my attempt at making the cone between two points. The red spheres demonstrate where the cone should begin and end. Any thoughts?

4

Sorry, the computation of the position had an error (the toOriginMatrix had to be removed). I have updated the example sandcastle accordingly, and here is your sandcastle, with the same fix, showing the cylinder between the red spheres:

5

Thank you, I appreciate the help.

My next question would be about the best way to handle setting up the object to move over time based on a series of coordinates.

6

You could create an animation in various ways (also depending on where the input data for the animation is coming from). In order to apply this to the cylinder, one rough outline of the approach would be

  • split the createCylinderPrimitive method into two parts: One that computes the modelMatrix and one that creates the primitive with the Cesium.GeometryInstance
  • During the animation, use the modified positions to create an updated version of the modelMatrix
  • Assign that model matrix to the GeometryInstance, to update its orientation.

If there are more specific questions, it would probably make sense to discuss that in a new thread.