CODEWITHSUNDEEP
javascriptthree.js
Rui d'Orey
Rui d'Orey

Reputation: 1022

Threejs - How to raycast and get barycentric coordinates of triangle in mesh?

I'm using r71 and I need to click to raycast to scale a THREE.Geometry plane according to a user uploaded photo and get the barycentric coordinates of point inside the clicked triangle on the mesh. I know there is a THREE.Triangle.barycoordFromPoint (point, optionalTarget) function but I don't get the desired result I guess because the mesh is scaled according to the image uploaded. 

var scaleRatio = 0.1;

var loader = new THREE.OBJLoader();

loader.load( 'obj/plano_tri.obj', function(object) {

    var scaleTexture = 1;

    scaleGeometryX = texture.image.width / texture.image.height ;

     var desiredHeight = 144 * 0.08;

     if (texture.image.height > texture.image.width) {

          scaleTexture = desiredHeight / texture.image.height;

     }

      var plane = object;

      plane.scale.setX( scaleRatio * scaleGeometryX );

      plane.scale.setY( scaleRatio );

      scene.add( plane );

   });

My code attempts to transform the Face3 indexes obtained at the raycast in a triangle and then call the function with the point from raycast:

raycaster.setFromCamera( mouse, camera );

intersects = raycaster.intersectObject( plane, true );

var face = plane.geometry.faces[ intersects[0].faceIndex ];

var faceX = plane.geometry.vertices[ face.a ];

var faceY = plane.geometry.vertices[ face.b ];

var faceZ = plane.geometry.vertices[ face.c ];

var triangle = new THREE.Triangle ( faceX, faceY, faceZ );

var bary = triangle.barycoordFromPoint( raycastLast[0].point ) ;

A console.log( bary ) outputs T…E.Vector3 {x: 11.585726082148518, y: 27.99652418990989, z: -38.58225027205841} that seems incorrect as the values are very big.

How do I can get the correct barycentric coordinates from the intersected point inside the triangle of the scaled mesh?

Thank you

Upvotes: 0

Views: 1452

Answers (1)

Rui d'Orey
Rui d'Orey

Reputation: 1022

I managed to understand how to get the correct values. The triangle UVs needed to be scaled also:

var faceX = new THREE.Vector3( plane.geometry.vertices[faceId.a].x  / ( 1/scaleRatio ) * scaleGeometryX , plane.geometry.vertices[faceId.a].y  / (1/scaleRatio ) , 0    );

var faceY = new THREE.Vector3( plane.geometry.vertices[faceId.b].x  / ( 1/scaleRatio ) * scaleGeometryX , plane.geometry.vertices[faceId.b].y  / (1/scaleRatio ) , 0    );

var faceZ = new THREE.Vector3( plane.geometry.vertices[faceId.c].x  / ( 1/scaleRatio ) * scaleGeometryX , plane.geometry.vertices[faceId.c].y  / (1/scaleRatio ) , 0   );

var triangle = new THREE.Triangle( faceX , faceY , faceZ );

var bary = triangleBar.barycoordFromPoint (intersects[ 0 ].point);

Upvotes: 1

Related Questions