Tips for changing the "Height map image link" in a Mesh.CreateGroundFromHeightMap on babylonjs

I recently started using babylon.js and am experimenting with the CreateGroundFromHeightMap function. I want to change the URL for the Height Map parameter in babylon.js but I'm unsure how to do so.

Here is the code I have written to create it:

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "textures/heightMap3.png",1000, 1000, 100,-100, 100, scene, false);

Do I need to completely delete the current ground instance and load a new one, or is there another way to update the height map URL? If deletion is necessary, should I only use: ground.dispose()?

Thank you for any assistance.

javascriptthree.js3dbabylonjs

Answer №1

Updating the image used to create the mesh is a complex task.

Once the image is downloaded, the mesh's geometry is generated and the image is no longer needed. The only way to simulate an "update" mechanism is by disposing of the old mesh and creating a new mesh with a newly downloaded image.

Keep in mind that the function CreateGroundFromHeightMap operates asynchronously. You can include an "onSuccess" callback to manage the transition from the old mesh to the new one:

let groundMesh;

function updateGroundMesh(newUrl, onSuccess) {
    if(groundMesh) groundMesh.dispose();
    groundMesh = BABYLON.Mesh.CreateGroundFromHeightMap("ground", newUrl ,1000, 1000, 100,-100, 100, scene, false, onSuccess);
}

updateGroundMesh("image1.jpg", () => {
    updateGroundMesh("image2.jpg");
});

This approach is basic and will only update once, potentially with some delay between loading the second image. It definitely has room for improvement :-)

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

What is the proper way to utilize the name, ref, and defaultValue parameters in a select-option element in React Meteor?

I recently developed a Meteor project using ReactJS. I have a Create/Edit page where I use the same input field for various form elements. Here is an example of code snippet that I currently have: <FormGroup> <ControlLabel>Province</Control ...

javascripthtmlreactjsmeteorreact-bootstrap

What is the best way to display data stored in local storage using React and Typescript?

Is there a way for the data to be displayed on the browser below the save button when I click save? My setup involves using React with a TypeScript template. function ButtonDefaultExample(props: IButtonExampleProps) { const { disabled, checked } = pro ...

javascriptreactjstypescriptreact-tsxreact-typescript

Creating a canvas texture on tube geometry with three.js for optimal display on iPad devices

I have a 3D model of a tube geometry with 18000 coordinates on the production side. To simplify, I am selecting every 9th coordinate to plot 9000 coordinates for building the tube geometry using only the CanvasRenderer. When utilizing vertexColors: THREE. ...

javascriptjsonipadhtml5-canvasthree.js

Utilizing a .ini file to assign variables to styles elements in Material-UI: A comprehensive guide

I need to dynamically set the background color of my app using a variable retrieved from a .ini file. I'm struggling with how to achieve this task. I am able to fetch the color in the login page from the .ini file, but I'm unsure of how to apply ...

javascriptnode.jsreactjsreduxmaterial-ui

Managing numerous callbacks for a specific route within Express.js

After going through the Express.js documentation, I came across a section discussing how to handle callbacks for routes using the syntax: app.get(path, callback [, callback ...]) However, I encountered difficulty in finding an example that demonstrates ...

javascriptnode.jsexpress

What are some solutions for resolving the npm error code elifecycle issue?

After following the documentation, I successfully installed React JS but encountered an error when trying to run the app. The error code displayed was elifecycle npm err errno 1. Can someone please assist me in resolving this issue? Additionally, it's ...

javascriptnode.jsreactjsnpmnpm-start

Is there any assistance available for incorporating Slimbox and loading images through JavaScript?

I have exhaustively searched online for a solution to my problem, but without any luck. So now I am reaching out to the experts who know exactly what they're doing. Currently, I'm in the process of loading images from Facebook using a handy jQue ...

javascriptajaxloadlightboxslimbox

Exploring the integration of Styled-components in NextJs13 for server-side rendering

ERROR MESSAGE: The server encountered an error. The specific error message is: TypeError: createContext only works in Client Components. To resolve this issue, add the "use client" directive at the top of the file. More information can be found here i ...

javascripttypescriptnext.jsstyled-componentsserver-side-rendering

Transform a flat 2D shape into a dynamic 3D projection using d3.js, then customize the height based on the specific value from ANG

Currently, I am utilizing d3.js version 6 to generate a 3D representation of the 2D chart shown below. Within this circle are numerous squares, each colored based on its assigned value. The intensity of the color increases with higher values. https://i.ss ...

javascripthtmlangularjsangulard3.js

default browser's drag and reposition feature

I'm trying to make an image draggable on my webpage by using default browser behavior, but it's not working for some reason. Here is the code snippet I'm using: <div style="position:relative;width:1000px; height:900px;border:solid;z-inde ...

javascriptjqueryhtml

Encountered an error: data.map is not functioning as expected in the React component

Hi there, I've encountered a small issue with my modal component. The error message I'm getting is: Uncaught TypeError: meatState.map is not a function. Any suggestions on what may be causing this problem? Your assistance would be greatly appreci ...

javascriptreactjs

Make sure to include the environment variable in the package.json file before running Cypress in headless mode

I am trying to determine whether Cypress is running or not within a NextJS application. My goal is to prevent certain http requests in the NextJS application when Cypress tests are running. Currently, I am able to detect if Cypress is running by using the ...

javascriptnode.jsnext.jscypresscross-env

Introducing random special characters into currency symbols during the process of exporting data to a CSV file

I'm encountering a strange issue when exporting data to CSV files that contain a currency symbol. An extra junk character is being added to the data alongside the currency symbol. For example, if my data is: France - Admin Fee 1 x £100 The result I& ...

javascripthtmlexport-to-csv

Tips for enhancing the presentation of JSON information

I recently ventured into the world of JSON and JS, managing to create a JSON file to showcase data using .onclick event. While I have successfully generated and displayed the JSON data on screen, my next goal is to present it in a table format for better c ...

javascriptjquerycssjsonstyling

Unlocking Column Data Tooltips in Angular Datatables: A Step-by-Step Guide

I have a single datatable and was wondering how to implement tooltips for when hovering over table cells. I tried the following code snippet, which successfully populated the tooltips. However, I am interested in achieving the same functionality using Angu ...

javascriptangulartypescriptangular-datatables

Potential security concern with Java interpreting JavaScript on the server side

Is there a security risk in evaluating Javascript code submitted from the browser on a server (Java webapp using Rhino Javascript Engine)? The purpose of evaluating the JavaScript is simply to determine its validity. No results are expected from the eval ...

javajavascriptsecurityrhino

There is no information stored in req.session.passport, and req.user is not defined

I've previously raised a similar issue, but it was under the Javascript category. I now have more specific insights into what might be causing the problem. The main issue is that req.session.passport appears empty in my logs. As I navigate through my ...

javascriptnode.jssessioncookiesexpress

Steps to resolve the days.map error:

My map function is, days.map((val)=>val) Upon consoling the days prop, I receive the following output: [Array(7)] 0: (7) ['', '', '', 'Wednesday', '', '', 'Saturday'] length: ...

javascriptreactjsmern

Create Joi Schema based on TypeScript types/interfaces

Searching for a way to convert Typescript types or interfaces into joi schema objects led me to various solutions that did the opposite, such as generating Typescript types/interfaces from joi schemas. I came across options like ts-interface-builder and ts ...

javascriptnode.jstypescriptjoi

Setting the value of a custom component property dynamically after the component has been rendered

I'm currently developing an Angular application and have a specific requirement to work on. I am using a custom component with 3 inputs, and I want to bind this custom component tag in the HTML of my page. <my-column [setInfo]="info" [dis ...

javascriptangulardomcomponents