Currently using r71, I am facing a challenge where I need to click to raycast and scale a THREE.Geometry
plane based on a user uploaded image. Additionally, I am looking to retrieve the barycentric coordinates of a point inside the clicked triangle on the mesh.
Although there is a function called
THREE.Triangle.barycoordFromPoint (point, optionalTarget)
, I am not achieving the desired outcome possibly due to the scaling of the mesh according to the uploaded image.
var scaleRatio = 0.1;
var loader = new THREE.OBJLoader();
loader.load( 'obj/plano_tri.obj', function(object) {
var scaleTexture = 1;
var 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 approach involves converting the Face3 indexes acquired through raycasting into a triangle and then invoking the function with the point from the 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 ) ;
Upon executing console.log( bary )
, I receive
T…E.Vector3 {x: 11.585726082148518, y: 27.99652418990989, z: -38.58225027205841}
which appears incorrect as the values are unusually large.
I am seeking guidance on how to accurately obtain the barycentric coordinates from the intersection point within the scaled mesh triangle.
Appreciate your assistance.