ExtrudeGeometry subtract BoxGeometry obtain part of BoxGeometry's faces and material

[AsDeadAsADodo]

I'll just skip the set up part ,directly show the pics and codes.

After csg substract , the result also obtain some faces and material of the box.

Console print Trianlges are coplanar which does not support an output edge

function extrudeGeometry() {
    const x = 3;
    const y = 2;
    const z = 20 / 100;
    const wallExtrudeSettings = {
        depth: y,
        steps: 2,
        bevelEnabled: false,
    };
    const aroundWallShape = new THREE.Shape();
    aroundWallShape.moveTo(-x, 0);
    aroundWallShape.lineTo(-x / 2, (x * Math.sqrt(3)) / 2);
    aroundWallShape.lineTo(x / 2, (x * Math.sqrt(3)) / 2);
    aroundWallShape.lineTo(x, 0);
    aroundWallShape.lineTo(x / 2, (-x * Math.sqrt(3)) / 2);
    aroundWallShape.lineTo(-x / 2, (-x * Math.sqrt(3)) / 2);
    aroundWallShape.lineTo(-x, 0);
    const aroundWallhole = new THREE.Path();
    aroundWallhole.moveTo(-(x - (z * 2) / Math.sqrt(3)), 0);
    aroundWallhole.lineTo(
        -(x - (z * 2) / Math.sqrt(3)) / 2,
        ((x - (z * 2) / Math.sqrt(3)) * Math.sqrt(3)) / 2
    );
    aroundWallhole.lineTo(
        (x - (z * 2) / Math.sqrt(3)) / 2,
        ((x - (z * 2) / Math.sqrt(3)) * Math.sqrt(3)) / 2
    );
    aroundWallhole.lineTo(x - (z * 2) / Math.sqrt(3), 0);
    aroundWallhole.lineTo(
        (x - (z * 2) / Math.sqrt(3)) / 2,
        (-(x - (z * 2) / Math.sqrt(3)) * Math.sqrt(3)) / 2
    );
    aroundWallhole.lineTo(
        -(x - (z * 2) / Math.sqrt(3)) / 2,
        (-(x - (z * 2) / Math.sqrt(3)) * Math.sqrt(3)) / 2
    );
    aroundWallhole.lineTo(-(x - (z * 2) / Math.sqrt(3)), 0);
    aroundWallShape.holes.push(aroundWallhole);
    const aroundWallExtrudeGeometry = new THREE.ExtrudeGeometry(
        aroundWallShape,
        wallExtrudeSettings
    );
    aroundWallExtrudeGeometry.rotateX(Math.PI * 0.5)
    return aroundWallExtrudeGeometry
}
const material = new THREE.MeshLambertMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide
});
const brush1 = new Brush(extrudeGeometry(), material);
const scale = 1
const boxGeometry = new THREE.BoxGeometry(scale, scale, scale)
boxGeometry.translate(0, -1, 2.5)
const brush2 = new Brush(boxGeometry, new THREE.MeshLambertMaterial({
    color: 0x336666
}));
const csgEvaluator = new Evaluator();
// x+ afterCSG
const result = csgEvaluator.evaluate(brush1, brush2, SUBTRACTION);
result.position.x = 5
scene.add(result)
// x- meshes before CSG 
scene.add(brush1)
brush1.position.x = -5
scene.add(brush2)
brush2.position.x = -5

[459584547]

why no answer?

[sonygod]

you mean this?

currently I'm developing a CSG WASM tool in CPP that is suitable for three.js. The inspiration comes from "three-bvh-csg". There are still many issues to address at the moment, but the overall situation is promising.

[hrgdavor]

currently I'm developing a CSG WASM tool in CPP that is suitable for three.js. The inspiration comes from "three-bvh-csg". There are still many issues to address at the moment, but the overall situation is promising.

Thata is cool, looking fwd seeing it when it is ready for public.

Did you also check manifold csg library ? It is cpp and has wasm, very fast and already does very well.

[gkjohnson]

I'd appreciate if users submitted fiddles or live examples in the future so these issues are easier to test with new releases. Over the last several releases of three-mesh-bvh and three-bvh-csg there have been improvements to the stability of these types of operations so I'm going to close this unless it can be shown that it's still an issue.

The inspiration comes from "three-bvh-csg".

Looking forward to seeing it!

[sonygod]

This is a technical preview video where you can have a look at the implementation details. There is still a lot of unfinished work ahead.