I am encountering challenges with integrating procedural terrain generation on my three js project

Hello there friends, I've discovered a fantastic library for procedural terrain generation called https://github.com/IceCreamYou/THREE.Terrain. I'm excited to incorporate this into my code!

Insert your code below:

  const scene = new THREE.Scene();
  
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,0.01, 100000);
    camera.position.set(50, 10, 50)
      camera.position.z = 10
       
       
    const renderer = new THREE.WebGLRenderer();
    renderer.shadowMap.enabled = true;
    renderer.setClearColor(0xcccccc, 1.0);
    renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
 
  const controls = new THREE.OrbitControls( camera,renderer.domElement );
    controls.screenSpacePanning = true;
    const sceneMeshes = [];
    
    const axesHelper = new THREE.AxesHelper( 1000 );
    scene.add( axesHelper );
    axesHelper.position.y = 0
    
    const shadowLight = new THREE.DirectionalLight(0xffffff, 0.6);

    // Set the direction of the light  
    shadowLight.position.set(150, 350, 350);
    // Allow shadow casting 
    shadowLight.castShadow = true
    // define the visible area of the projected shadow
    shadowLight.shadow.camera.left = -400;
    shadowLight.shadow.camera.right = 400;
    shadowLight.shadow.camera.top = 400;
    shadowLight.shadow.camera.bottom = -400;
    shadowLight.shadow.camera.near = 1;
    shadowLight.shadow.camera.far = 10000;
        // define the resolution of the shadow; the higher the better, 
        // but also the more expensive and less performant
    shadowLight.shadow.mapSize.width = 2048;
      shadowLight.shadow.mapSize.height = 2048;
        // to activate the lights, just add them to the scene
    scene.add(shadowLight);
 
  
const animate = function (){ 
            requestAnimationFrame( animate );               
            renderer.render( scene, camera );
        };
        
animate();

Normal Scene Please lend me your expertise for my project.

Answer №1

Check out this demonstration based on the code provided, showcasing the default approach of utilizing THREE.Terrain to create a terrain mesh:

 const scene = new THREE.Scene();

 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 100000);
 camera.position.set(0, 250, 1000)


 const renderer = new THREE.WebGLRenderer();
 renderer.shadowMap.enabled = true;
 renderer.setClearColor(0xcccccc, 1.0);
 renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);

 const controls = new THREE.OrbitControls(camera, renderer.domElement);
 controls.screenSpacePanning = true;
 const sceneMeshes = [];

 const axesHelper = new THREE.AxesHelper(1000);
 scene.add(axesHelper);
 axesHelper.position.y = 0

 const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.6);
 scene.add(hemiLight);

 const shadowLight = new THREE.DirectionalLight(0xffffff, 0.8);

 // Set the direction of the light  
 shadowLight.position.set(0, 1000, 0);
 // Allow shadow casting 
 shadowLight.castShadow = true
 // define the visible area of the projected shadow
 shadowLight.shadow.camera.left = -400;
 shadowLight.shadow.camera.right = 400;
 shadowLight.shadow.camera.top = 400;
 shadowLight.shadow.camera.bottom = -400;
 shadowLight.shadow.camera.near = 1;
 shadowLight.shadow.camera.far = 10000;
 // define the resolution of the shadow; the higher the better, 
 // but also the more expensive and less performant
 shadowLight.shadow.mapSize.width = 2048;
 shadowLight.shadow.mapSize.height = 2048;
 // to activate the lights, just add them to the scene
 scene.add(shadowLight);

 //

 // Generate a terrain
 var xS = 63,
   yS = 63;
 terrainScene = THREE.Terrain({
   easing: THREE.Terrain.Linear,
   frequency: 2.5,
   heightmap: THREE.Terrain.DiamondSquare,
   material: new THREE.MeshLambertMaterial({
     color: 0x654321
   }),
   maxHeight: 100,
   minHeight: -100,
   steps: 1,
   xSegments: xS,
   xSize: 1024,
   ySegments: yS,
   ySize: 1024,
 });
 // Assuming you already have your global scene, add the terrain to it
 scene.add(terrainScene);


 const animate = function() {
   requestAnimationFrame(animate);
   renderer.render(scene, camera);
 };

 animate();
body {
  margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f98d918b9c9cb9c9d7c8cac8d7ca">[email protected]</a>/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25514d57404065150b1416140b16">[email protected]</a>/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b6f73697e7e356f7e69697a72753571685b29352b352b">[email protected]</a>/build/THREE.Terrain.min.js"></script>

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

JavaScript believes that the function is not defined, despite its clear existence

This question pertains to an issue regarding the recognition of Bookshelf.js model function as a function. The error message "Function is undefined, Bookshelf.js model function is not being recognized as a function" arises when trying to POST to the login ...

Having trouble getting a NodeJS sample app to start up because it can't locate the 'config' file?

I am currently delving into the world of Node.js and have been attempting to launch a sample application that I recently acquired from a git repository: https://github.com/madhums/node-express-mongoose-demo Despite diligently following all the provided i ...

Issue with jQuery element disappearing as it scrolls out of view

I'm currently in the process of creating a schedule, and it's going well so far. However, there is one feature that I'm struggling with. Within an ul element that has a fixed height to enable scrolling, there are "Labels" (li.dayLabel) that ...

Retrieving information selectively using useSWRImmutable

Having issues fetching data using useSWRImmutable. The problem arises when attempting to display the fetched data inside the UserRow component. Even though I can successfully print the data outside of the UserRow component, any console.log() statements wi ...

Tips on enhancing SauceLabs javascript queries in your selenium testing for faster speeds?

My experience running Selenium tests on the Chrome browser in SauceLabs has been quite frustrating due to the sluggish performance. One of the major issues I have encountered is the significant delay in javascript queries, taking about 200ms to return res ...

Using JavaScript to toggle the iron-collapse property

I've implemented multiple <iron-collapse> elements with unique IDs, each one corresponding to a <paper-icon-button>. On screens wider than 650px, I can interact with the <iron-collapse>s using their respective buttons. But on narrow ...

Fade in background color with jquery when scrolling

Is there a way to make the header background fade in after scrolling a certain number of pixels? The code I have sort of works, but not quite right. Any suggestions? Thank you! $(function () { $(window).scroll(function () { $(document).scrol ...

Requesting data from a database using a GET method

I am aiming to develop a NodeJS application that can serve a JSON array fetched from a database. To implement this, I have incorporated the use of express along with sqlite and sqlite3 packages. Upon executing the code in the terminal, the following output ...

Is there a method to have a MeshPhongMaterial disregard the influence of all lights?

Currently working with ThreeJS version r67, I have created a static room where the lighting is pre-baked to avoid affecting it. However, I also have a person object within the room that requires the lighting effects. Is there a method to configure all ma ...

error occurred while looping through json array

i am encountering an issue with a code that keeps returning an "undefined" message instead of the expected HTML output. Purpose of function: the aim of the following function is to display notifications in a manner similar to those on Facebook. The code se ...

Clicking on a DIV element with the contenteditable attribute set to "true" does not automatically focus the element

Currently, I am using jQuery to dynamically add the content editable attribute to a DIV element. $('div').attr('contenteditable', 'true'); However, when I click on this newly modified DIV, it does not exhibit the focus effec ...

The Angular $digest cycle ensures that the entire view is refreshed, rather than just a portion

Encountering a peculiar problem in Angular 1 where the script is getting stuck in an endless loop, eventually causing the browser to freeze. Here's what I'm attempting: <script> $scope.A = true; $scope.B = [{blah},{blah}]; $sc ...

When trying to show a Vue view, there was an issue with reading properties of null, specifically the 'style' property

I am experiencing an issue with a header that has an @click event in the body. Instead of displaying a Vue view upon clicking, I am encountering the following error: Cannot read properties of null (reading 'style') Upon researching on Stack Ove ...

Troubleshooting the issue of executing a script following the usage of jQuery's .after

My goal is to determine the number of div elements on a page and then insert my ad codes after the second div. It seems like using jQuery's .after method is not effective in this scenario. <script> $(function() { var count = $('.pa ...

There was an error of "Uncaught TypeError: CANNON.NaiveBroadPhase is not a constructor"

I've been diving into cannon.js and encountering the following error: Uncaught TypeError: CANNON.NaiveBroadPhase is not a constructor. I've tried numerous solutions but none seem to be working. Here's a snippet of my script: var scene, came ...

Guide to ordering two arrays using a common randomized sorting method

Currently, I am working on a quiz application using jQuery and JavaScript. In the code snippet below, I have a function that is supposed to randomize a set of possible answers for a question along with corresponding photos. Each photo matches one of the a ...

No response when mouse hovers over Three.js mesh with ray intersection

I'm facing difficulty setting up a website that operates within a single WebGL element. I am specifically struggling with detecting when the mouse is hovering over an object. Despite my efforts, using planes with transparent textures as links does not ...

Angular - Displaying a notification when the timezone does not align with the current moment in time

I am currently working on an angular project where users are only allowed to create tasks for today or future dates using a date picker. I have implemented the <mat-datepicker> along with moment to disable past dates. <mat-form-field formGroupNa ...

Tips for incorporating a plugin and utilizing an external module or file on RT

My node.js application/module is currently functioning well with a plug-in concept. This means that my module acts like a proxy with additional capabilities, such as adding new functionality to the existing methods. To achieve this, follow these steps: Cl ...

Maximizing the worth of itemtype using jQuery: A guide

My goal is to include an 'itemtype' attribute in the body tag, body.page-body.ng-scope.device-lg(itemscope='', itemtype='') I attempted the following method $('body').add(itemtype='t1'); Unfortunately, ...