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: 500,
     HEIGHT: 500,

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

     CAMERA_X: 1300,
     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;
         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 = 2500;
     pointLight.position.z = 3000;
     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);
     // load two other textures we'll use to make the map look more real
     //var detailTexture = THREE.ImageUtils.loadTexture("http://www.smartjava.org/examples/heightmap/assets/bg.jpg", 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...