将THREE.Sprite分组以共享相同的转换点

Question

我有一些THREE.Sprite对象构成了标签的一部分：icon + info + text。

当在自上而下的OrthographicCamera相机对齐时，这些对齐良好，但是当我改变相机位置和旋转时，每个子画面（组嵌套在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 ) );