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