三.js：缩放时如何保持精灵文本大小不变

Posted 2023-02-27

【中文标题】三.js：缩放时如何保持精灵文本大小不变

【英文标题】：Three.js: how to keep sprite text size unchanged when zooming

【发布时间】：2013-12-22 03:59:33

【问题描述】：

在three.js中，当鼠标放大时，文字会相应放大缩小。

var texture = new THREE.Texture( canvas );
var material = new THREE.SpriteMaterial (  map: texture, transparent:false  );
var sprite = new THREE.Sprite( material );

如何防止鼠标缩放时文字大小发生变化？

【问题讨论】：

您使用的是three.js r.63吗？如果没有，请升级。你是说鼠标缩放吗？当鼠标缩放时，精灵会默认改变大小。

对，我用的是r63，你的理解是对的，有办法实现吗？

我想要这个效果：当鼠标缩放时，精灵的大小不变。。。

很想你！！！！我明白了。

【参考方案1】：

我的默认设置是，精灵根据它们与透视相机的距离进行缩放——就像其他对象一样。

如果您不希望它们缩放，您可以覆盖第二个精灵场景，使用正交相机渲染。见http://threejs.org/examples/webgl_sprites.html。

它被称为“平视显示器”或 HUD。

编辑：SpriteMaterial 现在有一个sizeAttenuation 属性，您可以选择将其设置为false。默认为true。

three.js r.96

【讨论】：

HUD？？对不起！看不懂HUD是什么。。能解决这个问题吗？

对了，使用透视相机时，可以达到这个效果吗？

1. HUD：参见en.wikipedia.org/wiki/HUD_(video_gaming) 2. 您使用透视相机渲染场景，然后在此之上使用正交相机渲染精灵——就像我引用的示例一样。

【参考方案2】：

要使用透视相机实现这一点，您可以根据精灵与相机的距离与一些“虚拟距离”之间的比率设置精灵比例因子。

在下面的示例中，virtual_d 用于在渲染之前设置精灵和相机之间的固定虚拟“距离”

var scale = sprite.position.distanceTo(camera.position) / virtual_d;
scale = Math.min(you_max_scale_value, Math.max(you_min_scale_value, scale));

sprite.scale.set(scale, scale, scale);

但是，如果您不希望出现任何失真，例如视野较大时的边界，请改用正交相机。