three.js javascript/raycasting 代码与视网膜显示 mac 不兼容
three.js javascript/raycasting code not compatible with retina display macs
有没有人解释为什么下面的交互式立方体在视网膜显示器 mac 上不起作用?
http://mrdoob.github.io/three.js/examples/canvas_interactive_cubes.html
该代码适用于 Firefox、Safari 和 Chrome 非视网膜 macbook,但不适用于具有视网膜显示屏的 macs。
Mac:macbook pro 视网膜显示屏、imac 视网膜显示屏、macbook pro 2011(无视网膜显示屏)所有 运行 Yosemite
浏览器版本:Firefox 36、Safari 版本 8.0.3 (10600.3.18)、Chrome 版本 40.0.2214.115(64 位)
在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
有没有人解释为什么下面的交互式立方体在视网膜显示器 mac 上不起作用?
http://mrdoob.github.io/three.js/examples/canvas_interactive_cubes.html
该代码适用于 Firefox、Safari 和 Chrome 非视网膜 macbook,但不适用于具有视网膜显示屏的 macs。
Mac:macbook pro 视网膜显示屏、imac 视网膜显示屏、macbook pro 2011(无视网膜显示屏)所有 运行 Yosemite
浏览器版本:Firefox 36、Safari 版本 8.0.3 (10600.3.18)、Chrome 版本 40.0.2214.115(64 位)
在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