Three.js - 對象跟隨鼠標位置

Question

我在Three.js創建一個球體，它必須在它移動時跟隨鼠標，如本例所示 。 處理鼠標移動的功能如下：

function onMouseMove(event) {

    // Update the mouse variable
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

    // Make the sphere follow the mouse
    mouseMesh.position.set(event.clientX, event.clientY, 0);
};

我在其中附加了一個包含完整代碼的JSFiddle ，在那里你可以看到根據DOM， mouseMesh是未定義的。 你知道我做錯了什么嗎？

提前感謝您的回復！

Answer 1

要使球體跟隨鼠標，您需要將屏幕坐標轉換為threejs世界位置。 參考鏈接 。

更新了小提琴

var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
vector.unproject( camera );
var dir = vector.sub( camera.position ).normalize();
var distance = - camera.position.z / dir.z;
var pos = camera.position.clone().add( dir.multiplyScalar( distance ) );

Answer 2

你應該使用THREE.Raycaster。 設置intersectObjects列表時，您將能夠獲得與光線相交的對象數組。 因此，您可以從返回列表中的“已點擊”對象中獲取位置

基本上，您需要從3D世界空間和2D屏幕空間投影。 渲染器使用projectVector將3D點轉換為2D屏幕。 unprojectVector基本上用於將2D投影反向投影到3D世界中。 對於這兩種方法，您都可以通過相機查看場景。 因此，在此代碼中，您將在2D空間中創建規范化矢量。