evanw/csg.js

Mesh missing half of the triangles

elanlb opened this issue · 4 comments

I wrote a simple JavaScript program to convert CSG objects to THREE.js Geometry objects by taking the vertices and then the faces and making THREE.js objects for them. When I run the program, it seems that I only get half of the triangles that are actually in the mesh.

Could this be something related to quadrilateral polygons or is it just that the program is skipping over half of the polygons?

I have confirmed that there are eight vertices and six faces for the cube. Should there be twelve?

elanlb/csg.js -> tests/threeGeometry.js

Sphere
screen shot 2018-01-06 at 9 12 07 am
screen shot 2018-01-06 at 9 12 19 am
Cube
screen shot 2018-01-06 at 9 12 42 am
screen shot 2018-01-06 at 9 12 50 am

makc commented

wait, so you wrote the conversion code, but the issue goes here?

I don't think it's an issue with the math in csg.js, but it could be related to the way it represents meshes.

So it turns out that there actually is quadrilateral geometry in csg.js. I had to check for how many vertices there were and then make one or two faces depending on the amount. If there are four vertices, one triangle is 0-1-2 and the other one is 0-2-3.

Polygons can have 3, 4, 5 (or maybe more) vertices, so you have to add all of them

//  little dirty code
var geometry = new THREE.Geometry();

function addFace(vertices, plane) {
  var j = geometry.vertices.length;
  var vertexNormals = [];
  
  vertices.map((v,i) => {
    geometry.vertices.push(new THREE.Vector3(v.pos.x, v.pos.y, v.pos.z));
    vertexNormals.push(new THREE.Vector3(v.normal.x, v.normal.y, v.normal.z));
  })
  var normal = new THREE.Vector3(plane.normal.x, plane.normal.y, plane.normal.z);
  geometry.faces.push(new THREE.Face3(j, j+1, j+2, normal, vertexNormals))
}

polygons.map(poly => {
  if(poly.vertices.length === 6) {
     let [a, b, c, d, e, f] = poly.vertices;
      addFace([a, b, c], poly.plane);
      addFace([c, d, e], poly.plane);
      addFace([e, f, a], poly.plane);
      addFace([a, c, e], poly.plane);
  } else if(poly.vertices.length === 5) {
     let [a, b, c, d, e] = poly.vertices;
      addFace([a, b, c], poly.plane);
      addFace([c, d, e], poly.plane);
      addFace([e, a, c], poly.plane);
  } else if(poly.vertices.length === 4) {
     let [a, b, c, d] = poly.vertices;
    addFace([a, b, c], poly.plane);
    addFace([c, d, a], poly.plane);
  } else {
      let [a, b, c] = poly.vertices;
      addFace([a, b, c], poly.plane);
  }
});