Currently, my setup involves using a PlaneGeometry as the representation of water. I have also added a ship (gltf model) onto the water. The issue I'm encountering is that when the boat slightly overlaps with the water surface, the water is visible inside the boat even though it should be floating. Is there a solution to prevent the water from showing inside the boat or any other models/objects that intersect with it during movement?
To modify the opacity of a mesh in Three.js, you can utilize the AlphaMap property available for every material. By creating a black rectangle to act as a "cut out" for the boat's location on the water plane with an opacity of 0, you can achieve this effect.
If the boat is moving, the texture representing the black rectangle will also need to move accordingly. One solution is to utilize an HTML <canvas> element to draw and animate the black rectangle. Afterwards, you can convert the <canvas> into a texture for the plane's alpha using THREE.CanvasTexture.
const drawingCanvas = document.getElementById( 'drawing-canvas' );
const canvasTexture = new THREE.CanvasTexture( drawingCanvas );
const waterMaterial = new THREE.MeshBasicMaterial({
transparent: true,
alphaMap: squareTexture
});
For a demonstration on how to use a 2D canvas as a texture in a 3D scene, refer to this working demo. By drawing on the top-left square, you can observe the texture being applied to the cube. By adapting this method and utilizing it on material.alphaMap instead of material.map, you can achieve the desired effect.
To enhance the realism of the ship's hull, one could continually monitor the positions of the vertices and adjust the surface accordingly. By using a sufficient number of points on the PlaneGeometry, it becomes possible to move all vertices inside the ship's hull to align with the closest vertex. Another approach could involve implementing a custom shader, which may offer a more optimized solution. @Marquizzo's suggestion regarding the utilization of the alpha channel presents a viable alternative. Instead of simulating water displacement, one could focus on eliminating the display of water within the ship. To achieve this, an orthographic camera placed above the ship with near and far clipping planes adjusted closely to the plane, coupled with the use of the alpha channel or a CanvasTexture inside it as a rendertarget, would enable the creation of a real-time alpha map that responds to the ship's movements.
The impact of floating is created by using the sine function, which is applied to the y-coordinate. This concept can be applied to move a gltf model (such as a ship) on any coordinate axis.
For instance:
position.y = Math.sin(ship.userData.initFloating + t) * 0.15;
I've been encountering an issue that seems simple, but I haven't been able to find a solution specific to my problem in the forums. The problem arises when I try to display a table of hyperlinks, each linked to an AJAX method with an 'oncli ...
How can I trigger the opening of a new browser window when a visitor clicks the close "x" on my floating layer ad? The close button is within an HTML link code ("a href"), but simply putting a URL in there does not seem to work. <script language=" ...
I am currently in the process of developing a Google maps page that utilizes latitude and longitude data coordinates to generate a heat map displaying the distribution of foxes within a specific area. At present, my application functions properly when the ...
npm install @mui/x-data-grid encounters a problem that throws an error message: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...
I attempted to use the same alertbox for 3 different input elements by converting it into a class and using getElementsByClassName, but unfortunately, it did not work as expected. Here is what I tried: <input type="text" class="form-control date notif" ...
I've been attempting to utilize ajax to load data, but for some reason the checkboxes aren't functioning. Below is the HTML I'm trying to load via ajax: <div class="mt-checkbox-list" > <?php foreach($product_offerings as $row){ $c ...
I'm facing an issue with sending data from my Entity Framework database to a JavaScript script on my webpage. Below is the snippet of code from my MVC Controller: public ActionResult Index() { var wordsToShow = db.Words.Where(w => w.O ...
There seems to be an issue with the Cypress test runner where it is removing X-CSRFToken from the request header, leading to a 403 Forbidden error. I have compared the headers between a manual run and a Cypress test run, and you can see the difference in t ...
<div class='col-sm-6'> <input [(ngModel)]="date" id="date" name="date" class="form-control" required/> </div> $(function () { $('#date').datetimepicker({ format: 'DD/MM/YYYY hh:mm' } ...
Here is my scenario: I have two sets of radio buttons as shown in the code snippet below: <form name="form" method="post" action=""> <label><input type="radio" name="RadioGroup1" value="radio" id="Radio1">Radio 1</label><br> ...
I am attempting to pass a JavaScript variable (a value obtained when a user chooses a random option from a select dropdown menu) into a PHP variable in order to check the attributes of the selected option in my database. The option corresponds to the name ...
As a newcomer to the world of web development, I'm not sure if it's possible to achieve what I have in mind without using PHP. However, I'm willing to give it a shot. Currently, my webpage functions perfectly with JavaScript, HTML, and CSS, ...
Check out this amazing heatmap created by Strava! I'm curious about how they were able to achieve this - it seems like they are using the API to request overlay images based on the network tab. I have my own geo data, but I'm wondering how I can ...
Imagine having a folder structure that looks like this: root |-build |-package.json |-src |-foo |-foo.csproj |-foo.cs |-bar.cs |-bin |-... |-foo.sln Now, if you change the current directory to root\src\foo\bin a ...
Currently, I am working on implementing rtmp streaming using WebView. To achieve this, I referred to the code provided on Stack Overflow under this link The easiest way to play an audio RTMP stream in Android, which was shared by a user named Club. After a ...
In my React application, I am utilizing Redux along with the ChartJS library to create charts. Occasionally, when I extract an array from the global Redux state, it appears in this format: ejeY: Array(7) 0: 43783 1: 85001 2: 100960 3: 752 ...
It's common knowledge that NPAPI will soon be eliminated from Chrome. Is there a substitute for the Jzebra/QZ Java plugin that allows for raw printing (sending raw ESC/P commands) to POS printers? Are there any Chrome APIs (based on HTML5 and Javasc ...
A list of images is being generated in a table-like structure using the code snippet below. Each image represents a cell in this table, with its ID specifying its row and column position. <ul> <li class="row"> <ul> & ...
I am trying to figure out how to add a "discountRate" property to an ng-model object after it has been changed within an ng-repeat block. Check out this example for more information Another example can be found here Although the ng-model is updated as e ...
I am currently working with Material UI v5.11.16 in a nextjs environment using v13.3.0. I followed the official documentation setup for my nextjs project which can be found here. So far, I have successfully integrated Material UI components without having ...