Creating Low-Poly Terrain with a Touch of Serendipity

Looking to create terrain in a low-poly style inspired by the landscapes in Cube Slam and this video. I experimented with the webgl_geometry_terrain.html example, but it's still generating smooth terrain instead of the flat polygons I'm aiming for.

Since I'm new to Three.js, I'm hopeful that there's a straightforward solution to my dilemma.

Answer №1

If you're interested, check out this link for some cool random terrain:

Answer №2

Super easy solution, just utilize THREE.FlatShading (note: also include geometry.computeFaceNormals()):

let geometry = new THREE.BoxGeometry(2, 2, 2);
let material = new THREE.MeshLambertMaterial({ color: 0xdddddd, shading: THREE.FlatShading });
geometry.computeFaceNormals(); // Add this line if you're working with terrain rather than standard geometries like BoxGeometry
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

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

An illustration of webpack 4 and Vue.js compatibility tailored specifically for Internet Explorer 11, featuring multiple entry points

This feels like déjà vu - yet another issue with Internet Explorer and webpack. I'm on the brink of deploying my project when IE 11 decides to mess everything up. I thought I had covered all bases with babel-polyfill and the latest versions, but of ...

What is the process for generating a JavaScript File open dialog box that can display files stored on a server?

On my website, I want clients to be able to access files stored on the server. I need to implement a file open dialog box that displays files available on the server, similar to this code: <input type="file" id="select_file" onchange="openfunction();"& ...

data is currently being uploaded to the storage, however, the grid is not displaying any

After loading JSON data into the store, I am unable to see any data in the grid. Can someone please point out what I might be doing wrong? Here's the code snippet for the grid: { xtype: 'gridpanel', ...

When utilizing React router v5, the exact property in a route may not function as expected if there is a

I am attempting to structure routes like Vue.js in an array format: // routes.js export const routing = [ { path: "/setting", component: Setting, }, { path: "/", co ...

Tips on dividing a div into two separate pages when converting to PDF

I am working on an asp.net MVC project and I need to convert a HTML div into a PDF with two separate pages. Here is an example of my code: HTML Code <div class="row" id="mycanvas"> <p>This is the first part of my content.</p> <p ...

When attempting to compile at runtime without an instance, the act of creating a function constructor can lead to an

My website is designed to function as a simple quiz game. It retrieves an array of JSON questions using AJAX, and for each question in the array, it displays the question itself along with buttons containing various options that were stored in the question ...

Create a shell script file using fs.writeFileSync

Can I create an executable shell script file using fs.writeFileSync? I want to generate a .sh file through a CLI and have it be executable without having to manually run chmod +x "filename" after the file is outputted from the CLI. ...

Utilizing Header and Footer Components in React JS

I'm new to Reactjs(Nextjs) and I am looking to create a "header" and "footer" file that can be used on all pages. I would like to know the best approach to achieve this. Should I create a "Layout.js" file and then call the Header within it? Or should ...

Exploring the Depths of JSON Arrays within Typescript

I am faced with a challenge in extracting the value of the "id" from the following array of JSON data. The issue lies in the fact that the value is enclosed within double square brackets "[[" which are causing complications in retrieving the desired result ...

Transferring Variables to the Following Page Without Using a Form or Changing the URL

I have a question about passing a variable along with a link to exampleA.php without using URL extensions or form submitting. I've done some research and found that most people suggest using Ajax, but I want to handle the variable once I'm on the ...

Tips for enhancing a JSON array by including attributes through JavaScripts

I need help in dynamically constructing JSON using Javascript. { "Events": [{ "Name": "Code Change", "Enabled": "true", "Properties": [{ "Name": "url", "Value": "val" }] }], "Properti ...

Enlarge the DIV element along with its contents when those contents have absolute positioning

When attempting to overlay two divs like layers of content, I encountered a challenge. Because the size of the content is unknown, I used POSITION:ABSOLUTE for both divs to position them at the top left of their container. The issue: The container does no ...

What could be causing the count button to malfunction on my Oracle APEX form?

I am working on creating 2 buttons that can adjust the quantity of products on an orderline, either increasing or decreasing it. https://i.sstatic.net/kFOkP.png My goal is to have the plus and minus buttons modify the quantity value when clicked. I att ...

Working with JavaScript Arrays as Function Parameters

After reading extensively about passing arrays as function parameters for different return values, I encountered an issue when working with three separate JS files. main.js module.exports = function(){ this.deliver = require('./file1.js') ...

Learning how to access the value of a key in an object using JavaScript

I have JSON that looks like this: { "greeting": { "hello": ["world", "josue", "everybody"] } } I'm puzzled by the fact that I can't use a string to access its properties, for example: var str = 'greeting.hello'; var ...

An effective way to connect the ng-model of a <select> element with ng-options within an ng-repeat loop

My task list consists of: [{ Title: "Title1", Position: "9" },{ Title: "Title2", Position: "1" },{ Title: "Title3", Position: "5" },{ Title: "Title4", Position: "7" }] I am attempting to generate a series of <select> ...

Excessive iterations occurring in JavaScript for loop while traversing an array

After addressing the issues raised in my previous inquiry, I have made significant progress on my project and it is now functioning almost exactly as intended. The main purpose of this website is to iterate through the World Of Tanks API to generate cards ...

Using v-for with TailwindCSS animations seems to cause issues

I'm currently working on implementing a list of pop-up messages in the upper right corner of the screen. These messages should disappear when clicked and include a slide-fade transition effect. The transition animation works fine when there is only o ...

Eliminate elements from an array within a promise

I am facing an issue with the currentBillCyclePath parameter in the following function. I need to use this parameter to filter out certain elements after executing the query. However, inside the while loop, the value of currentBillCyclePath is undefined. ...

Is it possible to delete a <div> tag based on screen size using jQuery or JavaScript?

Hello, I was curious if it's possible to dynamically remove a specific div tag using jQuery or JavaScript when the screen reaches a certain size, for example 500px. ...