Tips on transforming truncated surfaces into complete entities

When working in Three.js, I encountered a situation with a 3D object where local clipping planes were used to render only a specific part of the object.

However, due to the nature of 3D objects being "hollow" (only rendering the outer surface), when something is clipped off that surface, it creates a perspective into the object's interior. Here is an example illustrating this concept: clipping a corner off a cube. You can observe how we are able to see the backside of the opposite corner.

To achieve the appearance of a solid object, it seems that creating a surface over the clipped region is the recommended approach based on this issue. This technique would essentially cap the hole and give the illusion that the object is not hollow.

The main query I have is regarding how to determine where to construct this surface. Is there a way in Three.js to obtain a list of vertices that intersect between a plane and any arbitrary surface? If such functionality doesn't exist, what could be a potential solution to address this challenge?

I came across this question, but the author did not provide details on solving the same problem I am encountering here.

javascript3dthree.jsshaderclip

Answer №1

If you're looking to display a clipped surface as a solid shape, rather than hollow, there's a simple solution.

One way to achieve this effect is by using the MeshPhongMaterial in three.js and applying a small hack to the material shader.

material.onBeforeCompile = function( shader ) {

    shader.fragmentShader = shader.fragmentShader.replace(

        '#include <output_fragment>',

        `
        vec3 backfaceColor = vec3( 0.4, 0.4, 0.4 );
        gl_FragColor = ( gl_FrontFacing ) ? vec4( outgoingLight, diffuseColor.a ) : vec4( backfaceColor, opacity );
        `
    )
};

This method should give the desired visual result. Just remember to set material.side = THREE.DoubleSide.

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

For more advanced options, check out .

Using three.js version r.148

Answer №2

If you're looking to customize the material or color of the inside of a mesh that is being clipped, take a look at my THREE.SectionHelper class. You can see a demonstration in this fiddle.

var sectionHelper = new THREE.SectionHelper( mesh, 0xffffff );
scene.add(sectionHelper);

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

Updating controller variables when the route changes in AngularJS

I'm new to the AngularJS scene and I've encountered a challenge. My goal is to have the selected tab change dynamically based on the URL changes. Here's my JavaScript code: app.config(function($routeProvider, $locationProvider){ $rou ...

javascriptangularjsangularjs-directiveangularjs-scopeangular-routing

``If you're looking to retrieve, modify, and display information in your Vue application with the help of

I'm facing an issue where I am trying to retrieve data using the axios get request and then updating it based on the response of another axios get request. However, I am unable to display the data from the second request. The following is a snippet o ...

javascriptapivue.jsvuejs2axios

Incorporate a new item into an array within a JSON `document` using Node.js for every incoming request

I'm facing an issue with storing multiple sets of x, y coordinates in a file on the server side. Currently, when a user right clicks on an image on the frontend, the coordinates are sent to the node server via AJAX post request and saved as objects in ...

javascriptjsonnode.js

Can you provide guidance on decompressing SVGZ files using JavaScript?

I'm currently working on implementing a high-resolution world map using SVGZ instead of the standard SVG format, aiming to provide my users with a more intricate and detailed visualization. Although I have experimented with utilizing js-deflate to de ...

javascriptjquerysvgraphaelsvgz

Encountering a problem when looping through a JSON response

After making an Ajax call, I received the JSON response below. studentList: { "currentStudent":0, "totalStudent":11, "studentDetails": [{ "adId":1, "adName":"BMB X5", "sfImage":{ "imageName":"Desert", "image ...

javascriptjqueryjsonfor-loop

What is the purpose of re-checking the user in the passport.deserializeUser function?

After reading multiple articles on how to utilize passport.js, I'm left wondering why user verification is repeated within the passport.deserializeUser function. The code snippet looks like this: passport.deserializeUser((id, done) => { console. ...

javascriptnode.jspassport.js

Steps for dynamically adjusting form fields depending on radio button selection

I am looking to create a dynamic form that changes based on the selection of radio buttons. The form includes textfields Field A, Field B, ..., Field G, along with radio buttons Radio 1 and Radio 2. I need to update the form dynamically depending on which ...

javascriptjqueryhtmlforms

Utilizing a Promise in NodeJS and Express to effectively capture the writing functionality of the HTTP module

Currently, I am in the process of developing an Express application with the following components: NodeJS v8 express (latest version) As I delved into the workings of the onHeaders module and observed how it alters the HTTP headers, I became keen on lev ...

javascriptnode.jshttpexpress

Trigger the function upon displaying the modal

Within my Bootstrap project, I have set up a click event to trigger a modal as follows: $('#make_selects_modal').appendTo("body").modal('show'); My requirement is to run a function called pickClient when this modal is displayed. I att ...

javascriptjquerytwitter-bootstrap

Troubleshooting angular radio input display issue caused by controller updates

When the page loads, my AngularJS controller.js initializes the scope model by fetching data from an AJAX response: services.InitializePage().then(function (response) { $scope.DataModel = response.data; Shortly after that, the model undergoes ...

javascriptangularjs

Where should custom PHP code be placed in Prestashop 1.7.5?

Currently, I am facing the challenge of incorporating a custom PHP code snippet into Prestashop's file structure so that it is accessible on all pages such as the cart, categories, and CMS pages. After some research, I have found suggestions to place ...

javascriptphpajaxprestashop

Customize Meta tags in Next.js 13.4

I am facing an issue with overriding the meta tag in my RootLayout.js file. Whenever I try to add a new viewport meta tag, it ends up duplicating the existing one. Can anyone help me find a solution to this problem? RootLayout.js <html lang="en&q ...

javascriptreactjsnext.js13

Transform the collection of nested objects into an array of objects with identical key-value pairs and then output the result after each iteration

My goal is to transform an object with objects inside into an array of objects. The initial data looks like this: "data" :{ "tDetails": { "tName": "Limited", "tPay": "xyz" } ...

javascriptjson

Retrieve the color of the TripsLayer in deck.gl

layers.push(new TripsLayer({ id: 'trips', data: trips, getPath: (d: Trip) => d.segments.map((p: Waypoint) => p.coordinates), getTimestamps: (d: Trip) => d.segments.map((p: Waypoint) => p.timestamp), ...

javascriptjsonwebdeck.glgetcolor

Determine the number of days without including weekends and holidays using JavaScript

I am working on a code that calculates the total number of days excluding weekends and specified holidays. After researching on various platforms like stackoverflow and adobe forum, I have come up with the following code. If a public holiday falls on a w ...

javascriptdate

Optimizing Midnight UTC+0 Setting in JavaScript Date Functions

I am using an MUI Datepicker that allows me to choose a day without specifying the time. For example, if I select 01.09.1970, in the console log it displays as Tue Sep 01 1970 00:00:00 GMT+0100 (Central European Standard Time). This indicates that even tho ...

javascriptasp.net-corematerial-uiglobalization

Utilizing $.when to merge AJAX requests and then passing the resulting data to a designated function

I am struggling with sending data between functions and using $.when in my JavaScript code. I have separate functions and AJAX calls that update content on the page, but they need to load together on page load. Despite trying various solutions to combine A ...

javascriptjqueryajaxjsonmultiple-instances

Subtracting 25% from the width of the web browser

After spending some time trying to solve this issue by myself, I've decided to reach out for help here where I know I can get some great responses. I am looking to determine the dimensions of the browser window minus 25%. Specifically, I have a two-c ...

javascriptjquerymath

Determine the index of a specific character within a string using a "for of" loop

How can I obtain the position of a character in a string when it has been separated programmatically using a for...of loop? For instance, if I wish to display the position of each character in a string with the following loop: for (let c of myString) { ...

javascripttypescript

What is the most efficient method for implementing absolute imports in Webpack 2?

I'm currently working on configuring Webpack for a React project and I'm looking to streamline how I import my components. Ideally, I want to import components like this: import ComponentName from "components/ComponentName" Instead of the more ...

javascriptreactjswebpack