How can Three.js be utilized to divide objects into two parts using a plane?

I'm working with a complex object, specifically a box, and I need to dynamically cut it. Here is a basic example in this jsFiddle:jsFiddle

Experimenting with a simple plane

var plane = new THREE.Mesh( geometry, material3 );
plane.rotation.x = 1.3; // -Math.PI / 2;
gui.add(plane.rotation, "x", 0.1, Math.PI / 2).name("angle");
gui.add(plane.position, "y", -1, 1).name("h");
scene.add( plane );

I want to remove the top part of my object, similar to slicing off a piece from an apple. The plane acts as the cutting tool: In this scenario, you can use two controls to adjust the position and angle of the plane.

https://i.sstatic.net/3qiB3.png

Could anyone assist me in concealing the portion of the object that has been removed?

javascriptthree.jsclipping

Answer №1

There are two different approaches you can take:

  1. One option is to utilize clipping, as suggested by WestLangley.
    • Clipping does not alter the vertex geometry; it is purely visual in nature.
    • This method is non-destructive, making it suitable for animation and frequent modifications.
    • Clipping typically involves using a few planes rather than intricate geometries.
  2. Alternatively, you could employ boolean operations with Constructive Solid Geometry.
    • Boolean operations do affect the vertex geometry, allowing for exporting capabilities.
    • These operations are considered "destructive," meaning adjustments cannot be made once completed.
    • Complex geometries can be used in boolean operations, provided they are "manifold."

For boolean operations to function properly, both sets of geometries must be manifold geometries. This requires closed meshes without any open faces. Narrow or infinitely thin planes will not suffice; therefore, adding a slight thickness (e.g., using a box with a width of 0.0001 instead of a plane) is necessary to achieve the desired result.

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 proper way to trigger a nested jQuery function in HTML?

When calling the addtext() function from onclick() in HTML, nested inside the add() function, how can I go about calling the second function? Here's a link with the add() function that displays a textbox and an ADD button invoking the addtext() funct ...

javascriptjqueryhtml

I am struggling to understand the significance of the $ symbol in this particular context

I came across the following snippet in a book I've been reading: `images/${Date.now()}.jpg` The curly brackets used here signify 'out of string', but I'm unsure about the meaning of $... P.S. Honestly, I didn't want to ask a que ...

javascripttypescript

What is the process for adjusting the form transition?

I am currently working on a form that has a transition effect However, I encountered an issue: check out the problem here My goal is to keep the magnifying glass fixed in place while the form moves Here is a snippet of my code: import Search fro ...

javascriptnext.jstailwind-css

Utilize jQuery to modify the element's type

Is it feasible to alter the HTML tag type of an element if its ID is known? For instance, if you have <p id="p">Lots and lots of text here.</p>, can it be changed to <span id="p">....? Thank you. ...

javascriptjqueryhtml

Retrieve PDF files from mongoDB and render them in an HTML format

After successfully uploading a PDF to mongoDB, I encountered an issue with reading and displaying it. To read the uploaded PDF, I converted it using the following code: var buf2 = new Buffer(data).toString('base64'); The resulting format of th ...

javascriptnode.jsmongodbbase64gridfs-stream

Loop through an array of objects in order to identify the key that holds the highest sum of values

const repos = [ { JavaScript: 82061, CSS: 4992, HTML: 1992 }, { Ruby: 47816, HTML: 8638, JavaScript: 4419, CSS: 1842 }, { CSS: 5006, JavaScript: 812, HTML: 336 }, { Ruby: 1898 }, ]; The API has responded. Each element in the array represents a us ...

javascriptarraysobject

Choose from a dropdown menu to either activate or deactivate a user account

I'm new to php and I need help getting this code to function properly delete.php <?php include_once 'dbconfig.php'; if($_POST['del_id']) { $id = $_POST['del_id']; $stmt=$db_con->prepare("UPDATE tbluse ...

javascriptphpjqueryhtml

"Need a hand with bookmarklets? Try using this code: document

Having an issue with my bookmarklet JavaScript where it always adds the www. portion to the domain. Any ideas on how to make it work by removing the www portion from the URL? Appreciate any help. javascript:void(window.open('http://siteanalytics.comp ...

javascriptbookmarklet

Program that extracts information from interactive controls

One of my challenges involves working with pages that have dynamic controls, where I never know the types or quantities of controls present. My goal is to create a script that can extract text from a text area when it's clicked. Although I initially b ...

javascriptjqueryasp.net

Instructions on how to insert a single parenthesis into a string using Angular or another JavaScript function

Currently, I am employing Angular JS to handle the creation of a series of SQL test scripts. A JSON file holds various test scenarios, each scenario encompassing a set of projects to be tested: $scope.tests = [ { "Date": "12/31/2017", "Project": ...

javascriptangularjsplsql

What is the best way to use JavaScript or jQuery to place divs in the desired position?

Here is the code snippet I am working with and I need assistance in positioning the div elements accordingly: <div id="outer" style="width:300px"> <canvas></canvas> <div id="inner"> <div class="a"> val1 </div> <div c ...

javascriptjqueryhtmlcsscanvas

Using AJAX to dynamically load content from a Wordpress website

Currently, I have been experimenting with an AJAX tutorial in an attempt to dynamically load my WordPress post content onto the homepage of my website without triggering a full page reload. However, for some reason, when clicking on the links, instead of ...

javascriptjqueryhtmlajaxwordpress

Javascript closures: a common pitfall

I'm facing an issue with my code where it is not behaving as expected. Although I believe the code itself is correct, there seems to be a problem that I'm unable to identify. The goal of the code is to display numbers 10 through 0 with a 2-second ...

javascriptsettimeout

What is the best way to adjust text across several lines to perfectly fit within a div's width?

http://codepen.io/anon/pen/oXGMQZ Is there a way to automatically adjust the font size of each span within a parent div so that it fills the width of the parent div? <div class="box"> <span class="fit">what</span> <span class="fi ...

javascriptjqueryhtmlcss

What are some best practices for preventing unforeseen rendering issues when utilizing React Context?

I am encountering an issue with my functional components under the provider. In the scenario where I increase counter1 in SubApp1, SubApp2 also re-renders unnecessarily. Similarly, when I increase counter2 in SubApp2, SubApp1 also gets rendered even thou ...

javascriptreactjsreact-nativereact-navigation-v5

Preventing v-stepper-step header click in Vuetify.js when form is invalid

I'm using Vuetify's v-stepper component. What I'm trying to achieve is: When a user clicks on a stepper step in the header, I want to block the click event if the active form is not valid. I have been able to accomplish this by attaching ...

javascriptvue.jsvuejs2vuetify.jsv-stepper

Is it worth creating a custom GraphQL-style API using only Sequelize?

Exploration Hello! I've developed a system similar to graphql, but using Sequelize exclusively. By utilizing JSON objects as query options in Sequelize, clients can send these options directly after proper sanitization. My Experiment Out of curiosi ...

javascriptnode.jsdatabasesequelize.jsgraphql

Automatically adjusting input box size and position in real-time

I am working on a form that includes a button and an input field. When the user clicks on the button "ADD MORE FIELDS," I want to dynamically generate a new input box. Although I have tried using code from this jsfiddle link and it works, my goal is to ach ...

javascriptjqueryhtmlcss

What is the most effective method for showcasing images (serving images) in a MEAN stack application?

Currently, I am working on a MEAN stack application and my goal is to showcase images along with corresponding responses. The specific requirement entails having a search box where users can input the image name, prompting the server to retrieve and disp ...

javascriptangularjsnode.jsmongodbmean-stack

What is the best method for developing a live text display switcher that works across different pages?

Hello everyone! I am currently in the process of creating a display toggler for my website. I have two separate pages, index.html and toggler.html. In index.html, the "TEXT" is displayed, while toggler.html contains the actual toggler or switch button. Whe ...

javascriptphphtmlajaxwebsocket