屏幕坐標轉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;

的意思。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的threejs坐标转换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。