Is it possible to limit sections of a model that have been cut off using THREE.js?

Recently, I delved into the world of Three.js, only to encounter some challenges. I have been working with a 3D object where I utilized local clipping planes to shape it to a certain extent.

However, due to the nature of 3D objects being "hollow", only the outer surfaces are visible. When something is clipped, we can peer into the shape and see its back side. For example, you can view inside the tubes here.

How can I cap these holes? After facing this issue, it appears that creating a surface over the clipped area is the best way to seal the hole and give the object a solid appearance. Yet, I am unsure about the process to achieve this.

My current code is based on the examples provided at .

My desired outcome can be viewed here.

Answer №1

While it may not provide the same speed as utilizing gpu clipping planes, this method will return the actual geometry.

For those interested, I recommend experimenting with the CSG library that I recently revamped:

https://github.com/manthrax/THREE-CSGMesh

Feel free to share any suggestions you may have.

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

Struggling with integrating Skybox in THREE.js

My console is not showing any errors. I am utilizing the live server VS code extension to execute the JS code. Can someone please assist me?" HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"& ...

Error code "ER_BAD_FIELD_ERROR" was encountered with errno 1054 and sqlState "42S22" in index 0 while using MySQL with Angular and managing sessions

When I log in, the following code is executed: <div ng-include="'partials/navbar'"></div> <form name="form" ng-submit="login(form)"> <div> <input type="text" placeholder="Email" ...

Retrieve information from subcategories in the Realtime Database using Firebase

Trying to access message inputs from ALL users has been a challenge. While it can be done for a specific user, the goal is to do so for all users by specifying in the code. Each UID is unique, adding complexity to the process. The Realtime Database struct ...

Find the names of keys which have a value of true in reactjs

Greetings, I have a JSON file that contains information about different components. I am trying to extract only the Dashboard and Datatable sections where the "visible" attribute is set to true. { "MTs": { "Dashboard": { "id": 1, "visible ...

Trouble with triggering events from Datatable buttons

Below is the code snippet I am currently using for my DataTable : var oTable12= $('#example').DataTable({ "aaData": tableData, "aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]], "iDisplayLength": 5, "aoColumnDefs ...

React JS routes function properly only upon being reloaded

Encountering a problem with my reactJS routes where the URL changes in the address bar when clicking on a link, but the component does not render unless I refresh the page. Here is an excerpt from my code: index.js import React, { Component } from &apos ...

The hover functionality fails to activate when a z-index is applied

My issue revolves around 2 divs: one containing a link and the other a box-shaped container. The link is set with position:fixed; causing it to fly over the container div. To resolve this, I attempted to assign a negative z-index value to the link, but unf ...

Exploring the foundations of web development with html and stylus

If you have experience with the roots platform, you are familiar with its default stack including jade, stylus, and coffee script. The documentation provides some information on using HTML, CSS, and pure JavaScript instead of the compiled languages, but d ...

Delivering create-react-app's build files through an express server

I am trying to serve the build files of my React app on another Express application. I have copied all the static files from the build folder to the public folder inside my Express application and have set up the following code: app.use(express.static(pat ...

Error: The value for 'prepareStyles' property is undefined and cannot be read

Can anyone provide some guidance on this code snippet? I am struggling to understand the error message I am receiving. import React, {PropTypes} from 'react'; import TransactionListRow from './TransactionListRow'; import {Table, TableB ...

Where within Video.js can I modify the color of the large play button when the cursor hovers over the video?

After successfully changing the SCSS $primary-background-color to orange using the video.js default skin editor (CodePen), I encountered an issue. Whenever I hover my mouse cursor over the video, the big play button background reverts to its default grayis ...

typescript throwing an unexpected import/export token error

I'm currently exploring TypeScript for the first time and I find myself puzzled by the import/export mechanisms that differ from what I'm used to with ES6. Here is an interface I'm attempting to export in a file named transformedRowInterfac ...

What is the best way to duplicate a complete row?

I am looking to create a form that includes an "Add Row" button. When this button is clicked, a new row should be generated, identical to the last row. The rows contain dropdown values, and I want the new row to display the same dropdown options as the p ...

Vue - making one element's width match another element's width

Trying to dynamically adjust the innermost element's width to match the outermost element's width with Vue: <div id="banner-container" class="row"> <div class="col-xs-12"> <div class="card mb-2"> <div ...

Tips for creating a tooltip above an SVG circle with AngularJS

I'm currently working on a project where I am using AngularJS and SVG to plot circles on a page. My goal is to have a tooltip appear when a user hovers over one of the circles. I came across an explanation on how to achieve this on this website, but u ...

Regular expressions can be used to remove specific parts of a URL that come before the domain name

Looking for some help with a javascript task involving regex and the split function. Here's what I need to achieve: Input: http://www.google.com/some-page.html Output: http://www.google.com I attempted the following code but unfortunately it didn&ap ...

Tips for choosing a visible element in Protractor while using AngularJS

I am working on a Single Page Application that contains multiple divs with the same class. My goal is to have protractor identify the visible div and then click on it. However, I keep encountering the error Failed: element not visible, which leads me to be ...

Delving into the World of ReactJS Routing Components and Rendering

I recently developed a basic booking app consisting of 3 essential files - App.js, Booked.js (1st child), and Details.js (2nd child). My current dilemma involves attempting to access App.js for the purpose of deleting data using the 2nd child (Detail.js). ...

Encountering problems when trying to establish a connection to my MySQL database while utilizing a REST API server built

As a newcomer to coding servers and JavaScript, I am currently taking steps to establish a REST API server and connect it with my SQL database locally. My setup involves running Ubuntu 18.04 with NODE js. So far, I have managed to successfully create a RES ...

Alert message in jQuery validation for the chosen option value

I am attempting to validate a combo box with the code provided below. Currently, I receive multiple alert messages even if one condition is true. My goal is to only display one alert message when a condition is met and highlight the other values in red. Th ...