如何将精灵定位在 canvas 标注的特定点？

Question

我有一个类似于下图的 html canvas 标注：

我将此 canvas 添加到 THREE.Texture 并从该纹理创建了 THREE.Sprite。

现在我想将 sprite 定位在特定的 (x0, y0, z0) 但我希望标注的指针末端（指针结束的点 - 角）是 sprite 的位置。

如果我说

sprite.position.x = x0
sprite.position.y = y0
sprite.position.z = z0

精灵的位置似乎使矩形的右下角位于 (x0, y0, z0)，我希望指针末端位于 (x0, y0, z0) 我尝试翻译(x0, y0, z0) 通过计算偏移量，但精灵没有显示在我想要的位置。

如何放置这样的精灵？有什么建议吗

Answer 1

您可以简单地修改 sprite center（sprite 的锚点），例如:

sprite.center.set(0, 0);

How to position a sprite at a particular point of the canvas callout?