我已经创建了3D地图，并通过Sprites在该地图上标记了点。除了子画面标签的位置，这本身可以正常工作。
因为我正在创建地图，所以相机可以从0到90度倾斜，而理想情况下，标签始终在屏幕上要贴标签的项目上方保持一定距离。但不幸的是，由于精灵始终围绕其原点居中且与该项目重叠，因此我必须在Y世界轴上将精灵向上移动，并且精灵的中心位置会随着相机倾斜而改变。如果所注视的物品偏离中心，这看起来很奇怪，并且当相机直视向下时，效果不太好。
不需要jsfiddle，但是我在http://leeft.eu/starcitizen/上的应用程序应该对它的外观有很好的印象。
THREE.SpritePlugin的代码向我建议，在渲染时应该可以使用“ matrixWorld”在屏幕的Y轴上将精灵向上移动一些距离，但是我无法弄清楚如何使用它，也不完全确定那就是我首先需要使用的。
渲染时是否可以在屏幕上向上移动精灵，或者更改其原点？还是有其他方法可以达到相同的效果？
Three.js r.67
正如WestLangley所建议的那样，尽管花了我几个小时来计算数学工作所需的几行代码，但我还是根据视角改变了精灵的位置，从而创建了一个可行的解决方案。我也更新了我的应用程序，因此请观看实时演示。
在下面的代码中，使用从相机计算出的倾斜角phi和航向角theta来OrbitControls.js计算一个精灵偏移量，该偏移量确实可以实现我想要的效果：
// 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标签是它们所引用的对象组的子对象，这仅设置了与该父对象的局部偏移量。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句