CSG Subtraction when exporting scene wrong

[kalabedo]

Hi there,

In my app, I cut out parts from different meshes and color them in a certain color. This works perfectly in react-three/fiber in combination with react-three/csg. For this I use “useGroups” from the react-three/csg documentation. The correct result is displayed on the canvas, a cube with a black cutout (to be seen at the bottom of the picture):

Problem is, I want to export my scene. When I export the scene I get a black cube with a cutout and a cube with the texture I am using with a cutout. Basically I get two new meshes with one of the materials (texture and color) each. To export I use the following code:

function download() {
    const exporter = new GLTFExporter();
    exporter.parse(
      scene,
      function (result) {
        saveArrayBuffer(result, "Szene.glb");
      },
      //called
      function (error) {
        console.log("an error happened");
      },
      { binary: true, onlyVisible: true }
    );
  }

  function saveArrayBuffer(buffer, filename) {
    save(new Blob([buffer], { type: "application/octet-stream" }), filename);
  }

  const link = document.createElement("a");
  link.style.display = "none";
  document.body.appendChild(link); // Firefox workaround, see #6594

  function save(blob, filename) {
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();
  }

Here is a video from Blender showing the imported scene:

My question is, is there any way to change the behavior or should I put in a new object at the point where it is cut out that has the color of the cutout?

[manthrax]

gltf doesnt support material groups… instead it will export a single mesh per material assigned I believe.

So this may be what you’re seeing…

So perhaps what you are proposing with exporting the separate cutout is the way to go?

[kalabedo]

Ahh you are right thanks, thats the problem! Thought the problem was CSG. Is there a way to tell the exporter it should split meshes with different materials? When exporting GLB files from blender it automatically splits a mesh if it has different materials assigned to different faces.

[drcmda]

most likely not without forking it :-/

[kalabedo]

What do you mean with forking? You mean like doing it in another program?
Another question is it possiple to retreive the triangles that where colored and combine them to a new mesh, basically splitting it at the cut?

[drcmda]

the exporter. if it doesn’t work the way you want you’ll have to fork the code into your project and extend it.

[kalabedo]

I found a fix together with @manthrax for my code. Before exporting the scene i set the index of the geometry, now it’s working as expected:

const mesh = useRef();
  let index = [];

  useEffect(() => {
    for (let i = 0; i < mesh.current.geometry.attributes.position.count; i++)
      index.push(i);
    mesh.current.geometry.setIndex(index);
  }, []);