How to change the color of the polygons of an object during a collision in Three JS?

Questions
,
1

Hello to all I begin in Three js, I would like that when my box enters in collision of my Mesh that all the polygons which are inside my Mesh change of color

Current result
Demo1

here is my function which allows me to detect the collision of my 2 objects

detectCollisionObject(box) {
    const meta = this.getMetaByModelUUID(this.state.meshes[0].uuid);

    meta.mesh.children[0].geometry.computeBoundingBox(); //not needed if its already calculated
    box.geometry.computeBoundingBox();
    meta.mesh.children[0].updateMatrixWorld();
    box.updateMatrixWorld();

    var box1 = meta.mesh.children[0].geometry.boundingBox.clone();
    box1.applyMatrix4(meta.mesh.children[0].matrixWorld);

    var box2 = box.geometry.boundingBox.clone();
    box2.applyMatrix4(box.matrixWorld);

    // //return box1.intersectsBox(box2);
    console.log("Collision", box1.intersectsBox(box2));
  }

Here is a picture of what I would like to have
Group 276

I thank you for your answer

2

You can change colors of individual vertices of a geometry using vetrtexColor attribute, like so:

3

Perhaps these examples from the collection will help.

ChangeColorOfFaceByClick
SelectFacesWithinRadius

4

If the box is AABB, then I would go with patching of objects material, passing position and scaling of the box in uniforms, processing them in shaders to change model’s color in bounds of the box.

I’ve got no a ready-to-use solution with a box, but here is a concept with a sphere: