Is there a way of chaning the color of intersections of geometries? I have two irregular geometries, and I’d like to find the intersection between them, and color it differently – or rather color the non-intersecting portions. For example, in the image I achived something similar by reducing the opacity of one of them. That is the general impression I want to convey, but I’d like to be able to make one of the entirely transparent, letting the user know it exists only by the intersecting shape with the other geometry. Does that make sense?
In addition, I also want to have a boolean of some sort that cathces whether there is or isn’t and intersection.
Is there a straighforward way of doing this? Thank you!
gkjohnson/three-bvh-csg is most likely what you’re looking for. Apply the CSG operations to your models to get: (a) model A without model B overlapping part; (b) model B without model A overlapping part; (c) overlapping between model A and B as a separate geometry. Then just replace original meshes with the a, b, and c - and apply a custom colored material to mesh (c).
(This example specifically may help.)
3 Likes
The three-bvh library also has a “shapecast” function which you can use to detect just the intersect/no intersect case.
You can also do a sort of fake-ish visual effect using the material depthFunc … like this:
let bx = new THREE.Mesh(new THREE.BoxGeometry(),new THREE.MeshStandardMaterial());
bx.position.y += 8;
scene.add(bx)
let bx1 = bx.clone();
scene.add(bx1);
bx1.position.x+=.5;
bx1.position.y-=.5;
bx1.position.z-=.5;
bx1.material = new THREE.MeshStandardMaterial({color:'blue',opacity:.5,transparent:true})
let bx2 = bx1.clone();
scene.add(bx2)
bx1.material = new THREE.MeshStandardMaterial({color:'red',opacity:.5,side:THREE.BackSide,depthFunc:THREE.GreaterDepth,transparent:false})
3 Likes
Thank you everyone for the help. I used three-bvh-csg (or rather its react wrapper react-three-csg) and I was able to accomplish what I needed!
2 Likes
