javascriptmapboxpoint-cloudsdeck.gl

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


Solution

  • 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],