Код javascript/raycasting three.js несовместим с Mac с дисплеем Retina

Есть ли у кого-нибудь объяснение, почему интерактивные кубы ниже не работают на компьютерах с дисплеем Retina?

http://mrdoob.github.io/three.js/examples/canvas_interactive_cubes.html

Код работает в Firefox, Safari и Chrome на MacBook без сетчатки, но не работает на Mac с дисплеем Retina.

Маки: дисплей macbook pro retina, дисплей imac retina, macbook pro 2011 (без дисплея retina), все с Yosemite

Версии браузера: Firefox 36, Safari версии 8.0.3 (10600.3.18), Chrome версии 40.0.2214.115 (64-разрядная версия)


javascript three.js raycasting retina-display
person I Heart Beats    schedule 02.03.2015    source источник
comment
Работает ли эта демонстрация three.js? Если это так, я полагаю, что это проблема соотношения пикселей устройства.   -  person WestLangley    schedule 03.03.2015
comment
Демонстрация работает на старом Mac.   -  person I Heart Beats    schedule 03.03.2015
comment
Работает ли демонстрационная версия, на которую я ссылаюсь, на Mac с дисплеем Retina?   -  person WestLangley    schedule 03.03.2015
comment
Здравствуйте, WestLangley, приношу извинения за задержку, да, ваша демонстрация отлично работает и на Mac с дисплеем Retina.   -  person I Heart Beats    schedule 03.03.2015

Ответы (1)


arrow_upward
5
arrow_downward

В renderer.setSize() domElement или холст рендерера масштабируется по соотношению пикселей.

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

Затем в примере интерактивных кубов нормализованные координаты мыши устанавливаются следующим образом:

mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;

Это вызовет проблемы с устройствами, у которых соотношение пикселей не равно 1.

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

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

В качестве обходного пути используйте второй шаблон.

Возможно, нам придется пересмотреть, как обрабатывается соотношение пикселей устройства в будущих версиях библиотеки.

РЕДАКТИРОВАТЬ: @mrdoob предлагает следующий шаблон в качестве решения:

mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

три.js р.70

person WestLangley    schedule 03.03.2015
comment
Просто обратите внимание, что по какой-то причине clientWidth/Height вызовет перекомпоновки. Необязательный подход заключается в кэшировании ширины и высоты и обновлении только при изменении размера/прокрутке (getBoundingClientRect() также можно использовать с элементом, но это также вызывает перекомпоновку :-/). - person ; 01.12.2017