1let vertexA;
2let vertexB;
3let vertexC;
4let intersection;
5const radius = 3;
6const color = new THREE.Color('red');
7const positionsAttr = mesh.geometry.attributes.position;
8const colorAttr = mesh.geometry.attributes.color;
9
10// on every mouseMove event, do below:
11
12vertexA = new THREE.Vector3();
13vertexB = new THREE.Vector3();
14vertexC = new THREE.Vector3();
15intersection = raycaster.intersectObject(mesh).point;
16
17// function to detect tangent edge
18function isEdgeTouched(v1, v2, point, radius) {
19  const line = new THREE.Line3();
20  const closestPoint = new THREE.Vector3();
21  line.set(v1, v2);
22  line.closestPointToPoint(point, true, closestPoint);
23  return point.distanceTo(closestPoint) < radius;
24}
25
26// function to color a face
27function colorFace(faceIndex) {
28  colorAttr.setXYZ(faceIndex * 3 + 0, color.r, color.g, color.b);
29  colorAttr.setXYZ(faceIndex * 3 + 0, color.r, color.g, color.b);
30  colorAttr.setXYZ(faceIndex * 3 + 0, color.r, color.g, color.b);
31  colorAttr.needsUpdate = true;
32}
33
34
35// iterate over each face, color it if tangent
36for (let i=0; i < (positionsAttr.count) /3); i++) {
37  vertexA.fromBufferAttribute(positionsAttr, i * 3 + 0);
38  vertexB.fromBufferAttribute(positionsAttr, i * 3 + 1);
39  vertexC.fromBufferAttribute(positionsAttr, i * 3 + 2);
40  if (isEdgeTouched(vertexA, vertexB, point, radius)
41    || isEdgeTouched(vertexA, vertexB, point, radius)
42    || isEdgeTouched(vertexA, vertexB, point, radius)) {
43    colorFace(i);
44}
45

1const sphere = new THREE.Sphere(intersection, radius);
2
3// now checking if each vertex of a face is within sphere
4// if all are, then color the face at index i
5for (let i=0; i < (positionsAttr.count) /3); i++) {
6  vertexA.fromBufferAttribute(positionsAttr, i * 3 + 0);
7  vertexB.fromBufferAttribute(positionsAttr, i * 3 + 1);
8  vertexC.fromBufferAttribute(positionsAttr, i * 3 + 2);
9  if (sphere.containsPoint(vertexA)
10    && sphere.containsPoint(vertexA)
11    && sphere.containsPoint(vertexA)) {
12    colorFace(i);
13}
14