Generating landscapes with longitude and latitude coordinates in three.js

Is there a way to transform a cube geometry into a terrain based on latitude and longitude data? I have an array of objects with latitude, longitude, and deformation values for specific coordinates.

var geo = new THREE.CubeGeometry( 10, 20, 40, 40, worldWidth, worldDepth);
var worldWidth = 100, worldDepth = 100;
for ( var i = 0; i < worldWidth; i++ ) {
    for ( var j = 0; j < worldDepth; j++ ){
        for (var k = 0; k < locations.length; k++ ) {
            var index = j * worldWidth + i;
            var x = worldWidth * (locations[k].lng + 180) / (2 * 180);
            var y = worldDepth * (locations[k].lat + 180) / (2 * 180);
            var dx = i - x;
            var dy = j - y;
            var dist = Math.sqrt( dx*dx + dy*dy );
            if ( dist < .5 ) {
                geo.vertices[index].x += locations[k].count * .05;
            }
        }
    }
}

This code currently raises the vertices closest to the latitude and longitude coordinates. How can I smooth the terrain around each location to create a more realistic terrain instead of spikes?

Answer №1

Hey there! It seems like you're interested in subdividing the mesh to smooth out the peaks and valleys. You can achieve this by using a Modifier, just like in this cool Three.js example:

Here are the key steps to follow:

1) Make sure to use the most recent version of Three.js

2) Download the SubdivisionModifier.js file and link it in your project:

<script src="js/modifiers/SubdivisionModifier.js"></script>

3) Initialize the modifier (try experimenting with a value, like 3):

var modifier = new THREE.SubdivisionModifier( 3 );

4) After manipulating your vertices and before rendering the geometry on a mesh, apply the modifier like this:

geometry.mergeVertices();
geometry.computeCentroids();
geometry.computeFaceNormals();
geometry.computeVertexNormals();

modifier.modify( geometry );    

Give it a shot and let us know how it goes! I'm curious to hear about your experience with it.

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

Modifying the content of a paragraph by incorporating information from various sources

I need a way to input measurements for my items in text fields, and then with the click of a button, transfer those measurements into a paragraph in corresponding fields. The code I am currently using is shown below: <!DOCTYPE html> <html> & ...

Ways to maintain a pointer to a RequireJS module?

Understanding the inner workings of RequireJS has been a bit challenging for me, as the official website doesn't provide clear explanations on fundamental concepts like how to utilize the 'require' and 'define' methods. Currently, ...

Is your JQuery Gallery experiencing issues with the next button function?

I'm working on developing a simple gallery using JQuery. The main concept is to have all image files named x.png (where x is a number), and the program will then add a number to the current one, creating x+1.png and so forth. Here's the code I ...

Removing classes from multiple elements on hover and click in Vue 2

Can Vue be used to remove a class from an element? I am looking to remove the class when hovering over the element, and then add it back once the mouse is no longer on the text. Additionally, I want the class to be removed when the element is clicked. He ...

javascript function not being invoked

Currently, I have incorporated the following HTML <html> <head> <Title>EBAY Search</title> </head> <script language="JavaScript" src="ajaxlib.js"></script> <body> Click here & ...

Is the disable feature for React buttons not functioning properly when incorporating Tailwind CSS?

import React, { useState } from "react"; import facebook from "../UI/icons/facebook.png"; import Button from "../UI/Button/Button"; import Card from "../UI/Card/Card"; import twitter f ...

Vue: Develop a master component capable of displaying a sub-component

Is there a way to design a main component that is able to accept and display a subcomponent? Take the following scenario for instance: <Container> <Item/> <Item/> <SubMenu/> <Btn/> </Container> ...

Learn the best way to efficiently transfer multiple checkbox selections in a single object using AJAX

In my form, I have 4 checkboxes with unique IDs like filter_AFFILIATION_1, filter_AFFILIATION_2, and so on up to 4. My goal is to dynamically send the values of checked checkboxes to the server using an ajax call. Below is the snippet of my code: $(&a ...

Error Encountered: Invalid Parameter Type when Retrieving Item from AWS Dynamo

I've been facing issues when trying to establish a connection between my ReactJS application and AWS DynamoDB. Despite confirming the correctness of the API key, secret key, and region, I keep encountering an InvalidParameterType error. I have even at ...

What are some methods to secure my API keys within my React application?

What steps can I take to secure my api keys in my react application? Should I incorporate something with express? My goal is to avoid creating any server-side components to handle the API calls. Currently, my backend is managed by firebase but I also uti ...

Is it possible to transform an array into a JSON file and securely store/upload it in an AWS S3 bucket?

Recently, I started exploring aws and its capabilities. Currently, my focus is on developing a web application that allows users to input text in two separate fields. Subsequently, this text will be converted into a Json file and stored in the S3 bucket. ...

What is the best way to declare a global variable while making an asynchronous call using AngularJS?

Is there a way to utilize the single_video variable outside of the controller function? The issue arises when attempting to access it in the second console.log, as it returns an 'undefined' error due to asynchronousity despite successfully printi ...

Using local storage with github sites can lead to some unexpected and peculiar behavior

Currently, I am working on a simple clicker game using HTML and JavaScript. To store the variables money and taxCollecters, I have implemented local storage. However, I am encountering strange issues when trying to use the save and load buttons on the Gi ...

Concerning the Animation using Three.js

I am currently experimenting with a three.js animation project where I have integrated a sphere into my scene. I am interested in changing the cursor to a hand icon whenever it hovers over the sphere. Can anyone provide guidance on how to achieve this? He ...

Establish a connection with the hivemq broker using MQTT protocol

Within my app.js file: const mqtt = require('mqtt') const client = mqtt.connect('mqtt://localhost:1883') topic = 'testTopic' client.on('connect', ()=> { client.subscribe(topic) }) client.on(&a ...

Ways to retrieve Data obtained in response using superagent

I am currently working on hitting an API and extracting the data received in response. To achieve this, I am utilizing superagent to retrieve the data from the API. I have inspected my network tab, however, I am encountering an issue where I want to extra ...

Struggling to find the element using Selenium

Hey there, I'm struggling with identifying the input id button in my HTML code while using Selenium through Java. The error message says it's unable to locate the element. Can anyone provide some guidance? I've already tried using xpath and ...

Adding a Bearer Token to a GET request using location.href: A step-by-step guide

At the moment, I have all my ajax requests sending an Authentication token. However, I have created a service for exporting to excel and since ajax doesn't support that, I am using location.href for the get request. Is there a way to include the token ...

Acquiring data within a jade template in order to generate static HTML pages

I am struggling to pass data to a jade template in order to generate static content. While I am not well-versed in node.js and express, I use jade as a template engine for creating static html. Many of the requests in the jade issue list pertain to includ ...

ExpressJS, defining routes, locating controllers, and documenting APIs

Utilizing expressJS 4.X and nodeJS 6.x In the past, I was defining my routes in this manner : /** * @api {get} /users/:userId Get a user * @apiName GetUser * @apiGroup User * * @apiParam {Integer} userId Users unique ID. * * @apiSuccess (Success 2 ...