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

По умолчанию спрайты масштабируются в соответствии с их расстоянием от перспективной камеры - как и другие объекты.

Если вы не хотите, чтобы они масштабировались, вы можете наложить вторую сцену спрайтов, созданную с помощью орфографической камеры. См. http://threejs.org/examples/webgl_sprites.html.

Это называется "отображение головы", или HUD.

РЕДАКТИРОВАТЬ: SpriteMaterial теперь имеет sizeAttenuation свойство, которое вы можете установить false, По умолчанию true,

three.js r.96

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

Однако, если вы не хотите никаких искажений, например, в границах, когда поле зрения большое, используйте вместо этого орфографическую камеру.