title: how get correct clicked pixel coordinates in the image texture used in three js globe
body: <p>I am trying do correct mapping from three js earth globe (3d world or three js world) to 2D image (x, y pixel coordinates) by mouse click,
  Globe ---&gt; click --&gt; get the x, y coords of clicked pixel in texture.png file.
  Before I used sphere geometry with one image texture it didn't work,
  Now I used box Geometry with six split image textures then project the cube to a sphere. The mapping still not work.</p>
  <p>The <a href="https://codepen.io/sebaaismail/pen/YzQyGdo" rel="nofollow noreferrer">complete code is here</a>.</p>
  <p>The x somehow is good and correct the y is not correct.<br />
  My problem:</p>
  <ol>
  <li>If click on point on the globe how know which texture file is clicked from the six?</li>
  <li>How get the correct coordinates of y of the pixel clicked
  What is wrong with my code,
  I used one from the six texture to just debug the results as you see here if click on red point must have something close to : {x: 374, y: 366} but actually having x: 376 (it looks good), the y is far 219.
  <a href="https://i.stack.imgur.com/h152G.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h152G.jpg" alt="enter image description here" /></a></li>
  </ol>
  <p>important portion of code:</p>
  <pre><code>const geometry = new THREE.BoxGeometry(
      boxWidth,
      boxHeight,
      boxDepth,
      64,
      64,
      64
    );
  
    //*
    // morph box into a sphere
    for (var i = 0; i &lt; geometry.vertices.length; i++) {
      geometry.vertices[i].normalize().multiplyScalar(1); // or whatever size you want
    }
  
    computeGeometry(geometry);
  
    computeVertexNormals(geometry);
  var materialArray = [
      new THREE.MeshLambertMaterial({
        map: lefTexture,
      }), ... ];
  
    var sphereMaterial = new THREE.MeshFaceMaterial(materialArray);
   var sphere = new THREE.Mesh(geometry, sphereMaterial);
  
    scene.add(sphere);
  
  
  function onDocumentMouseDown(event) {
    event.preventDefault();
    const mouse = new THREE.Vector3();
    let target = new THREE.Vector2();
  
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  
    //2. set the picking ray from the camera position and mouse coordinates
    raycaster.setFromCamera(mouse, camera);
  
    //3. compute intersections
    var intersects = raycaster.intersectObjects(scene.children);
    console.log(
      `textureWidth: ${textureWidth}, textureHeight: ${textureHeight}`
    );
  
    //* v1 and v2
    target = {
      x: Math.round(intersects[0].uv.x * textureWidth),
      y: textureHeight - Math.round(intersects[0].uv.y * textureHeight),
    };
  
    console.log(&quot;Height: &quot;, canvas.height);
    //*/
    console.log(&quot;target: &quot;, target);
    console.log(&quot;red should 374 x 366&quot;);
  }
  </code></pre>