https://i.sstatic.net/iQK6O.jpg
Hey there, currently I'm in the process of developing a project utilizing Three.js. The main concept involves allowing the user to interact with tessellated faces by hovering over them. Each mesh should be pushed away upon intersection with an invisible sphere and return to its original position when outside of that area. My inspiration comes from referencing this and this example, but I've hit a roadblock as I struggle to implement this functionality within Three.js.
Currently, my code allows for hovering over each face of a mesh, turning it red temporarily and reverting back to its original color once the mouse is no longer hovering. However, I am unable to replicate this behavior with regards to positioning. Here's where I suspect the issue lies:
if (intersects.length > 0) {
// if the closest object intersected is not the currently stored intersection object
if (intersects[0].object != INTERSECTED) {
// Restore previous intersection objects (if they exist) to their original color
if (INTERSECTED) {
INTERSECTED.face.color.setHex(INTERSECTED.currentHex);
}
// Intersected elements
INTERSECTED = intersects[0];
var intGeometry = INTERSECTED.object.geometry;
var intFace = INTERSECTED.face;
// Difference between intersected faces and geometry
INTERSECTED.currentHex = intFace.color.getHex();
intFace.color.setHex(0xc0392b);
intGeometry.colorsNeedUpdate = true;
// Identify the vertices of each face
var intVertices = intGeometry.vertices;
var v1 = intVertices[intFace.a],
v2 = intVertices[intFace.a],
v3 = intVertices[intFace.a];
// Calculate the centroid of the selected face
var intPosition = new THREE.Vector3();
intPosition.x = (v1.x + v2.x + v3.x) / 3;
intPosition.y = (v1.y + v2.y + v3.y) / 3;
intPosition.z = (v1.z + v2.z + v3.z) / 3;
console.log(intPosition);
}
}
Through the use of console.log(), I can observe that the faces are being correctly identified along with their positions. But unfortunately, the sphere does not track the mouse accurately, and I require assistance with positioning. Below you'll find a link to a JSFiddle containing the complete code snippet.