Creating cross-sections of OBJ models in three.js with ThreeCSG

I've been experimenting with creating cross-sections of an OBJ file loaded using the three.js OBJ loader and the threeCSG wrapper for constructive solid geometry in JavaScript.

When working with a regular mesh, like a sphere or cube, the intersection csg operation works perfectly. I can also create visually appealing cross-sections with the obj in its original position (white object with red cross-section displayed below).

However, once I rotate the object, the cross-section remains the same regardless of the rotation applied:

Is there a way to have the csg intersection operation consider the rotation of the object? It behaves correctly with a standard three.js mesh (cube).

This issue may be related to how three.js loads OBJ files—it seems to store multiple meshes within a parent object that can then be manipulated in a scene. Here's how I'm currently performing the csg operations:

threeOBJ.traverse( function ( child ) {
    if (child instanceof THREE.Mesh) {
        cc = crossSection( child );
        scene.add( cc );
    }
} );

The crossSection() function conducts a csg intersection operation with the blue transparent plane visible in the images and each child mesh. It outputs a THREE.Mesh that is subsequently added to the scene.

I suspect I may be referencing something incorrectly since the rotation is not being factored in, but I don't know what that might be. Is there a more effective way to utilize csg with OBJs loaded in three.js? Perhaps consolidating all child meshes into one parent mesh and then executing boolean operations could yield better results?

Answer №1

In order to address this issue successfully, I decided to rotate the plane instead of the OBJ file and experienced great results. By adjusting the camera angle along with using trackball controls and manipulating the movement of the plane, you can easily view all sides of the object from desired perspectives.

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

My Angular post request lacks any content in the body

I am facing an issue where the body of my Angular post request is empty on my server. The post request from my client application looks like this: var data = { Stime: '+this.Stime+', Etime: '+this.Etime+', eAMPM: &apo ...

Tips for tailoring content based on screen size

I am looking for a way to display different content depending on whether the user is viewing my website on a large screen (PC/tablet) or a small screen (mobile). While my site is responsive and uses bootstrap, I have a lot of content that is only suitable ...

Save the content of a string object into an array

I am currently implementing an array sorting functionality using the MVC approach. The array called "array" is used to store values provided at runtime. Within the view, there is a textbox and a button for user input of integer values. Upon clicking the bu ...

Steps for writing code to append and execute code snippets using values from a JSON dataset

My attempt to fetch the result through this code is I am looking to display 'Y' or 'N' in the columns Mon, Tue, Wed, Thu, Fri, Sat, Sun I am facing issues fetching the 'run' value from the json data. I have used user.days to ...

Customizing Geonames JSON Ajax Request

Having found the code I needed from a sample website, I am now seeking help to customize it to only display results from the USA. This is the current code snippet: $(function() { function log( message ) { $( "<div>" ).text( message ).pr ...

The alignment issue of Owl Carousel card being off-center

I can't seem to get my owl carousel properly centered on my website. I've set up the owl carousel to showcase customer testimonials on my landing page, but it's slightly off to the right and not aligning correctly with the testimonial title. ...

How can I ensure that all row checkboxes are automatically marked as checked upon loading the Material Table in ReactJS?

I'm currently working on a project using React Material Table and I need to have the selection option pre-checked by default. Is there a way to accomplish this? function BasicSelection() { return ( <MaterialTable title="Basic Selec ...

Utilize a random file import with the help of React JS, Babel, and ES6

Having trouble displaying a random image using webpack. I have a directory with various images, such as: 1.jpg, 1-cropped.jpg 2.jpg, 2-cropped.jpg I want to fetch a random image from this directory without manually adding a reference for each file. I&apo ...

What is the best way to add or delete data when specific radio buttons are chosen?

Hey there, I'm facing an issue where the data is being appended regardless of which radio button is selected. Can someone help me with a solution on how to properly add and remove data based on the selected radio button? $( document ).ready(functio ...

What could be causing my divs to collide with each other in a Javascript environment?

As you may be aware, my current task involves assigning random positions from a list to various div elements. The code I am using to achieve this is as follows: var list = [100,210,320,430]; var square1 = document.getElementById("square1") var sq ...

Discover a step-by-step guide on showcasing SVG graphs in Vue using exclusively the SVG graph link

Currently, the only resource I have is a link to an SVG file. When opened in a browser, this link will display an SVG graph. My goal is to display this SVG graph in a Vue application: Although I attempted to implement this in Vue, it was unsuccessful. A ...

Generating unique font shapes with less detail in Three.js. Is the divisions parameter being neglected?

While reviewing the Font class documentation, I came across the mention of the "divisions" parameter for handling the fineness of the text shape generation. However, upon inspecting the implementation in the GitHub repository, it seems that this parameter ...

Go back to the pop-up window if an error occurs

I've implemented a modal window in front of my index page. When the model is valid, I redirect to the index view. However, when the model is not valid, I want it to stay on the modal. How can I achieve this? [HttpPost] [ValidateAntiForgeryToken] publ ...

XCODE encountered an issue while attempting to open the input file located at '/Users/name/Desktop/test/appname/node_modules/react-native-compressor/ios/Video/Compressor-Bridging-Header.h'

Encountering an issue while running my project in XCode. I recently added the react-native-compressor package by following the steps mentioned in the installation guide When attempting to run the project in XCode, the error below occurs: <unknown> ...

Execute an AJAX call to remove a comment

Having some trouble deleting a MySQL record using JavaScript. Here is the JavaScript function I am trying to use: function deletePost(id){ if(confirm('Are you sure?')){ $('#comment_'+id).hide(); http.open("get","/i ...

Whenever the select form that is concealed becomes visible, it fails to trigger the JavaScript function

Within my page, there is a hidden select element that triggers a JavaScript function when its value changes. On the click of a button, I have the following code that displays the select form: $("#moreDetails2").show(); $('#moreDetails2').trigge ...

Unable to associate with 'paint' as it is not a recognized attribute of 'mgl-layer' while using mapbox in Angular 9

I am currently working on an Angular 9 project with the latest version of mapbox integrated. My goal is to toggle between displaying contours and museums on the map. To achieve this, I have installed the package: "@types/mapbox-gl": "^1.12. ...

Bypass domain restrictions on JavaScript in Firefox version 7.0

As I work on a personal HTML + JS app, the ability to access the content of iframes or opened windows with Javascript would be extremely beneficial in boosting my productivity. I am curious if there is a way to bypass the cross domain restrictions set by ...

Is there a way to create intricate animations using JavaScript?

Looking to create a dynamic animation where triangle particles of varying sizes come together from all directions on the screen to form the word "Zoid." I've researched and it seems like three.js is the API that can help achieve this. Which specific ...

Issue with CasperJS: The function this.waitForUrl is not defined and is causing an error

My casperJS script handles form filling, however I encountered the following error message: A TypeError occurred: 'undefined' is not a function (evaluating 'this.waitForUrl') I suspect this might be an issue with using an outdated ver ...