使用 ThreeJS 获取球体纹理上的点击位置

问题描述

目前:我有一个球体，上面有一个绕 y 轴旋转的纹理.我还有在 3D 空间中点击的位置，以及球体上的旋转位置(我认为).

目标:获取纹理上的位置，例如:我想获取我单击的图像的哪个方块.(参见下面的示例球体和图像)

在实践中，我不会使用这张图片，但我觉得这是一个很好的起点.

基于

图像包装:

解决方案

实际上，你不需要计算任何东西.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);

Currently: I have a sphere with a texture on it that rotates around the y axis. I also have the position that was clicked in 3D space, as well as the rotated position on the sphere (I think).

Goal: Get the position on the texture, for example: I want to get what square of the image I click on. (See Example Sphere and image below)

---

In practice, I won't be using this image but I felt it would be a good starting point.

Code For getting position on the sphere based on 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);
    }
}

Sphere:

Image Wrapping it:

解决方案

Actually, you don't need to calculate anything. intersects[0].uv gives you the the UV coordinates.

Texture coordinates range always from 0.0 to 1.0. They are unitless. So same texture with another resolution will fit as well.

So, if you need to know the pixel position of your click, do:

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

这篇关于使用 ThreeJS 获取球体纹理上的点击位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！