坐標系轉換

下面函數可以將鼠標所在點的屏幕坐標轉化成一個Threejs三維坐標：

convertTo3DCoordinate(clientX,clientY){var mv = new THREE.Vector3((clientX / window.innerWidth) * 2 - 1,-(clientY / window.innerHeight) * 2 + 1,0.5 );mv.unproject(this.camera); //這句將一個向量轉成threejs坐標return mv;}

其中：

var mv = new THREE.Vector3((clientX / window.innerWidth) * 2 - 1,-(clientY / window.innerHeight) * 2 + 1,0.5 );

第三個參數是可以改變的，并且改變后獲得的threejs坐標的x,y，z數值上會改變，但是差值上不會改變。

研究坐標間關系可用代碼：

convertTo3DCoordinate(clientX,clientY){console.log("cx: " + clientX + ", cy: " + clientY);var mv = new THREE.Vector3((clientX / window.innerWidth) * 2 - 1,-(clientY / window.innerHeight) * 2 + 1,0.5 );console.log("mx: " + mv.x + ", my: " + mv.y+", mz:"+mv.z);mv.unproject(this.camera);console.log("x: " + mv.x + ", y: " + mv.y+", z:"+mv.z);return mv;}

讓物體跟隨鼠標移動的方法

首先在鼠標按下時，計算鼠標的位置在threejs中的坐標，然后將物體的位置設置為鼠標的位置：

function onDocumentMouseMove(event){event.preventDefault();var mouse = convertTo3DCoordinate(event.clientX,event.clientY);group.position.copy(mouse) }

總結

以上是生活随笔為你收集整理的threejs中坐标系转换和实现物体跟随鼠标移动的全部內容，希望文章能夠幫你解決所遇到的問題。

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