Create a point in a direction In Cesiumjs

I am using CesiumJs. I would like to create point D at distance C from point A using the direction B

Point A => start Position (CartographicPosition {latitude, longitude; altitude})
Direction B => direction from A (HeadingPitchRoll {heading, pitch, roll})
Distance C => in meters

I am trying to get the rotation an object is facing, and create a point in front of him.

My current implementation is

  public createROIfromRotation(position: Cartographic, rotation: HeadingPitchRoll): Cartographic {

    const pos = Cesium.Ellipsoid.WGS84.cartographicToCartesian(position);
    const quat = Cesium.Transforms.headingPitchRollQuaternion(pos, rotation);
    const rot = CesiumMath.QuaternionToEuler(quat);

    const dir = Cesium.Cartesian3.multiplyByScalar(rot, 10, new Cesium.Cartesian3());
    const roiPos = Cesium.Cartesian3.add(pos, dir, new Cesium.Cartesian3());

    return Cesium.Ellipsoid.WGS84.cartesianToCartographic(roiPos);

But it is not rotating around the object, it is doing some kind of curve in different planes.

I would like the red point to be always in front of the truck at 10 meters distance

Entities don’t expose a computed “forward vector”, but you can compute this by getting the entity’s orientation (as a quaternion) and multiplying that by some unit vector. CesiumJS doesn’t seem to have a method to directly apply a quaternion to a vector, so you’ll want to convert the quaternion to a Matrix 3 first:

// orientation is the entity.orientation
var rotationMatrix = Cesium.Matrix3.fromQuaternion(orientation);
// 10 here is the distance I want to push the point away from the origin of the vehicle

var offsetVector = new Cesium.Cartesian3(10, 0, 0);

// Apply the orientation to this vector
offsetVector = Cesium.Matrix3.multiplyByVector(rotationMatrix, offsetVector, offsetVector);

// Offset the dot’s position by the computed vector

var newPosition = entity.position.getValue(viewer.clock.currentTime).clone();

Cesium.Cartesian3.add(newPosition, offsetVector, newPosition);

direction.position = newPosition;


Here’s a Sandcastle that uses this to put the dot in front of the vehicle.

1 Like

Thank you, I fixed using this which also include Matrix3.