Exploring the inner structure of an STL Object with the power of three.js

Currently, I am attempting to create a cross section of a heart model that I have imported using the STLLoader function in three.js. To achieve this, I am experimenting with the ThreeCSG wrapper for the csg.js library, similar to the approach outlined in this helpful Stack Overflow post.

Below is the snippet of code where I perform the csg subtraction:

function modelLoadedCallBack( geometry ) {

    material = new THREE.MeshPhongMaterial( { color: model.color } );
    mesh = new THREE.Mesh( geometry, material );
    mesh.rotation.set( model.rotationX, model.rotationY, model.rotationZ );
    mesh.scale.set( model.scale, model.scale, model.scale );
    var originalBSP = new ThreeBSP( mesh );

    var xSectionBSP = new ThreeBSP( xSection );
    var subtractedBSP = originalBSP.subtract( xSectionBSP );

    var result = subtractedBSP.toMesh( material );
    result.geometry.computeVertexNormals();

    scene.add( result );

};

I load the stl model and then proceed to attempt mesh subtraction within the loader's callback function. However, I encounter an error message on line 34 of the ThreeCSG wrapper file:

ThreeCSG.js:34 Uncaught TypeError: Cannot read property 'length' of undefined

This error has led me to ponder whether the issue lies in my usage of ThreeCSG, if the subtraction should be performed elsewhere in the code, or perhaps STL models are not supported.

In light of this dilemma, I find myself at an impasse and seek guidance from individuals well-versed in the intricacies of working with three.js.

Answer №1

Your input seems accurate. This issue may arise due to an empty STL geometry or a missing initialization of xSection.

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 is the best way to display loading details during a data loading process within a useEffect hook?

Whenever a specific custom React component I've created is initially mounted, it utilizes useEffect to initiate a lengthy multistep process of loading data that will later be rendered. Since the component isn't always rendered, this costly proces ...

Techniques for eliminating text enclosed by double parentheses in javascript

I am currently working on extracting data from Wikipedia, but I am facing a challenge with removing content enclosed in multiple parentheses. While I can successfully remove single parentheses using content.replace(/\s*\(.*?\)\s*/g, &ap ...

Unlocking the power of React using TypeScript for optimal event typing

I need assistance with properly typing events in TypeScript. Consider the following function: import * as React from 'react'; someHandler = (event: React.SyntheticEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) =&g ...

Having trouble muting the audio on my Vue audio player

I'm facing some challenges with muting the audio within my vue app. I have a list of songs that can be played, paused, shuffled, etc., but I can't seem to get the mute function working. Here's what I have in the JavaScript: mute() ...

JavaScript click event to open a URL in a new window

I am trying to create a hyperlink with text using HTML, and I want it so that when the user clicks on it, it redirects to a specific URL. I am new to JavaScript! Here is my code: <a class="dt-button add_new_table_entry DTTT_button DTTT_button_new" tab ...

Having trouble with nested requests and appending using Jquery or JavaScript?

Greetings everyone, I want to apologize in advance for any spelling errors or mistakes in my message. I struggle with dyslexia and other learning difficulties, so please bear with me. I am using this time during lockdown to learn something new. This is my ...

Tips for positioning text on the left and right sides of a div in HTML styling

I am struggling with positioning two pieces of text within a div. Despite having some styling already in place, the text is currently displaying one after the other on the left-hand side. I want to position one piece of text to the left and another to the ...

Is there a way to customize the background color and utilize an online CDN for this three.js example?

Following up on the inquiry about including three.js online, I came across an example that intrigued me: https://github.com/josdirksen/learning-threejs/blob/master/chapter-08/16-load-vrml.html In order to run this example from a single file and have it ...

What is the process for linking an HTML document to another HTML document within a div using jQuery?

Check out my HTML code: <!DOCTYPE html> <html> <head> <title>Hilarious Jokes!</title> <meta charset="utf-8"> <link href="final%20project.css" rel="stylesheet"> <script src=" ...

Error encountered when connecting to MongoDB: 'MongoServerSelectionError'

const uri = 'mongodb+srv:<username>//:<passwod>@chatapp-qrps3.azure.mongodb.net/test?retryWrites=true&w=majority' const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true }) client.c ...

Hide <a> by setting its display property to none

Below is the HTML code: <td> <a class="link" href="#"> <span class="download">Link</span> </a> <a class="link" href="#"> <span class="csvdownload">Link 2</span> </a> </td> I am lo ...

cPanel is incompatible with node version 12.16.0

I am facing a dilemma regarding hosting my node API, which was built using node version 12.16.0, on cPanel. The available version for node in cPanel is 12.9.0 (Most recent). How should I proceed? Is the node version really a critical factor in this case? ...

Exploring a collection of objects using a filter and specific keyword

I am looking to implement a search functionality in JavaScript using an array, filter, and keyword. The goal is to search through the array based on the filter and keyword provided, and return a new array of objects similar to the original one. var data ...

Execute code after the page has finished loading, excluding instances of page refresh

I have a specific jquery function that I need to execute only the very first time a page loads, not upon refreshing the page. Here is the code snippet: $(window).on("load",function() { $("#logo-black").typed({ strings: ["Nothing^450&Co^25 ...

Switch off JavaScript beyond the parent element

Struggling with implementing an event to toggle a div using an element located outside of the parent container. I am attempting to achieve the same functionality by targeting elements beyond the parent structure utilizing a span tag. Any assistance on th ...

The map displayed on google.com appears different from the one featured on our website

The integration of the JS for the Google map on our website is working smoothly without any issues. However, when I zoom into our address on google.com/maps, our Hotel is listed as "Hotel". On the map displayed on our website, there are only a few entries ...

Enhance Your Website with Interactive Tooltips Using Twitter Bootstrap

In Twitter bootstrap, the default trigger for tooltips is hover. If I want to make the tooltip display on focus instead, I can add data-trigger="focus". But how do I make it so the tooltip displays both on hover and on focus? ...

Tips for ensuring proper dependency regulations in javascript/typescript/webpack

In essence, I am in search of a method to limit dependencies, similar to how one would manage different projects (libraries) in Java or C#. Think of it as friend or internal access modifiers. I'm considering various approaches to accomplish this (suc ...

Transitioning from JSTL's forEach loop to angular.js's ng-repeat functionality during the spring season is like switching your

I am just getting started with angular.js. I currently have a spring MVC application and I want to transition from jstl to angular.js. This is how I began the process: <table> <c:forEach var="list" items="${list}"> <tr c ...

Guide to interpreting an Angular expression using traditional JavaScript conventions

I have encountered an issue with the Angular app that I am currently working on. It needs to retrieve the Google Analytics ID from Angular in order to pass it to ga('create', 'UA-XXXXX-Y') using standard JavaScript in my index.html. &l ...