JSFiddle - React, Tailwind, and code Playground

by cs_brandt

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.js"></script>
<script src="http://www.smartjava.org/examples/heightmap/js/ShaderTerrain.js"></script>
<body>
    <div id="main"></div>
</body>

JavaScript

var CONS = {
      // THREE.JS CONSTANTS
      // set the scene size
      WIDTH: 904,
      HEIGHT: 604,

      // set some camera attributes
      VIEW_ANGLE: 45,
      NEAR: 0.1,
      FAR: 10000,

      CAMERA_X: 1000,
      CAMERA_Y: 600,
      CAMERA_Z: 1300
  }

  var scene = {};
  var renderer = {};
  var camera = {};
  var controls;
  var n = 0;

  initMap();

  // Wait until everything is loaded before continuing
  function loaded() {
      n++;
      console.log("loaded: " + n);

      if (n == 2) {
          terrain.visible = true;
          console.log('ff');
          render();
      }
  }

  function initMap() {
      // setup default three.js stuff
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(CONS.WIDTH, CONS.HEIGHT);
      renderer.setClearColor(0x0000cc);
      
      $("#main").append(renderer.domElement);

      camera = new THREE.PerspectiveCamera(CONS.VIEW_ANGLE, CONS.WIDTH / CONS.HEIGHT, CONS.NEAR, CONS.FAR);
      scene = new THREE.Scene();
      scene.add(camera);

      camera.position.z = CONS.CAMERA_Z;
      camera.position.x = CONS.CAMERA_X;
      camera.position.y = CONS.CAMERA_Y;
      camera.lookAt(scene.position);

      // add a light
      pointLight = new THREE.PointLight(0xFFFFFF);
      scene.add(pointLight);
      pointLight.position.x = 1000;
      pointLight.position.y = 3000;
      pointLight.position.z = -1000;
      pointLight.intensity = 8.6;

      // load the heightmap we created as a texture
      
      var texture = THREE.ImageUtils.loadTexture('http://localhost:3000/heightmaps?center=21.311389,-157.796389&radius=50', null, loaded);
      
      // the following configuration defines how the terrain is rendered
      var terrainShader = THREE.ShaderTerrain["terrain"];
      var uniformsTerrain = THREE.UniformsUtils.clone(terrainShader.uniforms);

      // how to treat abd scale the normal texture
      uniformsTerrain["uNormalScale"].value = 1;

      // the displacement determines the height...