What is the best way to conceal a section of a THREE.PlaneBufferGeometry when it is enclosed within another object?

I am currently faced with a dilemma involving a mesh consisting of a THREE.PlaneBufferGeometry (representing a water surface), with another object on top (a boat). The issue arises when the boat partially enters the water, causing the water to unexpectedly appear inside the boat due to its higher y value.

What steps can I take to resolve this issue?

One possible solution that comes to mind is calculating the interior dimensions of the boat and passing them to the shader of the water surface. This approach would involve hiding any points inside the boat. Is this the most effective strategy, and if so, how can it be implemented?

EDIT: It's important for the water to overlap the sides of the boat as shown in the illustration below:

  Current situation:            Desired situation:

B        A
     |         |                  |         |
-----|---------|--------     -----|         |--------
     |_________|                  |_________|

The goal is to prevent water from being visible inside the boat at point [A], and to hide the lower part of the boat from view at point [B].

javascriptthree.js

Answer №1

Consider deactivating depth writing for the water surface. Take a look at this example where the blue area represents water and the red one represents a boat.

//codepen.io/OlxandrPopov/pen/xwVBKg

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

Is there a way to play back the recorded sound in my JavaScript project?

I recently completed a tutorial on audio recording in JavaScript where an array is used to store the recorded audio and convert it into a URL for playback. The setup includes a button with a function that both records and automatically plays the audio when ...

javascriptaudiop5.js

A guide to transporting an item from coordinates {x,y} to {newx,newy} using Three.js

Given the coordinates X and Y of an object, where Z is always 0, I am seeking a way to smoothly move this object to a new location using Three.js, with a visible animation rather than suddenly appearing in a different spot. UPDATE: Below is a sample code ...

javascriptthree.js

Arranging arrays in Javascript within two dimensions

In my data set, I possess an array that contains tags along with their respective counts. tags_array[0] = tags; tags_array[1] = tags_count; My goal is to rearrange the arrays based on the tag counts to easily identify the most popular tags. ...

javascriptjquerysorting

Having trouble establishing a new local Windows directory structure with Selenium

After following the guidelines provided here and here, I am striving to ensure that the directory where my results reports are stored is consistently available for each user. new File(sampleFolder).mkdir(); The sampleFolder path displayed in the Eclipse ...

javascripteclipsewindowsselenium

"Why is there a need to refresh the page in Vue.js 3 for MathJax to work on initial display, but it doesn't work in step

My goal is to show the same expressions in two steps on a single page, one after the other. I have included links to images here: enter image description here, enter image description here. Along with this, there should be a button that increments a counte ...

javascriptvue.jsmathjax

Step-by-step guide for implementing an "on change" event for a select box within a dialog box

I recently wrote an HTML code snippet like this: <div id = "dialog-1" title = "Dialog Title goes here..."> <select id= "lang" name= "lang"> <option value="1"> TEXT </option> <option value="2"> HTML </op ...

javascriptjqueryangularjsjquery-uijquery-plugins

Issue with Angular promise finally clause not executing

I am facing an issue with my RestService where the finally clause is not getting called in the controller method, even after assuming it would be triggered on either success or failure. My current setup involves using angular 1.3.13. var restService = { ...

javascriptangularjsangular-promise

The Textfield component in Material UI now automatically sets the default date to the current date when using the "date" type

I am using Material UI's textfield with the type set to "date" and I'm experiencing an issue where the date defaults to the current date instead of mm/dd/yyyy. Is there a way to prevent this behavior and display mm/dd/yyyy when the user loads the ...

javascripthtmlreactjsreact-nativematerial-ui

Display an image in an Angular application using a secure URL

I am trying to return an image using a blob request in Angular and display it in the HTML. I have implemented the following code: <img [src]="ImageUrl"/> This is the TypeScript code I am using: private src$ = new BehaviorSubject(this.Url); data ...

javascriptangulartypescript

What type of value does the json method of a response return?

There are various ways to handle responses in Angular 2 when converting the http response into JavaScript object. One way involves using the subscribe method like this: http.get("http://....").subscribe( response => { let result = response. ...

javascriptjsonangular

"Troubleshooting: jQuery Find function not functioning correctly with HTML template

I am having trouble with a Shopify liquid code that I am trying to load into an HTML template <script type="text/template" id="description"> <div class="product-ddd"> {{ product.description }} </div> ...

javascripthtmljqueryshopify

The payload transmitted from JavaScript to Django Views is devoid of any content

I'm currently working on sending data from JavaScript to Django using ajax. Below is the code snippet I am using for this: var json_name = {'name': 123} $.ajax({ method: 'POST', url: ...

javascriptjsonajaxdjango

Javascript: Dynamically Altering Images and Text

One feature on my website is a translation script. However, I'm struggling to activate it and update the image and text based on the selected language. This is the code snippet I am currently using: <div class="btn-group"> <button type ...

javascripthtmlimagetext

When you try to create a popover, a cautionary message pops up indicating that $tooltip is no longer supported. It is

I need help with creating a popover that appears when hovering over an anchor tag. Here is the code I am using: angular: 1.4.2 ui-bootstrap :0.14.2 <div class="row" ng-repeat="endorsement in endorsements| filter: {category:categorySelected}"> &l ...

javascriptcssangularjstwitter-bootstrap

Using JavaScript to load the contents of a JSON file

I attempted to display data from a JSON file on an HTML page using jQuery / Javascript. However, each time I load the page, it remains blank. Below is the code snippet: index.html <!DOCTYPE html> <html> <head> <meta conten ...

javascriptjqueryjson

jQuery UI Slider: Enable handles to move across each other

I have implemented a customized range slider on my webpage located at (see 'Day & Night Shift') to work with hours and minutes in 15-minute increments. $(function() { $("#slider-range").slider({ range: true, min: 0, ...

javascriptjqueryjquery-uiuisliderrangeslider

JavaScript is a powerful tool for reading JSON files

I'm trying to figure out how to parse a nested object in JSON using JavaScript. Here's the code I have so far: var myRequest = new Request('test.json'); fetch(myRequest) .then(function(response) { return response.json(); }) .then( ...

javascriptjsonparsing

Close session when browser/tab is exited

After extensive searching online, I have been unable to find a satisfactory solution for ending a session when a browser or tab is closed without requiring the user to log off. I have attempted numerous JavaScript codes that I came across, but none of the ...

javascriptjqueryasp.netajax

The meteorite experienced a crash as startup.js attempted to connect with Mongo

Setting up a Mongo database for a meteor project has been tricky for me. I've created a startup.js file to load the necessary files, but as soon as I start meteor, it crashes. Can anyone lend a hand, please? Here is a snippet from the HTML file: < ...

javascriptmongodbmeteor

Is there a way to transform an HTMLCollection into an array without depleting it of its elements?

I've been attempting to transform a collection of 4 divs in HTML into an array, but all my efforts seem to lead to the array becoming void. <div class="container"> <div class="shape" id="one"></div> <div class="sh ...

javascripthtmlarraysdom