使用ThreeJS获取球体纹理上的点击位置 [英] Getting click position on a sphere's texture with 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获取球体纹理上的点击位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！