three-mesh-bvh

import { AmbientLight, BufferAttribute, DirectionalLight, Mesh, MeshStandardMaterial, Raycaster, Sphere, TorusKnotGeometry, Vector2 } from 'three';
import { MeshBVH, acceleratedRaycast, INTERSECTED, NOT_INTERSECTED } from 'three-mesh-bvh';

// scene, camera and renderer are initialized here

const light = new DirectionalLight( 0xffffff, 1.5 );
light.position.set( 1, 1, 1 );
scene.add( light, new AmbientLight( 0xffffff, 1.2 ) );

// a torus knot of over half a million triangles, every vertex white to start
const geometry = new TorusKnotGeometry( 1, 0.4, 800, 400 ).toNonIndexed();
const colors = new BufferAttribute( new Float32Array( geometry.attributes.position.count * 3 ).fill( 1 ), 3 );
geometry.setAttribute( 'color', colors );
geometry.boundsTree = new MeshBVH( geometry );

const mesh = new Mesh( geometry, new MeshStandardMaterial( { vertexColors: true, roughness: 0.3 } ) );
mesh.raycast = acceleratedRaycast;
scene.add( mesh );

// hovering paints every triangle within a sphere around the point under the pointer
const raycaster = new Raycaster();
raycaster.firstHitOnly = true;
const pointer = new Vector2();
const hits = [];
const brush = new Sphere( undefined, 0.2 );
const paint = {
	intersectsBounds: box => brush.intersectsBox( box ) ? INTERSECTED : NOT_INTERSECTED,
	intersectsTriangle: ( triangle, index ) => {

		if ( ! triangle.intersectsSphere( brush ) ) return;
		for ( let i = 3 * index; i < 3 * index + 3; i ++ ) {

			colors.setXYZ( geometry.index.getX( i ), 0.93, 0.25, 0.48 );

		}

	},
};

window.addEventListener( 'pointermove', e => {

	pointer.set( e.clientX / window.innerWidth * 2 - 1, - e.clientY / window.innerHeight * 2 + 1 );
	raycaster.setFromCamera( pointer, camera );
	hits.length = 0;
	raycaster.intersectObject( mesh, false, hits );
	if ( ! hits.length ) return;

	brush.center.copy( hits[ 0 ].point );
	geometry.boundsTree.shapecast( paint );
	colors.needsUpdate = true;

} );