ThreeJS渲染尺寸非浏览器窗体尺寸时选中会有问题方案解决

1、通过重新计算解决ThreeJS渲染尺寸非浏览器窗体尺寸时问题

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

改为：

mouse.x = ((event.clientX - PX) / container.clientWidth) * 2 - 1;// 标准设备横坐
标
mouse.y = -((event.clientY - pY) / container.clientHeight) * 2 + 1;// 标准设备
纵坐标

其中：
PX为该dom距离浏览器左侧边缘的距离
Py为该dom距离浏览器上册边缘的距离
container.clientWidth为该dom的宽度
container.clientHeight为该冬眠的高度

演算过程：

设A点为点击点(x1,y1),x1=e.clintX, y1=e.clientY，该dom距离浏览器左边缘距离为px，距离浏览器
右边缘距离为py
设A点在世界坐标中的坐标值为B(x2,y2);

由于A点的坐标值的原点是以屏幕左上角为(0,0);
我们可以计算可得以屏幕中心为原点的B'值
x2' = x1 - innerWidth/2-px
y2' = innerHeight/2 - y1+py
又由于在世界坐标的范围是[-1,1],要得到正确的B值我们必须要将坐标标准化
x2 = (x1 - innerWidth-px)/2/(clientwidth/2) = ((x1 - PX) / clientWidth) * 2 - 1
同理得 y2 = -((y1 - pY) / clientHeight) * 2 + 1;

ThreeJS渲染尺寸非浏览器窗体尺寸时选中会有问题方案解决DEMO下载

2、或者使用iframe标签的形式

通过iframe标签，我们重新嵌入一个网页，这样使得我们的每个渲染尺寸都是浏览器窗体尺寸。