三个JS保持标签尺寸放大

Question

我正在使用three.js的太阳能系统,我很好奇是否有一种简单的方法可以让我所有的行星标签显示相同的尺寸,无论它们离相机有多远？我似乎无法找到解决方案.我想你可以计算从每个标签到相机的距离,然后根据它得出某种比例因子.似乎有更简单的方法来实现这一目标？

谢谢!

更新了来自prisoner849的回复.效果很好!

Answer 1

I figure you could calculate the distance from each label to the camera then come up with some sort of scaling factor based on that.

而且非常简单.比方说,THREE.Sprite()对象(标签)是THREE.Mesh()对象(行星)的子对象,然后在动画循环中需要做

var scaleVector = new THREE.Vector3();
var scaleFactor = 4;
var sprite = planet.children[0];
var scale = scaleVector.subVectors(planet.position, camera.position).length() / scaleFactor;
sprite.scale.set(scale, scale, 1); 

我用这种技术制作了太阳系的一个非常简单的例子.

Answer 2

为了未来访问者的利益，转换控件示例正是这样做的：

https://trijs.org/examples/misc_controls_transform.html

以下是示例代码中的实现方式：

var factor;
if ( this.camera.isOrthographicCamera ) {
	factor = ( this.camera.top - this.camera.bottom ) / this.camera.zoom;
} else {
	factor = this.worldPosition.distanceTo( this.cameraPosition ) * Math.min( 1.9 * Math.tan( Math.PI * this.camera.fov / 360 ) / this.camera.zoom, 7 );
}
handle.scale.set( 1, 1, 1 ).multiplyScalar( factor * this.size / 7 );