three-terrain-demo1.js

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(
    70, 
    window.innerWidth / window.innerHeight, 
    0.1, 
    1000
   );
  camera.position.z = 7;
  camera.position.y = -10;
  camera.lookAt(0, 0, 0)
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xf3f5f6)
  
  let light = new THREE.HemisphereLight(0xfffafa,0x000000, .7)
  let sun = new THREE.DirectionalLight( 0xcdc1c5, 0.9);
  sun.position.set(-10, -10, 10)
  sun.castShadow = true;

  scene.add(light)
  scene.add(sun)
  
  geometry = new THREE.BoxGeometry(0.4, 0.4, 0.4);
  material = new THREE.MeshNormalMaterial();

  let terrain = new THREE.Mesh(
    new THREE.PlaneGeometry(10, 10, 20, 20),
    new THREE.MeshStandardMaterial({
      color: 0x7CFC00,
      flatShading: true,
      metalness: 0,
      vertexColors: THREE.FaceColors,
    })
  )
  
  for(let i = 0; i < terrain.geometry.vertices.length; i++) {
    terrain.geometry.vertices[i].setZ(Math.random() * 0.5)
  }
  
  scene.add(terrain)
  
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

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