0

When trying to subtract or union two meshes (TextGeometry and BufferGeometry), result meshes have missing faces and opposite results, I am using ThreeCSG that supposedly support buffer geometry, I tried converting to normal Geometry and results were the same.

Union :

enter image description here

Subtract :

enter image description here

Here is my code:

async function addObject(values, step, heightScale, offset) {
  var depth = 8;

  var geometry = new THREE.BufferGeometry();

  values.unshift(0);
  values.push(0);

  var positions = [];

  for (var i = 0; i < values.length - 1; i++) {
    //back
    positions.push(i * step, 0, 0);
    positions.push(i * step, values[i] * heightScale + offset, 0);
    positions.push((i + 1) * step, values[i + 1] * heightScale + offset, 0);

    positions.push(i * step, 0, 0);
    positions.push((i + 1) * step, values[i + 1] * heightScale + offset, 0);
    positions.push((i + 1) * step, 0, 0);

    //front
    positions.push((i + 1) * step, values[i + 1] * heightScale + offset, depth);
    positions.push(i * step, values[i] * heightScale + offset, depth);
    positions.push(i * step, 0, depth);

    positions.push((i + 1) * step, values[i + 1] * heightScale + offset, depth);
    positions.push((i + 1) * step, 0, depth);
    positions.push(i * step, 0, depth);

    //top
    positions.push(i * step, values[i] * heightScale + offset, 0);
    positions.push(i * step, values[i] * heightScale + offset, depth);
    positions.push((i + 1) * step, values[i + 1] * heightScale + offset, 0);

    positions.push((i + 1) * step, values[i + 1] * heightScale + offset, 0);
    positions.push(i * step, values[i] * heightScale + offset, depth);
    positions.push((i + 1) * step, values[i + 1] * heightScale + offset, depth);

    //bottom
    positions.push(i * step, 0, depth);
    positions.push((i + 1) * step, 0, 0);
    positions.push(i * step, 0, 0);

    positions.push((i + 1) * step, 0, 0);
    positions.push(i * step, 0, depth);
    positions.push((i + 1) * step, 0, depth);
  }

  // itemSize = 3 because there are 3 values (components) per vertex
  geometry.addAttribute(
    "position",
    new THREE.Float32BufferAttribute(positions, 3)
  );

  geometry.computeVertexNormals();

  var material = new THREE.MeshPhongMaterial({
    color: new THREE.Color(0x00ff00),
    shininess: 66,
    opacity: 1,
    transparent: true,
    side: THREE.DoubleSide
  });


  //var geometry = new THREE.Geometry().fromBufferGeometry(geometry);
  //geometry.mergeVertices();
  var mesh = new THREE.Mesh(geometry, material);

  return mesh;
}


async function addText(mesh, textLocal, depth, textSize, type, x, y, z) {
  var font = await loadFont("assets/font2.json");

  var mesh_bsp = new ThreeBSP(mesh);
  var textGeo = new THREE.TextGeometry(textLocal, {
    size: textSize,
    height: depth,
    curveSegments: 6,
    font: font 
  });

  var text = new THREE.Mesh(textGeo, g_material);
  text.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(x, y, z));

  var text_bsp = new ThreeBSP(text);
  if (type == "subtract") {
    var subtract_bsp = mesh_bsp.subtract(text_bsp);
  } else {
    var subtract_bsp = mesh_bsp.union(text_bsp);
  }
  result = subtract_bsp.toMesh(g_material);

  return result;
}

I get different results if I uncomment these two lines:

//var geometry = new THREE.Geometry().fromBufferGeometry(geometry);
//geometry.mergeVertices();

Results look like that:

Union normal geometry :

enter image description here

Subtract front :

enter image description here

Subtract back :

enter image description here

Any ideas what I am missing?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
TimWP
  • 3
  • 3
  • Duplicate: https://discourse.threejs.org/t/using-threecsg-with-buffergeometry-is-giving-me-weird-results/7566 – M - May 16 '19 at 17:35
  • Just to reiterate, the library that you're using *does not* work with newer versions of Three.js. It's an issue that [has been brought up before](https://discourse.threejs.org/t/looking-for-updated-plug-in-for-csg/6785), you might want to read that thread for a bit of background. – M - May 16 '19 at 17:41
  • thank you, I can't believe I totally missed that thread – TimWP May 16 '19 at 18:13
  • You can try using my CSGMesh library.. the API is slightly different but I think it's more robust. https://github.com/manthrax/THREE-CSGMesh Here's a demo: http://vectorslave.com/csg/CSGShinyDemo.html – manthrax May 18 '19 at 00:14
  • thank you, I already check it out, but my problem was that the mesh was non-manifold. [how i fixet it](https://discourse.threejs.org/t/using-threecsg-with-buffergeometry-is-giving-me-weird-results/7566/6?u=timtoplak) – TimWP May 19 '19 at 09:13

0 Answers0