对THREE.Sprite进行分组以共享相同的变换点

Question

我有许多THREE.Sprite对象，它们构成了标签的一部分:图标+信息+文本。

在自上而下的OrthographicCamera相机对齐中，这些对齐效果很好，但是当我更改相机位置和旋转时，每个sprite (组嵌套在Object3D中)都会单独变换并失去对齐方式(即标签位于图标上方)。

有没有办法在一组精灵之间共享一个变换点？

用于说明更改摄像头位置时的问题的图像：

​

Answer 1

的确有。我之前的question and answer问到了基本上相同的问题，并提供了一个解决方案:为了实现这一点，你需要偏移你的精灵，获取相机的角度，并用这些角度旋转精灵偏移。

您可以将精灵合并到一个组中，并偏移整个组而不是每个单独的精灵。这将为您提供最好的性能，因为无论何时旋转相机，都需要进行较少的计算。

假设您使用的是最近的THREE.js和OrbitControls (用于在controls上调用的方法)，在( 0，0，0)处有一个精灵组，匹配您的标签组上的摄影机角度如下所示：

var euler = new Euler( controls.getPolarAngle() + Math.PI / 2, controls.getAzimuthalAngle(), 0, 'YXZ' );
var rotationMatrix = new Matrix4().makeRotationFromEuler( euler );

var offset = new THREE.Vector3( 0, - labelOffset, 0 );
spriteGroup.position.copy( offset.applyMatrix4( rotationMatrix ) );