I am currently working on a 3D configurator project. In this project, a cube is initially displayed on the scene. When a side of the cube is clicked, a rectangle is supposed to appear. However, the issue I am facing is that upon clicking the same side of the cube, another rectangle overlaps the existing one. I am looking for a solution to prevent this overlapping by blocking the clicked side. The geometry of my cubes and rectangles is buffer-based. I have the ability to obtain raycasting data such as face (a,b,c) and faceIndex. But I am unsure about how to calculate the intersection of two different faces belonging to two separate objects. Apologies for any language mistakes in my explanation.
For those interested, you can find more about my project here
https://i.sstatic.net/woZCs.png https://i.sstatic.net/5NMda.png https://i.sstatic.net/UEQQM.png
Here is a snippet of my code:
if (intersect) {
var index = Math.floor( intersect.faceIndex / 6 );
if ( intersect.object.name == 'cube' ) {
switch (index) {
case 0: load( intersect.object.position.x + 6.58, intersect.object.position.y, intersect.object.position.z, 'beam', 0, 0, 0 ); break;
case 1: load( intersect.object.position.x - 6.58, intersect.object.position.y, intersect.object.position.z, 'beam', 0, 0, 0 ); break;
case 2: load( intersect.object.position.x, intersect.object.position.y + 6.58, intersect.object.position.z, 'beam', 0, 0, 90 ); break;
case 3: load( intersect.object.position.x, intersect.object.position.y - 6.58, intersect.object.position.z, 'beam', 0, 0, 90 ); break;
case 4: load( intersect.object.position.x, intersect.object.position.y, intersect.object.position.z + 6.58, 'beam', 0, 90, 0 ); break;
case 5: load( intersect.object.position.x, intersect.object.position.y, intersect.object.position.z - 6.58, 'beam', 0, 90, 0 ); break;
}
}