D3 Examples - GeoJSON Test

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <title>ThreeGeoJSON polygons</title>
    <style media="screen">
      html, body {
        margin: 0; padding: 0
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.js" charset="utf-8"></script>
    <script src="threeGeoJSON.js" charset="utf-8"></script>
    <script src="TrackballControls.js" charset="utf-8"></script>
</head>
​
<body>
    <script type="text/javascript">
        var width = window.innerWidth;
        var height = window.innerHeight;
​
        // Earth params
        var radius = 9.99;
        var segments = 32;
        var rotation = 0;
​
        //New scene and camera
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(55, width / height, 0.01, 1000);
        camera.position.z = 1;
        camera.position.x = -.2;
        camera.position.y = .5;
​
        //New Renderer
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        var canvas = renderer.domElement;
        canvas.style.display = "block";
        document.body.appendChild(canvas);
​
        //Add lighting
        scene.add(new THREE.AmbientLight(0x333333));
​
        var light = new THREE.DirectionalLight(0xe4eef9, .7);
        light.position.set(12, 12, 8);
        scene.add(light);
​
        //Create a sphere to make visualization easier.
        var geometry = new THREE.SphereGeometry(10, 32, 32);
        var material = new THREE.MeshPhongMaterial({
            //wireframe: true,
            //transparent: true
        });
​
​
        //Draw the GeoJSON
        var test_json = $.getJSON("countries_states.geojson", function(data) {
​
            drawThreeGeo(data, 10, 'sphere', {
                color: 'red'
            })
        });
​
        //Set the camera position
        camera.position.z = 30;
​
        //Enable controls
        var controls = new THREE.TrackballControls(camera);
​
        //Render the image
        function render() {
            controls.update();
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }
​
        render();
    </script>
</body>
​
</html>
​
    