Hello there! I've been immersed in the world of three.js, dealing with loading models using THREE.JSONLoader. Currently, I'm faced with the task of selecting these objects and their faces, which I've managed to do successfully. Now, my goal is to retrieve the vertices of the selected face. Take a look at the code snippet below:
intersections = raycaster.intersectObjects( objects );
if ( intersections.length > 0 ) {
if ( intersected != intersections[ 0 ].object ) {
intersected = intersections[ 0 ].object;
/*HERE*/
console.log("Hit-face a @ " + intersections[0].face.a);
console.log("Hit-face b @ " + intersections[0].face.b);
console.log("Hit-face c @ " + intersections[0].face.c);
var faceColorMaterial = new THREE.MeshBasicMaterial(
{ color: 0xffffff, vertexColors: THREE.FaceColors } );
var sphereGeometry = new THREE.SphereGeometry( 0.1, 32, 16 );
var sphereGeometryf = new THREE.SphereGeometry( 3, 32, 16 );
var sphereGeometrys = new THREE.SphereGeometry( 3, 32, 16 );
var sphereGeometryt = new THREE.SphereGeometry( 3, 32, 16 );
var sphere = new THREE.Mesh( sphereGeometry, faceColorMaterial );
sphere.position.set(intersections[0].point.x, intersections[0].point.y, intersections[0].point.z);
var spheref = new THREE.Mesh( sphereGeometryf, faceColorMaterial );
spheref.position.set(intersections[0].object.geometry.vertices[intersections[0].face.a].x + intersections[0].object.position.x,
intersections[0].object.geometry.vertices[intersections[0].face.a].y + intersections[0].object.position.y,
intersections[0].object.geometry.vertices[intersections[0].face.a].z + intersections[0].object.position.z);
var spheres = new THREE.Mesh( sphereGeometrys, faceColorMaterial );
spheres.position.set(intersections[0].object.geometry.vertices[intersections[0].face.b].x + intersections[0].object.position.x,
intersections[0].object.geometry.vertices[intersections[0].face.b].y + intersections[0].object.position.y,
intersections[0].object.geometry.vertices[intersections[0].face.b].z + intersections[0].object.position.z);
var spheret = new THREE.Mesh( sphereGeometryt, faceColorMaterial );
spheret.position.set(intersections[0].object.geometry.vertices[intersections[0].face.c].x + intersections[0].object.position.x,
intersections[0].object.geometry.vertices[intersections[0].face.c].y + intersections[0].object.position.y,
intersections[0].object.geometry.vertices[intersections[0].face.c].z + intersections[0].object.position.z);
scene.add(sphere);
scene.add(spheref);
scene.add(spheres);
scene.add(spheret);
/*HERE*/
}
}
In this example, the "sphere" represents the intersection point where the Ray meets the 1st object.
The visual elements spheref, spheres, and spheret are used for visualizing the vertices. However, when I add these spheres to those vertices, they appear misplaced.
This method works with the provided example, but when applied to loaded objects, it seems to encounter issues.
If you're interested, you can explore this alternative code sample, replacing the onDocumentMouseDown event with the snippet above:
While promising, this method is not entirely compatible with loaded objects.