Three.js creates a mesh with a mountainous terrain design

Currently, I am visualizing approximately 59,000 data points by converting them into a texture and applying them to a plane geometry.

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

However, the challenge lies in displaying a heightmap where each data point has a specific height value that needs to be applied to the mesh.

What is the most efficient approach to achieve this? Previously, I used multiple cube geometries to display the data, allowing me to adjust the height individually. Unfortunately, this method severely impacted performance and was not a viable solution.

javascriptthree.jsmeshheightmap

Answer №1

Employing a displacement shader can optimize performance by offloading calculations to the GPU.

Check out this informative article showcasing the benefits of using displacement shaders.

For a practical application of heightmap with displacement shader, take a look at this code snippet.

Answer №2

Before, I had been presenting this information using numerous cube shapes that could be adjusted in height. However, this approach significantly impacted performance, so it was not a viable solution.

You might want to consider utilizing THREE.BufferGeometry along with an index buffer. Take a look at this example of index buffer usage (though it's not specifically for three.js) https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL

Here is a demonstration you can refer to

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

Using Javascript/NodeJS: Array becomes empty when values are pushed within a forEach loop

Experiencing a small hurdle here. Take a look at the code: Scenario A: var foundRiders = []; riders.forEach(function(rider){ Rider.findOne({_id: rider}, function(err, foundRider){ if(err){ ...

javascriptnode.jsmongoosenpmforeach

The second asynchronous function relies on the completion of the first

Despite dedicating two days to exploring async/await and promises, I am still unable to make it work correctly. The challenge lies in the fact that the second await for b relies on the result of the first a. It seems no matter what approach I take, b keep ...

javascriptnode.js

Suggestions for changing sub-component data in Vue

I have a scenario where I am using a component with tabs inside. The Head component (parent) includes the following code: <v-btn @click="setSelectedTab('Set') "> ... <component :is="selectedTab"></component> ...

javascriptvue.jsnuxt.js

"Choose between OrbitControl and TrackballControl for enhanced camera movement functionality

After researching extensively, I have been using TrackballControls for rotating an object along all three axis. However, there are instances where I need to manually set a new camera position/rotation which is proving to be challenging with this control. ...

three.js

I am trying to figure out how to dynamically set the deployUrl during runtime in Angular

When working with Angular, the definition of "webpack_public_path" or "webpack_require.p" for a project can be done in multiple ways: By setting the deployUrl in the .angular-cli.json file By adding --deployUrl "some/path" to the "ng build" command line ...

javascriptjsonangulartypescriptwebpack

Create a new URL using `window.URL.createObjectURL` and specify the filename to open the PDF

Is there a way to customize the filename in createObjectURL of the blob? Currently, it generates a URL like this: <URL>/bfefe410-8d9c-4883-86c5-d76c50a24a1d const data = window.URL.createObjectURL(newBlob); const pdfWindow = window.open(); pdfWindo ...

javascripturlwindow

Javascript function for downloading files compatible with multiple browsers

When working with a json response on the client side to build content for an html table, I encountered an issue with saving the file to the local disk upon clicking a download button. The csvContent is generated dynamically from the json response. Here&ap ...

javascriptjqueryhtmldom

Tips on verifying if user x has sent over two messages in the chat and concealing their identity

I have a JavaScript chat application that is causing me some trouble. I recently implemented a feature to display user names on top of messages, and while it works well for the first message, I am struggling to hide the user's name when they send subs ...

javascripthtmlcss

What is the method for starting the JavaScript debugger in Google Chrome?

I'm looking to debug some JavaScript code in Google Chrome. Can anyone guide me on how to do that effectively? ...

javascriptgoogle-chromedebugginggoogle-chrome-devtools

Implementing live content updates using setTimeout in Node.js with Express and Jade

Hey there! I'm a beginner with node and I'm interested in having HTML content update dynamically every second. I've managed to update a value using `setTimeout` but I have to refresh the page to see the change. var jade = require('jade ...

javascriptnode.jsexpresspug

Tips for Utilizing CSS Overflow: Hidden to Prevent the Parent Container from Expanding

I have a fixed width column and a fluid column. In the fluid column, I want to display a string with nowrap so that it does not overflow the container. Here is an illustration of how I want the text to appear: --------------------------------------------- ...

javascriptjqueryhtmlcss

What is the most efficient way to implement hiding/showing elements, adding/removing classes, and optimizing code in jQuery?

Looking for a more elegant solution to toggle classes on a div when clicking a button? Current code logic: jQuery(document).ready(function($) { // Removing/adding classes to show/hide div elements on button click // More efficient w ...

javascriptjqueryhtml

Exploring the power of parent-child functions in Ajax promises

Trying to validate tag input against a database using an ajax call with taggle.js. The taggle documentation states to use return false on the onBeforeTagAdd event in order to prevent a tag from being added. However, due to the asynchronous nature of ajax ...

javascriptjqueryajaxpromise

What is the best way to incorporate 2D collision detection for the lower portion of the obstacles in my game design?

When the square ball bounces off the top of the obstacles but goes straight through if coming from the bottom, what adjustments can I make to the collision detection code to check for collisions from the bottom as well? Any help is greatly appreciated. Her ...

javascripthtmlcanvascollision

Developing client-side components with NextJS

I want to develop a single-page landing page where users can upload videos and there's a file size limit check before the upload. In my src/app/page.tsx file, I have the following code: import React from 'react'; import FileUpload from &apo ...

javascriptreactjstypescriptnext.js

Tips for initiating and terminating the evaluation of a condition at regular intervals using JavaScript

I'm currently working on a JavaScript application where I need to achieve the following: Periodically check every 5 seconds to see if there is an element with the 'video' tag on the page. Once an element with the 'video' tag ...

javascriptjqueryhtmlvideo

Choose the specific selector following the current selector

Consider this example of code: <script> $(document).ready(function () { $('span').each(function () { $(this).html('<div></div>') ; if ( $(this).attr('id') == 'W0' ...

javascriptjqueryhtmljquery-selectors

Modify requests to targeted URLs manually in Browsersync

In my current setup, I am utilizing BrowserSync in a unique way. I have my web server (Apache in a Docker container) proxied, but I am also serving hot module replacement (HMR) from a Webpack dev server. In my local development environment, the configurat ...

javascriptexpressbrowser-sync

Simple solution to resetting class in an element upon clicking another element

Is there a way to reset the glyphicon of one column back to its original state when another column is clicked while sorting a table using bootstrap glyphicons? $('.tablePointer').click(function() { $(this).find('i').each(func ...

javascriptjqueryhtml

Ways to switch the class of the nearest element

When an image within the .process class is clicked, I am using the following code to toggle the class of .process-info to .process--shown. The code successfully toggles the class; however, it affects all elements on the page with the class of .process-inf ...

javascriptjquery