three.js код javascript/raycasting не совместим с отображением сетчатки macs

Question

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

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

код работает в Firefox, Safari и Chrome в не сетчатке MacBook, но не работает в Маках с дисплеем сетчатки глаза.

Маков: Macbook Pro сетчатки дисплей, дисплей IMAC сетчатки глаза, не Macbook Pro 2011 (без сетчатки дисплей) все запущенные Yosemite

Браузер версии: Firefox 36, Safari Версия 8.0.3 (10600.3.18), Chrome Версия 40,0 .2214.115 (64-разрядный)

Answer 1

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

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

Затем в interactive cubes example, нормированные координаты мыши задаются следующим образом:

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

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

Обратите внимание, что в interactive particles example нормализованные координаты мыши вычисляются по-разному, и проблем нет.

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; 

Three.js R.70