evanw / csg.js

Constructive solid geometry on meshes using BSP trees in JavaScript
http://evanw.github.com/csg.js/
MIT License
1.79k stars 264 forks source link

Mesh missing half of the triangles #21

Closed elanlb closed 6 years ago

elanlb commented 6 years ago

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 6 years ago

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

elanlb commented 6 years ago

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.

elanlb commented 6 years ago

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.

Ni55aN commented 6 years ago

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);
  }
});