How to set a Laser point over a world sphere mesh (raycasting)

Questions
,
1

hi! I am new in threejs. I am already doing a world textured map(using D3 and THREE.js) on React. The world is already working but I need to put a red dot on the world mesh when cursor is over it, and later check it this point is over a country and highlight it. This is how I am doing it:

var wireframedMesh = new THREE.Mesh(new THREE.SphereGeometry(200, sphereSegments,sphereSegments), wireframeMaterial)
world.add(wireframedMesh)
mouseVector.x = mouse.x
mouseVector.y = mouse.y
raycaster.setFromCamera(mouseVector, camera)
let target = raycaster.intersectObject(world, true)
target.length > 0 && highlightCounty(pickedBaryCoord)
}

var highlightCounty = (barycoord) => {  
var map, material;
Geometry/material for the point that follows cursor
var latlng = convertoLatLng(barycoord,200);  // Get point in  latitude/longitude coordinates format
          

var country = geo.search(latlng[0], latlng[1]);
if (laserPoint) {
    wireframedMesh.remove(laserPoint);
}
laserPoint = new THREE.Mesh(pointGeometry, pointMaterial);
laserPoint.position.copy(convertToXYZ(latlng, 200));
wireframedMesh.add(laserPoint);  
} 

function convertoLatLng(barycoord, radius) {
  radius = radius || 200;
  barycoord.normalize();

    var lng = -( Math.atan2( -barycoord.z, -barycoord.x ) ) - Math.PI / 2;

    //to bind between -PI / PI
    if( lng < - Math.PI )lng += Math.PI * 2;

  
    var p = new THREE.Vector3( barycoord.x, 0, barycoord.z );
    //project on the unit sphere
    p.normalize();
    
var lat = Math.acos( p.dot( barycoord ) );

if( barycoord.y < 0 ) lat *= -1;
  return [lng, lat ];
}

export function convertToXYZ(point, radius) {
  radius = radius || 200;

  var out = new THREE.Vector3();
  //flips the Y axis
  var lat = Math.PI / 2 - point[0]

    //distribute to sphere
    out.set(
                Math.sin( lat ) * Math.sin( point[1] ) * radius,
                Math.cos( lat ) * radius,
                Math.sin( lat ) * Math.cos( point[1] ) * radius
    );

    return out;
}


I had to edit the raycaster prototipe to get  barycoords

THREE.Mesh.prototype.raycast = (function () {
  var originalRaycast = THREE.Mesh.prototype.raycast;
  var localPoint = new THREE.Vector3 (), coordinates = new THREE.Vector3 ();

  return function (raycaster, intersects) {
          originalRaycast.call (this, raycaster, intersects);
          for (var i = 0, n = intersects.length; i < n; i++) {
              if (this === intersects[i].object) {
                  this.worldToLocal (localPoint.copy (intersects[i].point));               
                  var face = intersects[i].face, faceIndex = intersects[i].faceIndex
                  // before THREE.Triangle.barycoordFromPoint
                  THREE.Triangle.getBarycoord(localPoint,
                      this.geometry.vertices[face.a],
                      this.geometry.vertices[face.b],
                      this.geometry.vertices[face.c],
                      coordinates);
                
                  pickedBaryCoord = coordinates
           }}}
})();

The laserPoint is adding on the wireframe mesh but it is not accurate with the mouse position. Anyone with some help or reference? Thanks!

2

I assume the core issue is just trying to translate the mouse cursor position onto a local mesh

if so, could it be possible your worldToLocal is not being called on the correct mesh object?
Have you tried using the parent.
this.parent.worldToLocal( … )

3

Hey! I recently solve the problem today.

'this.worldToLocal(…)" is set inside the edited raycast prototipe function, and that edited function is triggered just when raycaster.intersectObject(…) is called, so this.worldToLocal(…) aims to the correct mesh.

The issue was this: THREE.Triangle.getBarycoord(…) was returning another kind of point. So, I still dont know how this method works but I replaced with another solution:

 var pickerPoint;

THREE.Mesh.prototype.raycast = ( function () {
  var originalRaycast = THREE.Mesh.prototype.raycast;
  var localPoint = new THREE.Vector3 ()

 return function (raycaster, intersects) {
      originalRaycast.call (this, raycaster, intersects);
      for (var i = 0, n = intersects.length; i < n; i++) {
          if (this === intersects[i].object) {
              this.worldToLocal (localPoint.copy (intersects[i].point));       
          
              var face = intersects[i].face, faceIndex = intersects[i].faceIndex

               // Get the vertices intersected
              let a = this.geometry.vertices[face.a];
              let b = this.geometry.vertices[face.b];
              let c = this.geometry.vertices[face.c];

              // Averge them together
              let point = {
                x: (a.x + b.x + c.x) / 3,
                y: (a.y + b.y + c.y) / 3,
                z: (a.z + b.z + c.z) / 3
              };

              pickerPoint = point
       }}}})();

Problem solved :wink: