How to update a CSG Operation

[AshhadDevLab]

Description:

I am tying to update an operation live while the scene is running, here's my mesh thats using the operation:

function createMesh() {
  const loader = new GLTFLoader();

  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("/examples/jsm/libs/draco/");
  loader.setDRACOLoader(dracoLoader);

  loader.load(
    "https://cdn.glitch.me/dc99a522-a347-4f3e-a04f-210e55dccd91/Tall%20Base%201.glb?v=1709712049776c",
    function (gltf) {
      result = gltf.scene.children[0];

      let resultMaterial = new THREE.MeshPhongMaterial({
        specular: 0x111111,
        shininess: 5,
        side: THREE.DoubleSide,
        alphaToCoverage: true,
        stencilWrite: true,
        stencilRef: 0,
        vertexColors: true,
      });

      result.material = resultMaterial.clone();

      meshBrush = new tbc.Operation(result.geometry, resultMaterial);
      {
        inside = new tbc.Operation(
          new THREE.BoxGeometry(10, 10, 10),
          resultMaterial
        );
        meshBrush.add(inside);
        inside.operation = tbc.ADDITION;
      }

      mesh = csgEvaluator.evaluateHierarchy(meshBrush);
      {
        const colorArray = new Uint8Array(
          mesh.geometry.attributes.position.count * 3
        );
        colorArray.fill(255);
        const colorAttr = new THREE.BufferAttribute(colorArray, 3, true);
        colorAttr.setUsage(THREE.DynamicDrawUsage);
        mesh.geometry.setAttribute("color", colorAttr);

        mesh.geometry.boundsTree = mesh.geometry.computeBoundsTree();

        //Center the model
        mesh.scale.set(1, 1, 1);
        let bounds = new THREE.Box3();
        bounds.setFromObject(mesh);
        mesh.position.sub(bounds.getCenter(new THREE.Vector3()));
        mesh.updateMatrixWorld(true);
        //Scale model to 100

        bounds = new THREE.Box3().setFromObject(mesh);
        let size = bounds.getSize(new THREE.Vector3());
        let { max } = Math;
        let maxsz = max(size.x, max(size.y, size.z));
        mesh.scale.multiplyScalar(1 / maxsz);
        mesh.needsAutoUpdate = true;
        bounds.setFromObject(mesh);
        mesh.position.sub(bounds.getCenter(new THREE.Vector3()));
      }
      mesh.material = result.material.clone();
      mesh.geometry.computeBoundingBox();
      scene.add(point);
      point.add(mesh);
    }
  );
}

What I need:

I am trying to change the operation of the inside mesh using inside.operation = tbc.SUBTRACTION with the help of a GUI button, is that possible? If so can anyone explain how it works in detail cause I am new to this CSG stuff.

Thanks

[gkjohnson]

Please provide a live, minimal example of what the issue is and what's not working. Ie no loaded models, etc so it's clear what the code flow is.

[AshhadDevLab]

Video:

2024-04-05.18-06-03.mp4

Description:

The cube shown in the video is a three-bvh-csg Operation mesh, I want its operation to be updated to SUBTRACTION when I switch the hollow type to 1 or to ADDITION when I switch it to 0. After switching if I do console.log(inside.operation) I get 0 as the result for addition and 1 for subtraction.

Observation:

I have observed that doing inside.operation = tbc.ADDITION and doing inside.operation = 0 are performing the same action, it's the same with subtraction but the number is 1

Thanks for replying to my issue though

[gkjohnson]

Please - a live example. This means something working and editable. Not a video.

[AshhadDevLab]

Oh my bad here's the code editing platform: https://glitch.com/edit/#!/
The complete source code and the working example

[gkjohnson]

As in my previous comment:

Ie no loaded models, etc so it's clear what the code flow is.

Unfortunately I cannot spend time dissecting almost 500 lines of code to understand what's happening. Please provide a minimal example that shows only the issue you're running in to and controls required to show it.

[AshhadDevLab]

For that let me make a new code and share the link here

[AshhadDevLab]

Link:

https://glitch.com/edit/#!/summer-spurious-market

This link is for the minimal code that doesn't contain anything except the problem I am facing.

Preview:

https://summer-spurious-market.glitch.me

[gkjohnson]

You're modifying the operation and never rerunning the CSG operation so of course the geometry will never change:

  gui
    .add(params, "hollow", ["Off", 0, 1])
    .name("Hollow Type")
    .onChange(function (value) {
      if (value == "off"){
        console.log("OFF")
      }
      else if (value == 0){
        inside.operation = tbc.ADDITION
      }
    else if (value == 1){
      inside.operation = tbc.SUBTRACTION
    }
    
      csgEvaluator.evaluateHierarchy(meshBrush, mesh);

    });

[AshhadDevLab]

Thanks for the help man, that was a minor yet dumb mistake