Three.js:改变 Sprite 的枢轴点

Question

我创建了一张 3D map ，并通过 Sprites 在这张 map 上标记点。除了 Sprite 标签的定位之外，这本身工作得很好。

因为我正在创建 map ，所以相机可以从 0 度倾斜到 90 度，而理想情况下，标签始终在屏幕上标记的项目正上方保持一定距离。但不幸的是，由于 Sprite 始终以它们的原点为中心并且与项目重叠，因此我必须在 Y 世界轴上向上移动 Sprite ，并且随着相机倾斜， Sprite 的中心位置也会发生变化。如果所看到的项目偏离中心，这看起来很奇怪，并且当相机垂直向下看时效果不太好。

没有方便的jsfiddle，但我的应用程序在 http://leeft.eu/starcitizen/应该给人留下良好的印象。

THREE.SpritePlugin 的代码向我建议应该可以使用“matrixWorld”在渲染时将 Sprite 在屏幕的 Y 轴上向上移动一段距离，但我不知道如何使用它，也不是我完全确定这就是我首先需要使用的。

渲染时是否可以在屏幕上向上移动 Sprite ，或者更改它们的原点？或者是否有其他方法可以达到相同的效果？

Three.js r.67

Answer 1

按照 WestLangley 的建议，我通过根据视角更改 Sprite 位置来创建了一个可行的解决方案，尽管我花了几个小时才算出数学工作所需的几行代码。我也更新了我的应用程序，因此请观看现场演示。

随倾斜角度phi和航向角theta根据 OrbitControls.js 中的相机计算得出下面的代码计算了一个 Sprite 偏移量，它完全符合我的要求:

// Given:
// phi = tilt; 0 = top down view, 1.48 = 85 degrees (almost head on)
// theta = heading; 0 = north, < 0 looking east, > 0 looking west

// Compute an "opposite" angle; note the 'YXZ' axis order is important
var euler = new THREE.Euler( phi + Math.PI / 2, theta, 0, 'YXZ' );
// Labels are positioned 5.5 units up the Y axis relative to its parent
var spriteOffset = new THREE.Vector3( 0, -5.5, 0 );
// Rotate the offset vector to be opposite to the camera
spriteOffset.applyMatrix4( new THREE.Matrix4().makeRotationFromEuler( euler ) );

scene.traverse( function ( object ) {
   if ( ( object instanceof THREE.Sprite ) && object.userData.isLabel ) {
      object.position.copy( spriteOffset );
   }
} );

使用此代码的任何人请注意: Sprite 标签是它们所引用的对象组的子对象，这仅设置距该父对象的本地偏移量。