Guide to manipulating caps using clipping planes and stencil techniques in Three.js with both outer and inner mesh components

Hello there, I am new to both three.js and stackoverflow. My goal is to clip and cap three.js objects that have been rendered so that I can move a helperPlane back and forth through the object in order to peek inside it and observe the object within. This task resembles the advanced clipping techniques described for OpenGL in this resource: More OpenGL Game Programming - Bonus - Advanced Clip Planes. Given that this functionality is achievable in OpenGL, I am curious if there exists a way to achieve similar effects in WebGL?

I have adapted the clipping_stencil example from threejs (webgl - clipping stencil), and everything appears to be correct as long as I do not alter the position of the helperPlanes. However, moving the helperPlanes causes some of the cap faces of the larger mesh to disappear, introduces rendering artifacts (possibly z-fighting related issues), and renders the caps in undesired positions.

Setting the renderingOrder property for the meshes was essential for ensuring the inner mesh is dynamically rendered within the scene. Yet, I am currently unsure about handling the z-fighting issue when adjusting the clipping planes using sliders.

I have also posted this query on discourse.threejs. All the details can be found in this JSFiddle link. Any assistance or guidance on resolving these challenges would be greatly appreciated.

Your modified JavaScript code goes here...
javascriptthree.jswebgl

Answer №1

My recent experiment yielded some positive results. I have updated my JSFiddle to showcase my progress. Through utilizing clipping and stencils, I successfully capped an object within another object. Additionally, I incorporated drag and orbit controls along with a GUI for plane (x, y, z) selection for sectioning purposes. However, during the rendering process, I encountered peculiar behavior linked to the position of the object and camera rotation.

  • To visualize the caps when sectioning in the x and y planes, I had to move the object further away from the camera, but not in the z-plane.
  • When rotating the camera from positive x to negative x, the caps appeared to vanish like a sliding door.

It seems that the caps are being rendered at the same location as the clipping plane, causing depth testing issues under certain camera angles. In order to address this challenge, I believe relocating the caps slightly away from the clipping plane by a tolerance level along a vector normal to the plane may enhance their rendering versatility as I adjust the camera angle. To test this hypothesis, I made the following adjustment in my animate function:

    innerCap.translateOnAxis(clipPlane.normal, -1.5);

This tweak allowed the caps to render over a wider range of angles towards negative x. I suspect that this tolerance value is correlated with the distance between the object and the camera, yet I am uncertain about the precise implementation method. Your assistance on this matter would be greatly appreciated.

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

unable to eliminate the pause/play button when a different video is selected

Recently, I added three videos to my webpage with a feature that displays play/pause buttons upon single-clicking on the video. However, I am facing difficulty in removing the pause/play button from videos that are not currently being clicked. Additionally ...

javascripthtml

Expansive menu that stretches the full height of the webpage

I'm having difficulty making my side spry menu extend the full length of the webpage. I tried using this code: $("nav").css({ "height" : $("nav").height() }); but it still isn't working as expected. I just want the grey color, like ...

javascriptjqueryhtmlcss

Child object referencing in JavaScript

As I delved into testing Javascript, a curiosity arose regarding the interaction between child and parent objects. Would the parent object dynamically update to reflect changes in the child object's value, or would it remain static at the initial stat ...

javascriptobject

Can the timing of an onload event be used to evaluate GPU/CPU performance?

How can I accurately measure the load time of a browser when loading a heavy graphic using an onload event? Up until now, my measurements have been limited to timing image loads. However, I am looking for a way to distinguish between different clients bas ...

javascriptperformancewebgldom-eventsonload

What are some effective tactics for reducers in react and redux?

Working on a React + Redux project to create a web app that communicates with an API, similar to the example provided at https://github.com/reactjs/redux/tree/master/examples/real-world. The API I'm using returns lists of artists, albums, and tracks, ...

javascriptreactjsreduxreact-redux

Manipulate two elements using restrictions in AFRAME

I have two objects that I would like to animate with specific movements. Here is what I need: Currently, I have their 3D models in stl format along with their offset calculations. I can import them into aframe, but I am struggling to implement movement c ...

javascriptthree.js3dkeyboard-eventsaframe

Typescript: Mongoose encountered an error when trying to convert value to ObjectId for the specified path "_id"

Whenever I intentionally use postman to request a wrong product ID, the application crashes. Cause The error is not being caught by my error-handler middleware. Route /* retrieves a single product */ router.get("/:id", async (req: Request, res: Respons ...

javascriptnode.jstypescriptexpress

Toggle checkbox fields based on link or checkbox selection

I need to create a functionality where specific checkbox fields (location fields) are shown or hidden based on the selection of the parent name. For example, if "United States" is selected, all US locations should appear below the United States label. I h ...

javascriptjquery

Turning off arrow key navigation for tabs in Material UI ReactJS

I'm currently utilizing ReactJS Material UI tabs navigation. My aim is to deactivate the arrow keys navigation of Tabs in Material UI. What I desire is to navigate using the Tab key, and upon pressing Enter, it should display the page beneath that ta ...

javascripthtmlcssreactjsmaterial-ui

When selecting an option from jQuery autocomplete, the suggestions data may not always be returned

I have a question about the jQuery autocomplete feature. In my code snippet below, I have an input with the ID aktForm_tiekejas that uses the autocomplete function: $('#aktForm_tiekejas').autocomplete({ serviceUrl: '_tiekejas.php', wid ...

javascriptphpjqueryajaxautocomplete

Performing Ajax requests according to the selected checkbox data

Hey, I'm just starting out with Jquery and Ajax and could use some help to solve my issue. Currently, I am populating checkboxes based on my model values and making an ajax call to get a list of countries for each selected value. Now, I want to chan ...

c#javascriptjqueryajaxasp.net-mvc

Utilizing for loop and specific string selectors in an undefined AJAX post request

Greetings fellow developers! I have been exploring jquery/ajax and here is what I've put together: $(function() { $("#moreAdd").click(function() { var dataString = []; var selector = '#repeat0'; var row; for(var i=0;$ ...

javascriptjqueryajaxfor-loopjquery-selectors

What are the benefits and drawbacks of combining Jquery UI with AngularJS in web development?

Currently, I am developing a Web application and considering integrating JqueryUI and AngularJS into my ASP.NET MVC project. Is this the best decision for my project? Are there any recommended Databinding libraries that can be used with JQuery UI? Please ...

javascriptjqueryjquery-uiangularjs

What should be done with all the tags that have the specified attribute set to 'checked = false'?

Add tags using input type = "radio" along with the data-group attribute: <input type="radio" id="id1" data-group="group1"> <input type="radio" id="id2" data-group="group1"><br> <input type="radio" id="id3" data-group="group2"> < ...

javascriptjqueryhtml

An issue arises in React TypeScript where a callback function is encountering undefined values when using setState, but surprisingly logs the

Struggling with a React application I'm building, specifically with an issue that's got me stumped. Here's a snippet of code that's causing trouble: onFirstNameChange(event: any){ console.log(event.target.value) // this.setState ...

javascriptreactjstypescript

Best method for linking asynchronous requests using axios

Is it possible to make an API call using axios based on the response of another initial API call, all within asynchronous functions? I attempted the following approach with await/promise: function fetchUserDetails(userId) { return axios.get( "https://a ...

javascriptvue.jsaxios

Regular Expression - Invalid character detected in output

I'm currently in the process of developing a function to verify if a field is deemed acceptable based on a specific character set. In case it doesn't meet the criteria, I aim to determine and communicate which characters are not permitted. While ...

javascriptjqueryregex

Generating CSV File using PHP, AJAX, and MySQL

Currently facing an issue: I am in the process of updating a functional system, which requires me to write code that seamlessly integrates. My goal is to generate a csv file on a php page and store it in a mysql database. Additionally, I am utilizing Ajax ...

javascriptphpjquerymysqlajax

Having trouble receiving a string response from the responseText

In the process of creating a simple program for updating product prices on a website, I am encountering an issue where the string response is not being returned in my responseText. Here is an outline of the code used across three different files: <scri ...

javascriptphp

Utilizing Vue to create multiple components and interact with Vuex state properties

I am currently learning Vue and using it with Vuex (without Webpack). However, I am facing some challenges while implementing a simple example and the documentation is not very clear to me. One issue I encountered is that I cannot access the Vuex st ...

javascriptvue.jsvuex