walker.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, shrink-to-fit=0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title></title>
    <style>
        head, body{
            width:100%;
            height:100%;
            overflow: hidden;
            top:0;
            left:0;
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
<script src="vendor/three.min.js"></script>
<script src="vendor/controls/OrbitControls.js"></script>

<script src="raymarcher.js"></script>
<script src="composer.js"></script>
<script src="assets/walker/Walker.js"></script>

<script>

    var rm;
    var co;
    var walker;
    function init() {

        rm = new RayMarcher( 36,.1 );
        rm.loadFragmentShader("glsl/walker.glsl", onFragmentLoaded );

        co = new THREE.OrbitControls( rm.camera );
        co.minDistance = 18;
        co.maxDistance = 24;

        co.minPolarAngle = Math.PI / 4 - Math.PI / 12;
        co.maxPolarAngle = Math.PI / 2 - Math.PI / 8;

        rm.camera.position.x = 6;
        rm.camera.position.y = 10;
        rm.camera.position.z = 12;

        document.body.appendChild( rm.domElement );
        window.addEventListener( "resize", onResize, false );
        onResize();
    }

    function onFragmentLoaded( scope )
    {

        walker = new Walker(scope);
        walker.update();

        var path = "img/cubemap/cube03_";
        var format = '.png';
        var urls = [
            path + '0' + format, path + '1' + format,
            path + '2' + format, path + '3' + format,
            path + '4' + format, path + '5' + format
        ];

        scope.setCubemap( "cubemap", urls );

        animate();
    }

    function onResize(e)
    {
        rm.setSize( window.innerWidth, window.innerHeight );
    }

    function animate() {


        requestAnimationFrame( animate );

        co.update();

        walker.update();

        rm.update();
        rm.render();

    }

    init();


</script>

</body>
</html>