threejs坐标转换教程

屏幕坐标转three.js坐标

将屏幕坐标转变成threejs空间坐标：

function transtothreecoord(x,y){
        let mouse = new three.vector3();
        mouse.x = (x/window.innerwidth)*2 -1;
        mouse.y = -(y/window.innerheight)*2 + 1;
       return mouse;
}

注意：在实际使用中，画布的宽高度并不一定是window.innerwidth或window.innerheight，要根据画布实际的宽高度进行替换

推导过程如下：

上图中的式子化简一下就能得到transtothreecoord中的公式

three.js坐标转屏幕坐标

将three.js三维坐标转换成屏幕上的二维坐标

/**
* 将three.js三维坐标转换成屏幕上的二维坐标
* @param three.vector3 vector three.js三维坐标
* @return {x:int,y:int} 屏幕坐标
*/
function transtoscreencoord(vector) {
    var screencoord = {};
    vector.project(camera);
    screencoord.x = (0.5 + vector.x / 2) * window.innerwidth; 
    screencoord.y = (0.5 - vector.y / 2) * window.innerheight;
    return screencoord;
}

注意：在实际使用中，画布的宽高度并不一定是window.innerwidth或window.innerheight，要根据画布实际的宽高度进行替换

接下来解释一下这个转换的过程：

vector.project(camera) 这句的意思是，将一个三维坐标，投影到相机平面上，使之变成一个二维坐标。需要注意的是，投影得到的结果是一个标准向量(或者叫单位向量)，其值是限定在[-1,1]范围内的。并且，这个向量是定义在以屏幕中心为原点的坐标系里的，这个坐标系和屏幕坐标系的关系，就像下图一样：

假如经过投影之后的点就是上图中的点a(0.3,0.5)，屏幕坐标系是sx-s0-sy,相机平面坐标系是tx-t0-ty,坐标系的各项参数已经标在图上，试着求a点在屏幕坐标系中的坐标。你求一遍的话，就会理解

screencoord.x = (0.5 + vector.x / 2) * window.innerwidth; 
screencoord.y = (0.5 - vector.y / 2) * window.innerheight;

的意思。