Combining geometries/meshes in Three.js by eliminating shared regions

My goal is to merge two geometries/meshes (red and blue) into a single unified entity. However, when I create a new geometry and use geometry.merge(), I notice that the inner vertices and faces remain (the green area).

I want to eliminate this extra information to prevent visual glitches on the rendered faces and ensure accurate calculation of the merged volume. I envision a final result similar to the last picture, with a single mesh that contains only the essential external/outer faces and vertices, eliminating the inner ones.

https://i.sstatic.net/ISV8q.png

I attempted using ThreeCSG to subtract meshes, but encountered frequent crashes when working with large models. I also tried using a raycaster to identify common faces, but found that it significantly impacts performance with bigger models.

As ThreeCSG seems to be problematic for my needs, I am exploring other faster options that are less reliant on the mesh's triangle count. Are there alternative solutions that can achieve this efficiently?

javascriptthree.jsverticesthreecsgface

Answer №1

If you are working with ThreeCSG and boolean operations, it is recommended to define your objects as BSP-trees or nodes right from the start. This approach will provide more accurate results and can help prevent crashes when working with larger geometries.

Check out this demo on jsfiddle to see this concept in action. The resulting image is shown below:

https://i.sstatic.net/M5iFs.png

  • The shapes on the left are used in the boolean operation for visualization purposes.
  • In the middle, the boolean result is generated by subtracting a BSP version of a THREE.PlaneGeometry from a BSP version of a THREE.BoxGeometry.
  • The boolean result on the right is created by subtracting native BSP objects (plane and box) from each other.

It is evident that the middle result contains 5 additional vertices, resulting in more faces as well. This exponential growth in vertices can lead to performance issues and potential crashes if multiple boolean operations are performed.

In simpler terms, each boolean operation will increase the size of your BSP tree, potentially slowing down the process and causing instability. If you are planning to perform numerous boolean operations, consider using native BSP shapes for more efficient results instead of converting three.js geometries.

Instead of using:

myBSP = new ThreeBSP( geometry );

try the following approach:

var polygons = [
    // define your polygons using new ThreeBSP.Polygon( vertices )
];

var node = new ThreeBSP.Node(polygons);

myBSP = new ThreeBSP(node);

Then proceed with your boolean operations accordingly.

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

Tips for utilizing JavaScript to upload a file in Webform and make it accessible in the global PHP variable $_FILES

I'm feeling a little overwhelmed and frustrated. I've come across a bunch of solutions, but none of them seem to work fully or correctly!? My task is to create an HTML form that allows users to upload one or more files to the web server using AJ ...

javascriptphpajaxfileupload

Exporting a named export for every HTTP method is the way to go with NextJs

I'm currently working on a project to create an Airbnb clone using NextJs. The tutorial I'm following is using an experimental version, while I've opted for the latest version of NextJs. One aspect that's been causing confusion for me i ...

javascriptnext.jsnext-auth

Can you explain how to utilize prop values for setting attributes in styled-components v4 with TypeScript?

Overview Situation: const Link = styled.a` border: solid 1px black; border-radius: 5px; padding: 5px; margin: 10px 5px; `; type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>; const LinkAsButton = styled(Link).attrs<ButtonP ...

javascriptreactjstypescriptstyled-components

Guide to opening all href links in a new window

When loading HTML content parsed from an email to a frame, the issue arises when there is an href link that tries to open in the same frame. I want to modify it so that it opens in a new tab instead. Usually, setting the target to _blank in the href would ...

javascripthtmlemailasp-classicframe

Add a prefix to a value entered by the user

I need help with adding a prefix to an input field value using Jquery. I want the input field value to be submitted as "Referrer Email: {email address}" where the {email address} part will be dynamic. The snippet below is what I found, but I'm having ...

javascriptjqueryforms

Replace Jade script with block override

Having trouble overriding a Jade script. tag, nothing seems to work. Here is the code snippet: Layout.jade block foot footer.container#footer .row .twelve.columns All rights reserved. &copy; 2015 Pet Feeder block scripts ...

javascriptnode.jsexpresspug

enigmatic glitch in javascript while using django

When adding jQuery to my template, I include it using the following code: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> After including jQuery, I also add a form to my page like this ...

javascriptdjangodebugging

The power of the V8 JavaScript engine: Understanding v8::Arguments and the versatility of function

I have created a Node.js addon that wraps a C++ standard library element std::map<T1,T2>. The goal is to expose this map as a module with two primary functions: Set for adding new key-value pairs and Get for retrieving values by key. I want to create ...

javascriptc++node.jsv8embedded-v8

Cloning the rotation of one object to another in ThreeJS

In my project, I have two canvas elements containing different objects. My goal is to synchronize the rotation of one object with that of another. The second canvas serves as a viewcube and should only rotate when the first object rotates. I attempted to ...

three.js

Is there a way to use ajax to dynamically monitor the presence of a file in real-time?

Is there a way to automatically observe the status of a file using ajax without having to manually refresh it with a button? ...

phpjavascripthtmlajax

Share JSON data across functions by calling a function

I am currently working on a project where I need to load JSON using a JavaScript function and then make the loaded JSON objects accessible to other functions in the same namespace. However, I have encountered some difficulties in achieving this. Even after ...

javascriptjqueryjson

What is the best way to conceal an element in jQuery by utilizing a JavaScript variable?

I have encountered a challenge in concealing this specific page element in the provided html code <table cellspacing=5 cellpadding=3> <tr> <td id="lst2"><h4>Apple Ipad for sale N70,000 (negotiable)</h4></td> & ...

javascriptjqueryhideshowgetelementbyid

Exploring the wonders of Lightbox when dealing with content loaded via AJAX

Using Bootstrap 5 along with the Lightbox library from , I encountered an issue. The Lightbox feature functions properly on regular page loads, but fails to load on content loaded via AJAX. I attempted to resolve this by implementing the following code: ...

javascriptjquerylightboxbootstrap-5

The correct assertion of types is not carried out during the initialization of generics through a constructor

I am encountering a minor issue with TypeScript, and I am uncertain whether it is due to a typo on my part or if TypeScript is unable to correctly infer the types. Let me provide all the necessary code to replicate the problem: interface IRawFoo { type: s ...

javascripttypescripttypescript-generics

Creating a Form in a Popup with Bootstrap

I have implemented Bootstrap on my website. Check it out at: hubb.tekkkz.com I am facing an issue where, when clicking on the login/register button on the right, the modal pops up. However, the user input elements within the modal are not taking up the ful ...

javascriptjqueryhtmlcsstwitter-bootstrap

Can you identify the target of the term "this" in the upcoming JavaScript code?

DISCLAIMER: I am inquiring about a specific instance of this, not its general purpose. Please refrain from quick Google responses or copied answers (: The code snippet below demonstrates JavaScript/jQuery: var req = {}; function getData() { var from ...

javascriptjquerythis

I am interested in utilizing props to send a variable to the view

Looking for assistance with passing the variable tmp_sell to my view. Here is the code: <p @tmp_sell="getTmpSell" >?</p> <input ref="q_subtotal" placeholder="Subtotal" @tmp_sell="getTmpSell" i ...

javascriptvue.jsvuejs3

Pass the pre-encoded value through Ajax

Is there a way to prevent AJAX from encoding an already encoded value when passing it through data? I'm facing this issue where my value gets further encoded. Any solutions? This is the AJAX code I'm using: $.ajax({ url: form.attr(" ...

javascriptajax

Loop through each HTML element and store it in a JavaScript array

I currently have a webpage with 3 select buttons named "Season". I am trying to figure out which buttons are selected and receive their values as an array on my webpage. Below is the code I am using: var season_array = $.each($(form).children("input.sele ...

javascriptjqueryloopsforeach

Original selection unavailable in pagination

I'm encountering an issue on my website where Bootstrap and JQuery don't seem to work well together. $("ul.pagination li:not(.active) a").on("click",function(){ $(".pagination li.active").removeClass("active"); $(this).parent().addClass("activ ...

javascriptjqueryhtmltwitter-bootstrap