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用于设置固定的虚拟距离＆＃34;在渲染之前精灵和相机之间

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

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

2 个答案: