CSG Subtraction when exporting scene wrong

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();
      function (result) {
        saveArrayBuffer(result, "Szene.glb");
      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;

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?

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?

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.

most likely not without forking it :-/

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?

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

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++)
  }, []);

1 Like