屏幕坐标转为为空间坐标
应用场景:射线检测,使用鼠标点击屏幕,获取一个屏幕坐标A(x,y),必须转换为空间坐标才能在threejs中使用。
示例代码:
var mouse=new THREE.Vector2();
mouse.x=(event.clientX/window.innerWidth)*2-1;
mouse.y=-(event.clientY/window.innerHeight)*2+1;
设一点A在屏幕坐标中为(x,y),且在空间坐标系中的位置类似平面坐标系的第一象限为(a1,b1),则
x=event.clientX;
y=event.clientY;
a=x-window.innerWidth/2;
b=window.innerHeight/2-y;
因空间坐标系的值分布在[-1,1]上,所有还需要进行归一化运算(标准化)
a1=a/(window.innerWidth/2)=(2*x)/window.innerWidth-1;
b1=b/(window.innerHeight/2)=1-(2*y)/window.innerHeight;
所以最终结果整理得:
a1=(event.clientX/window.innerWidth)*2-1;
b1=-(event.clientY/window.innerHeight)*2+1;
同理,根据象限的正负,最后结果都能化为上式。
空间坐标转为屏幕坐标
应用场景:用于标记显示物体属性,如将一个三维坐标动态赋予给div标签。
示例:
var halfWidth=window.innerWidth/2;
var halfHeight=window.innerHeight/2;
var vec3=new THREE.Vector3(x,y,z);
var posi=vec3.project(camera);
$("#div_1").css({
left:posi.x*halfWidth+halfWidth,
top:-posi.y*halfHeight+halfHeight,
});
关键一步:vector.project(camera) ,表示将该三维坐标投影到视角相机平面上,变成一个二维坐标,结果为一个单位向量(标准向量),值的范围是[-1,1]。
证明:
posi的结果:
posi.x=(event.clientX/window.innerWidth)*2-1;
posi.y=-(event.clientY/window.innerHeight)*2+1;
求出屏幕坐标系的A(x,y)
x=event.clientX;
y=event.clientY;
所以
x=(posi.x+1)*(window.innerWidth/2);
y=(1-posi.y)*(window.innerHeight/2);
var halfWidth=window.innerWidth/2;
var halfHeight=window.innerHeight/2;
最后化为:
x=posi.x*halfWidth+halfWidth;
y=-posi.y*halfHeight+halfHeight;