三个JS保持标签尺寸放大 [英] Three JS Keep Label Size On Zoom

问题描述

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

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?

谢谢！

更新了来自prisoner849的回复。效果很好！

Updated with answer from prisoner849. Works excellent!

推荐答案

我想你可以计算出从每个标签到相机的距离，然后根据它得出某种比例因子。

这很简单。比方说， THREE.Sprite（）对象（标签）是 THREE.Mesh（）对象的子元素（星球），然后在动画循环中你需要做什么

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屋！