Creating a 3D Slicing Tool using Javascript and Three.js

I am currently working on a web application that utilizes three.js to estimate the cost of a 3D printing model, along with other functionalities.

After successfully calculating the bounding box and volume of the object, I am now focusing on generating slices. I have managed to achieve intersections with a plane following this question: Three JS - Find all points where a mesh intersects a plane. I have implemented the function within 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);

However, when visualizing the results, only the first intersection is showing in the canvas (pink).

Here's a screenshot for reference.

Thank you for any help and suggestions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods do publications use to manage HTML5 banner advertisements?

We are working on creating animated ads with 4 distinct frames for online magazines. The magazines have strict size limits - one is 40k and the other is 50k. However, when I made an animated GIF in Photoshop under the size limit, the image quality suffered ...

Incorporating external JavaScript into a Rails application

Having trouble with the syntax on this simple problem. Struggling to find examples of externally linked files, all solutions online involve storing a local copy instead. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" typ ...

Encountering a blank or 404 error page in React after running npm build - let's troubleshoot where the issue might be

Upon running npm build(react), my index.html displays a blank page. To address this issue, I initially attempted the following steps: Adding the following line in package.json homepage : "./" or "." or "absolute file PATH" ...

Transforming HTML into a Document Object Model (DOM) for manipulation within a Node

Is it possible to convert raw HTML into a DOM/NodeList object and manipulate elements within that NodeList before converting it back into a string? Here's an example: request( url, function ( err, response, body ) { var bodyDOM = DOM.parse( body ...

Is there a way to link to mouseover and mouseleave actions while utilizing ng-options?

I am trying to create a directive that will handle the mouseover and mouseleave events for the option elements within this select element: <select class="form-control" custom-directive="" ng-model="vm.selectedPersonalInfo" ng-options="personalInfo as p ...

A guide on extracting individual Json fields and assigning them to separate variables

I have a JSON object that I need to break down into individual fields and then use each field separately. However, the code I wrote below is not functioning correctly and returns "undefined" in the alert message. This is my code snippet: $( document ).r ...

Inject CSS into an iframe containing a JavaScript form by iterating over a collection of iframes

My task is to manipulate an iframe (chatbox) once it's loaded on a webpage. This chatbox consists of four iframes, each with a different id that changes with every page load. Since the iframe that needs manipulation is always the last one in the list, ...

Is there a way to display incoming chat messages on the chat box without requiring a page refresh using socket.io?

Having trouble resolving an issue with my application hosted on wpengine, built using WordPress, vue.js, and socket.io for chat functionality. The main concern is that new messages posted in the chatbox do not display until the page is refreshed. I'm ...

Discovering dependencies for the Tabulator library can be achieved by following these

Can anyone provide me with a complete list of dependencies for Tabulator 4.2? I have already reviewed the package.json file, but it only contains devDependencies. ...

Displaying an iframe on an AR marker with the help of CSS3DRenderer and jsartoolkit

I am trying to achieve an interesting effect by overlaying a html iframe on top of an augmented reality marker. However, I seem to be facing some issues with the CSS3DRenderer not producing the same result as the WebGLRenderer and I'm struggling to pi ...

Connecting text boxes with JavaScript and JSON for gaming experience

I am currently developing a game and have encountered a slight issue. Currently, there is a text box in the game that prompts the player to run into it to progress to the next level. When the player does so, the next level loads seamlessly, which works per ...

Creating a cookie on click event to change the background

I am working on changing the background of a div onclick and storing it with a cookie. However, I am facing some issues with my code. I can't determine if the cookie has been properly set, and I am unsure about changing the background with the value o ...

Safari's Failure to Execute Ajax Requests

My HTML page includes an ajax request that is functioning properly on Firefox, but does not work on Safari. While debugging, I noticed that the readystate is undefined and the status is "". Can anyone suggest why it might not be working on Safari? Javascr ...

Displaying content on the <div> element

Looking for recommendations for a jQuery plugin or JavaScript solution that allows me to load a full "view" into a <div> when a user clicks on a link. The challenge I'm facing is that I have 8 pages, with the Homepage consisting of 3 divisions: ...

Guide to adjusting the camera rotation in Three.js

I successfully created a 3D cone using CSS3Renderer and TrackballControl. You can see it in action here: Now, I am looking to enhance the user experience by allowing them to input values to control the camera rotation instead of relying on TrackballContro ...

Blank datepicker displays as NaN when no selection is made

I've customized the bootstrap datepicker in a form by adding input fields, and everything is functioning correctly. However, the issue arises when the default date is displayed and if no date is selected, the month field shows 'NaN'. Is th ...

Retrieve a unified data array from the provided data source

Below is a snapshot of my data const data = [{"amount": "600,000", "cover": null, "id": "1", "img": "636e56de36301.1.png", "make": "bmw", "model": "bmw ...

Unlock the capability to automatically swipe on a React Native TextInput Carousel while the user types

My challenge involves setting up a carousel with either Flatlist or ScrollView (I have tested both options). This Carousel consists of multiple TextInputs. The goal is to achieve the following: There are 4 TextInputs. When the user enters 6 digits in the ...

Toggle class on element based on presence of class on another element

If I have 4 boxes and the user is required to choose one. I aim to assign an active class to the box that the user clicks on. However, if the user selects another box, I want to remove the class from the first clicked box and apply it to the newly clicked ...

How to pass children and additional arguments to a React/NextJS component

Currently, I am utilizing NextJS with a global PageLayout wrapper that is responsible for setting the head and creating the wrapping divs for all my pages. However, I am facing a challenge as I attempt to set a custom title tag for each page. This task req ...