三个 JS 在缩放时保持标签大小 [英] Three JS Keep Label Size On Zoom

问题描述

我正在 Three.js 中研究太阳系，我很好奇是否有一种简单的方法可以让我下面的行星的标签都显示相同的大小，而不管它们离相机多远?我似乎无法找到解决方案.我认为您可以计算从每个标签到相机的距离，然后基于此得出某种比例因子.似乎有更简单的方法来实现这一点?

谢谢！

更新了来自囚犯849的回答.效果很好！

解决方案

我认为你可以计算从每个标签到相机的距离，然后基于此得出某种比例因子.

而且非常简单.假设，一个 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);

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

I'm working on a solar system in three.js and am curious if there is an easy way to make the labels for the planets I have below all show up the same size regardless of how far they are from the camera? I can't seem to find a solution to this. 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. Seems like there would be an easier way to accomplish this?

Thanks!

Updated with answer from prisoner849. Works excellent!

解决方案

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.

And it's very simple. Let's say, a THREE.Sprite() object (label) is a child of a THREE.Mesh() object (planet), then in your animation loop you need to do

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); 

I've made a very simple example of the Solar System, using this technique.

这篇关于三个 JS 在缩放时保持标签大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！