How to make sprite face camera in three-js custom layer

[sunjunqing2008]

I don't know that in Mapbox CustomLayer, if Threejs sprite rotates automatically, it will always face the camera。

My Code

[chrispahm]

Hey @sunjunqing2008,

one option would be to sync the y-rotation of your model with the maps current bearing whenever the map moves. You can get the current bearing (in degrees) using map.getBearing(). Note that you need to set the y-rotation in radians, not degrees.

// Mapbox bearing to THREE.JS radians
// formula (for y-axis rotation):
// - 2 * deg / 360 * Math.PI

function degreeToRadian(deg) {
  return ((-2 * deg) / 360) * Math.PI;
}

map.on("move", () => {
  // get current map bearing, convert -180 - 180 deg value
  // to 0-360 deg value
  const curBearing = (map.getBearing() + 360) % 360;
  // update model y-rotation accordingly
  modelTransform.rotateY = degreeToRadian(curBearing);
});

Here's an ObservableHQ notebook demonstrating this code: https://observablehq.com/d/eb1e6021fd0ad80c

Hope this helps!

[sunjunqing2008]

Thank you for your help. If there is only one sprite in the custom layer, it is OK, but I now have multiple sprites in the custom layer。

[stepankuzmin]

Hi @sunjunqing2008,

Thank you for using mapbox-gl-js. This issue tracker is for reporting bugs and feature requests. For future "how do I" questions like this, please refer to our help documentation, and if you can't find the answer there, contact support.

You might also consider posting your question to https://stackoverflow.com/questions/tagged/mapbox-gl-js to ask the community for help.

[gdlk888]

I have the same problem. Have you solved it

[geobuilding]

@chrispahm

You are correct, in this video, the person 3D mark, the video mark, and the event mark are also used in a similar way, always facing the camera. https://www.youtube.com/watch?v=kUhKczav9kQ&t=105s