threejs二维坐标与三维坐标的互转

屏幕坐标转为为空间坐标

应用场景:射线检测,使用鼠标点击屏幕,获取一个屏幕坐标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;

《threejs二维坐标与三维坐标的互转》
设一点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;
    原文作者:凌风子夜
    原文地址: https://blog.csdn.net/qq_41741576/article/details/101680765
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞