Skip to content

Instantly share code, notes, and snippets.

@sntran

sntran/index.html

Forked from roman01la/index.html
Created September 20, 2013 13:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sntran/6637616 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sntran/6637616 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @roman01la roman01la created this gist Jun 17, 2013.
    13 changes: 13 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
    <div class="viewport"></div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
    <script src="//threejs.org/examples/js/controls/OrbitControls.js"></script>
    <script src="main.js"></script>
    </body>
    </html>
    72 changes: 72 additions & 0 deletions main.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,72 @@
    (function() {

    var viewport = document.querySelector('.viewport');

    var scene, camera, renderer, loader, light, controls;

    var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight;

    var VIEW_ANGLE = 45,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 1,
    FAR = 10000;

    scene = new THREE.Scene();

    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = true;
    renderer.shadowMapType = THREE.PCFShadowMap;
    renderer.shadowMapAutoUpdate = true;

    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    camera.position.y = 1000;

    scene.add(camera);

    controls = new THREE.OrbitControls(camera);

    renderer.setSize(WIDTH, HEIGHT);

    viewport.appendChild(renderer.domElement);

    loader = new THREE.JSONLoader();

    loader.load('map.js', function (geometry, materials) {
    var mesh, material;

    material = new THREE.MeshFaceMaterial(materials);
    mesh = new THREE.Mesh(geometry, material);

    mesh.scale.set(1, 1, 1);
    mesh.receiveShadow = true;
    mesh.castShadow = true;

    scene.add(mesh);
    });

    light = new THREE.DirectionalLight(0xffffff);
    light.shadowCameraTop = -1000;
    light.shadowCameraLeft = -1000;
    light.shadowCameraRight = 1000;
    light.shadowCameraBottom = 1000;
    light.shadowCameraNear = 20;
    light.shadowCameraFar = 10000;
    light.shadowBias = -.0001;
    light.shadowMapHeight = light.shadowMapWidth = 4096;
    light.shadowDarkness = .5;
    light.castShadow = true;
    light.position.set(0, 1000, -400);

    scene.add(light);

    animate();

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

    })();