3D Slicing web app Javascript and Three.js

Question

I am developing a web application to estimate the cost of a 3D printing model with three.js and also do other stuff.

I have easily calculate bounding box and volume of object and I am now approaching slices. Following this question I have managed to get intersections with a plane: Three JS - Find all points where a mesh intersects a plane and I put the function inside a for loop that appends to a three.js group.

// Slices
function drawIntersectionPoints() {
    var contours = new THREE.Group();
    for(i=0;i<10;i++){
        a = new THREE.Vector3(),
        b = new THREE.Vector3(),
        c = new THREE.Vector3();
        planePointA = new THREE.Vector3(),
        planePointB = new THREE.Vector3(),
        planePointC = new THREE.Vector3();
        lineAB = new THREE.Line3(),
        lineBC = new THREE.Line3(),
        lineCA = new THREE.Line3();

        var planeGeom = new THREE.PlaneGeometry(50,50);
        planeGeom.rotateX(-Math.PI / 2);
        var plane = new THREE.Mesh(planeGeom, new THREE.MeshBasicMaterial({
              color: "lightgray",
              transparent: true,
              opacity: 0.75,
              side: THREE.DoubleSide
        }));
        plane.position.y = i;
        scene.add(plane);


      var mathPlane = new THREE.Plane();
      plane.localToWorld(planePointA.copy(plane.geometry.vertices[plane.geometry.faces[0].a]));
      plane.localToWorld(planePointB.copy(plane.geometry.vertices[plane.geometry.faces[0].b]));
      plane.localToWorld(planePointC.copy(plane.geometry.vertices[plane.geometry.faces[0].c]));
      mathPlane.setFromCoplanarPoints(planePointA, planePointB, planePointC);

      meshGeometry.faces.forEach(function(face) {

          mesh.localToWorld(a.copy(meshGeometry.vertices[face.a]));
          mesh.localToWorld(b.copy(meshGeometry.vertices[face.b]));
          mesh.localToWorld(c.copy(meshGeometry.vertices[face.c]));
          lineAB = new THREE.Line3(a, b);
          lineBC = new THREE.Line3(b, c);
          lineCA = new THREE.Line3(c, a);
          setPointOfIntersection(lineAB, mathPlane);
          setPointOfIntersection(lineBC, mathPlane);
          setPointOfIntersection(lineCA, mathPlane);
      });

        var lines = new THREE.LineSegments(pointsOfIntersection, new THREE.LineBasicMaterial({
            color: 0xbc4e9c,
            lineWidth: 2,
      }));
        contours.add(lines);

        function setPointOfIntersection(line, plane) {
          pointOfIntersection = plane.intersectLine(line);
          if (pointOfIntersection) {
              pointsOfIntersection.vertices.push(pointOfIntersection.clone());
          };
        }; 
    };

    console.log(contours);
    scene.add(contours);

And this is what I see: The for loop works and I visualise all the planes and also the lines inside the group but only the first intersection is showing in the canvas (pink).

screenshot

Many thanks.

Where and how do you declare and initialize `pointsOfIntersection` variable? Would be great to have [mcve]. — prisoner849, Jan 31 '18 at 18:04

score 2 · Accepted Answer · answered Jan 31 '18 at 18:23

2

You have to call .updateMatrixWorld(true) on your plane object after you set its y-coordinate in the loop:

plane.position.y = i;
plane.updateMatrixWorld(true);
scene.add(plane);

jsfiddle example.

answered Jan 31 '18 at 18:23

prisoner849

16,894
4
34
68

That fixed it! Thank you very much. – MiTo Jan 31 '18 at 21:20

3D Slicing web app Javascript and Three.js

1 Answers1