CODEWITHSUNDEEP
javascriptmapboxpoint-cloudsdeck.gl
Hazza
Hazza

Reputation: 23

rotating a Deck.gl point cloud layer on Mapbox

Im trying to align a deck.gl PointCloud layer with a location on Mapbox. I tried modifying the position values and it's working but I was wondering if there is another simpler way to modify the layer orientation instead of modifying the data.

I used this code to define the layer :

const pointsLayer = new deck.MapboxLayer({
  id: 'points',
  type: deck.PointCloudLayer,
  data: dataArray,
  pickable: false,
  coordinateSystem: deck.COORDINATE_SYSTEM.METER_OFFSETS,
  coordinateOrigin: [25, 55],
  pointSize: 1,
  getPosition: d => d.position,
  getColor: d => d.color,
  
});

I couldn't find any Prop in the documentation that achieves that goal

Upvotes: 2

Views: 751

Answers (1)

Menace
Menace

Reputation: 36

You should use the modelMatrix property on the Layer baseclass.

The transformation is done using a 4x4 transformation matrix for 3D space, which it includes both rotational as translation aspect. If you want to rotate along one particular axis, you can see the examples below.

// No rotation and no translation
modelMatrix: [1,0,0,0,
              0,1,0,0,
              0,0,1,0,
              0,0,0,1],

// Rotate X-axis theta degrees
modelMatrix: [1,0,0,0,
              0,cos(theta),-sin(theta),0,
              0,sin(theta),cos(theta),0,
              0,0,0,1],

// Rotate Y-axis phi degrees
modelMatrix: [cos(phi),0,sin(phi),0,
              0,1,0,0,
              -sin(phi),0,cos(theta),0,
              0,0,0,1],

// Rotate Z-axis omega degrees
modelMatrix: [cos(omega),-sin(omega),0,0,
              sin(omega),cos(omega),0,0,
              0,0,1,0,
              0,0,0,1],

Upvotes: 2

Related Questions