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

Question

在three.js中,当鼠标被缩放时,文本将被放大并相应地减小.

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

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

Answer 1

要使用透视摄像机实现此目的,您可以根据精灵距摄像机的距离与某些"虚拟距离"之间的比率设置精灵比例因子.

在下面的示例中,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);

但是,如果您不想要任何失真,例如在视野较大的边框中,请使用正交相机.

Answer 2

我的默认值,精灵根据它们与透视相机的距离进行缩放 - 就像其他对象一样.

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

它被称为"抬头显示器"或HUD.

编辑:SpriteMaterial现在有一个sizeAttenuation属性,您可以选择设置为false.默认是true.

three.js r.96