使用ThreeJS獲得球體紋理的點擊位置

當前：我有一個帶有紋理的球體，它圍繞y軸旋轉。我還擁有在3D空間中點擊的位置，以及球體上的旋轉位置（我認爲）。使用ThreeJS獲得球體紋理的點擊位置

目標：獲取紋理上的位置，例如：我想要得到我點擊的圖像的平方。（請參閱下面的示例球體和圖像）

實際上，我不會使用這個圖像，但我認爲這將是一個很好的起點。

代碼爲獲得基於this example的球位置：

function onDocumentMouseDown(event) { 
    event.preventDefault(); 
    mouse.x = (event.clientX/renderer.domElement.clientWidth) * 2 - 1; 
    mouse.y = - (event.clientY/renderer.domElement.clientHeight) * 2 + 1; 
    raycaster.setFromCamera(mouse, camera); 
    var intersects = raycaster.intersectObjects(objects); 
    if (intersects.length > 0) { 
     console.log(intersects[ 0 ].point); 
     var vector = new THREE.Vector3(1, 0, 0); 

     var axis = new THREE.Vector3(0, 1, 0); 
     var angle = objects[ 0 ].rotation.y; 

     //Rotate Point 
     intersects[ 0 ].point = vector.applyAxisAngle(axis, angle); 

     console.log(intersects[ 0 ].point); 
    } 
}

球：

圖片結束語：

來源

2016-01-28 Chris

提示：你能得到你的點擊球點的UV COORDS？ – gaitat

我不太確定UV是什麼，我知道它與紋理（UV地圖）有關，我會研究它。謝謝！ – Chris

快速問題，我在UV映射https://en.wikipedia.org/wiki/UV_mapping中查看維基鏈接，它提到'對於球體上的任何點P，計算\ hat d，即從P到球體的原點。「如果球體以0,0爲中心 - 這是否意味着'P == D'？ – Chris

其實，你並不需要計算任何東西。 intersects[0].uv爲您提供了UV座標。

紋理座標範圍始終從0.0到1.0。他們無能爲力。因此與其他分辨率相同的紋理也適用。

所以，如果你需要知道你點擊的像素位置，這樣做：

var pixelX = Math.round(intersects[0].uv.x * textureWidth); 
var pixelY = Math.round(intersects[0].uv.y * textureHeight);

來源

2016-01-28 23:05:31 Brakebein

非常感謝！對不起，我花了很長時間回到你身邊，但這正是我所需要的 – Chris

使用ThreeJS獲得球體紋理的點擊位置

回答

相關問題