使用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获得球体纹理的点击位置

回答

相关问题