ТРИ. Размер в пикселях с размерами. Затухание ложное. - PullRequest
Новая
       16

ТРИ. Размер в пикселях с размерами. Затухание ложное.

0 голосов
/ 27 января 2020

Я пытаюсь масштабировать спрайты, чтобы размер был определен в пикселях. независимо от камеры FOV и так далее. У меня sizeAttenuation установлен на false, так как я не хочу, чтобы их масштабировали в зависимости от расстояния до камеры, но я борюсь с настройкой масштаба. На самом деле не знаю формулу преобразования, и когда я жестко закодировал шкалу с каким-то числом, это нормально на одном устройстве, а на другом - неправильно. Любой совет или помощь, как получить спрайты с правильным размером на нескольких устройствах? Спасибо

1 Ответ

1 голос
/ 28 января 2020

Исправленный ответ:

Размер спрайта измеряется в мировых единицах. Преобразование мировых единиц в пиксельные единицы может потребовать большого количества вычислений, поскольку оно варьируется в зависимости от поля зрения камеры, расстояния от камеры, высоты окна, плотности пикселей и т. Д. *

Чтобы использовать пиксельные единицы, Я рекомендую переключиться с THREE.Sprite на THREE.Points. Это материал THREE.PointsMaterial имеет свойство размера , которое измеряется в пикселях, если sizeAttenuation установлено на false. Просто имейте в виду, что он имеет ограничение максимального размера в зависимости от аппаратного обеспечения устройства, определенного gl.ALIASED_POINT_SIZE_RANGE.

Мой первоначальный ответ продолжается ниже :

Однако " 1 px "является субъективным измерением в настоящее время, потому что если вы используете renderer.setPixelRatio(window.devicePixelRatio);, то вы получите разные размеры спрайтов на разных устройствах. Например, MacBook имеют соотношение пикселей 2 и выше, некоторые сотовые телефоны имеют соотношение пикселей 3, а настольные мониторы обычно имеют коэффициент 1. Этого можно избежать, если не использовать setPixelRatio, или если вы его используете, вам нужно будет использовать умножение: 

const s = 5;
points.size = s * window.devicePixelRatio;

Еще одна вещь, которую нужно иметь в виду, это то, что спрайтов THREE.Points имеют размеры в пикселях, тогда как сетки имеют размеры в мировых единицах. Поэтому иногда, когда вы уменьшаете окно браузера по вертикали, размер sprite Point остается прежним, но сетки уменьшаются, чтобы поместиться в окне просмотра. Это означает, что спрайт 5px Point займет больше места в маленьком окне, чем в большом мониторе. Если это проблема, убедитесь, что вы используете значение window.innerHeight при расчете sprite Point size.

...