3D Landscape Visualization using Three.js

Looking for experts in THREE.JS to help me create a map grid reminiscent of SimCity, with dimensions of 50x50. I have successfully rendered blocks of ground with varying heights (as shown in the screenshot), but now I am seeking a way to smoothly blend these height transitions to achieve a more realistic relief while still adhering to the 50x50 grid layout. Similar to SimCity, I want users to be able to change the type of landscape and alter the relief accordingly.

Image: Current Progress - Image: Desired Outcome

The current implementation involves a json array specifying the XZ coordinates for each cell on the 50x50 map, along with the Y coordinate for the block's height and the terrain type (grass, earth, stone, etc.). Each land block is represented by a BoxGeometry.

I have considered adding vertices to the upper side of the blocks to smooth out the transitions based on their positions, but haven't found a solution yet.

javascriptthree.js3d

Answer №1

One way to achieve this is by using BlockGeometry objects, but the effort required would outweigh the benefits. Analyzing the surrounding terrain for correct rotation adjustments and managing multiple objects at a size of 50x50 can lead to complications. It's more efficient to utilize a single mesh in such scenarios.

The map consists of four cell shapes without considering rotations: flat cells, parallel sloping edges, upward corner bends, and downward corner bends.

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

Instead of blocks, envision your terrain as a seamless surface made up of square cells meshed with four triangles each.

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

When viewing a cell along the negative y-axis, vertices at the corners are labeled as a, b, c, d, and an additional vertex e in the middle. These form four triangles within the cell.

The y-position stored as Y becomes the y-position of vertex e in any given cell.

To determine the y-position of other vertices like b, c, and d, comparisons with neighboring cells provide the necessary information.

Vertex e’s y-position is derived based on specific conditions involving adjacent vertices' y-positions.

Generating the mesh involves following tutorials available online for procedural terrain generation in platforms like ThreeJS.

< To see a proof of concept, visit , and view the source code at https://github.com/pnichols04/sc2k-map. >

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

Implementing a function as the `data-*` attribute for an element in Angular 6

I have a question about my component.ts file: import { Component, OnInit, AfterViewInit, ElementRef, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/platform-browser'; import { environment } from '../../../enviro ...

javascriptangularhtmlangular6

HTML and CSS site lacking responsiveness

I am new to HTML and I have created a page that looks good on desktop, but it is not responsive on mobile devices. Can someone please help me with my HTML and CSS code? .link-menu { color: black; } .topbar-p ...

javascripthtmlcssbootstrap-4

Is there a way to retrieve four random documents from a MongoDB collection using Node.js?

What is the best way to retrieve 4 random documents from MongoDB using node/express.js? I know how to set a limit for the number of retrieved documents, but not specifically for random selection. Any suggestions on how to achieve this? ...

javascriptnode.jsmongodbexpress

Interacting Sibling Components in React: How Button Presses Facilitate Communication in a Login Form

I am trying to establish communication between sibling components in my React application. The idea is to have separate components for the Username and Password fields, with another button component that will request the values from these components and pe ...

javascriptreactjs

Is it possible to create a fixed position shader background in three.js?

Trying to incorporate a pixel shader as a background in three.js without affecting the camera rotation with OrbitControls. Most implementations use a 2D plane, but I want it to remain fixed in the scene. Is there a way to achieve this with two separate can ...

javascriptthree.jsshader

JavaScript Plugins for Cordova

The more I delve into the inner workings of Cordova, the clearer it becomes to me. Yet, one area that continues to perplex me is the structure of JavaScript plugins. Typically, I write my JavaScript code as follows, adhering to what I believe is the stand ...

javascriptpluginscordovacordova-3

Is utilizing Eval on a div within a DataList ItemTemplate feasible for MouseOver event handling?

Apologies for the complicated title. Here is the structure of my DataList: <asp:DataList ID="DataListFloor" runat="server" RepeatColumns="5" > <ItemTemplate> <div style='width:199px;height:166px;background-color: <%# Ev ...

javascripthtmlcssasp.netvisual-studio-2010

What is the best way to include JSON values for specific keys using JavaScript, jQuery, or AngularJS?

Below is a sample of the json: var json = var data = [{ "a": 150 }, { "a": 50 }, { "b": 100 }, { "b": 25 }]; I aim to combine the values of "a" and "b" in a new finaljson(the desired output json), like so: var finaljson = [{ "a": 200 ...

javascriptjqueryangularjsjson

sending XML data through Google Maps API V3

While working on integrating the google maps api v3, I encountered an issue when trying to pass an XML file to populate the map with results. Upon checking the PHP file responsible for generating the XML data, everything seems to be in order. The PHP file ...

javascriptajaxgoogle-mapsgoogle-maps-api-3

Ensure that the default boolean value is set to false rather than being left as undefined

I have a specific type definition in my code: export type ItemResponse = { .... addedManually: boolean; .... } Whenever I parse a JSON response into this type, I encounter an issue: const response = await fetch( `https://api.com` ); con ...

javascriptreactjstypescriptreact-native

At all times, AJAX/PHP/JS will have a readyState of 1 and a Status of 0, with no text response

Recently, I've been attempting to utilize a sample of AJAX to compare form data with an SQL database from a domain at http://www.example.com. However, I'm encountering persistent issues where the readyState remains at 1 and the Status is always 0 ...

javascriptphpajax

Tips for retrieving values from CheckBox in Asp.net MVC using Jquery

I'm currently facing a dilemma while working on an MVC web application. I have dynamically generated checkboxes from my database, but I am uncertain about how to extract the value of the selected checkbox and store it in the database. Any suggestions? ...

javascriptc#jqueryasp.netasp.net-mvc

What is the best way to trigger the onclick event before onblur event?

I have two elements - an anchor with an onclick function and an input with an onfocus event. The anchor is toggled by the input button; meaning, when the button is in focus, the anchor is displayed, and when it loses focus, the anchor is hidden. I'm l ...

javascripthtmlajax

Comparing Node.JS using Typescript versus Javascript to Ruby On Rails

My question can be simplified as follows: 1. Does Ruby perform as well as Node with MongoDB? 2. Should I use Typescript or JavaScript with Node? I come from a .NET background (ASP.NET MVC) and am now venturing into creating an Angular project with a Mongo ...

javascriptruby-on-railsnode.jsperformancetypescript

When clicking on an HTML link pointing to a cloud, it does not open in the same frame but instead opens in a new window

I am currently working on an HTML5 application that features a screen divided into two parts. The left part of the screen contains a few links, and upon clicking one of these links, the resulting content should open in the right side frame within the same ...

javascripthtml

Displaying text from an array in a div using JavaScript with a 2-second delay

I am relatively new to this, so please forgive me if something is not quite right. I have an array filled with different strings of text, and I want to display each string in an HTML div with a 2-second delay between each line. While I have managed to show ...

javascripthtml

Remembering position in JSP using Java Beans

In my "Web Engineering" assignment, I am tasked with developing a Web Application game using JSP, Servlets, and Java Beans. The game mechanics are already in place with the Servlet controlling the algorithms, JSP handling the Model/View, and Beans managing ...

javascriptjqueryhtmljspjavabeans

Manipulating the content within an iframe through javascript executed from the parent document

I have a basic website located in A.html <body> <p class="text">Some text</p> </body> There is also another site that displays A within an iframe on B.html <body> <iframe id="frame" src="B.html" onload="onLoadHan ...

javascripthtmlcssiframe

Instructions for incorporating a glyphicon glyphicon-calendar into a bootstrap dropdown using pug

I am a beginner in the world of pug and I'm trying to include the glyphicon glyphicon-calendar in a dropdown menu labeled "All months". .pull-right select.form-control.btn-primary#selectMonth(style="margin-top: -15px;") option(selected="selecte ...

javascripthtmlcssbootstrap-4pug

Tips for toggling the visibility of a <div> element with a click event, even when there is already a click event assigned

No matter what I try, nothing seems to be working for me. I'm looking to hide the <div id="disqus_thread"> at first and then reveal it when I click on the link "commenting", after the comments have loaded. This particular link is located at the ...

javascriptcssajaxshow-hideblogger