<html lang="en">
<head>
    <title>DEM threejs Browser</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style> body { margin: 0; overflow: hidden; }</style>
</head>
<body>
    <div id="dem-map"></div>
    <script src="../js/three.min.js"></script>
    <script src="../js/TrackballControls.js"></script>
    <script src="../js/TerrainLoader.js"></script>
    <script>

        var width  = window.innerWidth,
            height = window.innerHeight;

        var scene = new THREE.Scene();
        scene.add(new THREE.AmbientLight(0xeeeeee));

        var axes = new THREE.AxisHelper(200);
        scene.add(axes);

        var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
        camera.position.set(0, -50, 50);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);

        var terrainLoader = new THREE.TerrainLoader();
        terrainLoader.load('{{ dem_file }}', function(data) {

            var geometry = new THREE.PlaneGeometry(60, 60, 199, 199);

            for (var i = 0, l = geometry.vertices.length; i < l; i++) {
                geometry.vertices[i].z = data[i] / 65535 * 10;
            }

            var material = new THREE.MeshPhongMaterial({
              map: THREE.ImageUtils.loadTexture('{{ texture_map }}')
            });

            var plane = new THREE.Mesh(geometry, material);
            scene.add(plane);

        });

        var controls = new THREE.TrackballControls(camera);
        document.getElementById('dem-map').appendChild(renderer.domElement);
        render();
        function render() {
            controls.update();
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

    </script>
</body>
</html>