three.js javascript/raycasting代碼不兼容視網膜顯示mac

Question

有沒有人有解釋爲什麼下面的交互式多維數據集不能在視網膜顯示mac上工作？

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

代碼工作在Firefox，Safari和Chrome在非視網膜的MacBook，但與視網膜顯示的Mac電腦無法正常工作。

Mac電腦：MacBook Pro的Retina顯示屏，iMac的視網膜顯示器，MacBook Pro的2011（無視網膜顯示），所有正在運行的優山美地

瀏覽器版本：火狐36，Safari瀏覽器版本8.0.3（10600.3.18），Chrome的版本40.0 .2214.115（64位）

Answer 1

在renderer.setSize()中，渲染器的domElement或canvas，按比例縮放像素比例。

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