hulkbuster.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>

    var rm;
    var c;
    function init() {

        rm = new RayMarcher();
        rm.loadFragmentShader("glsl/hulkbuster.glsl", function (scope) {
            scope.setTexture( "map", "img/env.png" );
            animate();
        } );
        document.body.appendChild( rm.domElement );

        c = new THREE.OrbitControls( rm.camera );
        c.minDistance = 6;
        c.maxDistance = 8;
        c.minPolarAngle = Math.PI / 4;
        c.maxPolarAngle = Math.PI / 2;
        rm.camera.position.set( -10, 10, -10 );

        window.addEventListener( "resize", onResize, false );
        onResize();
    }

    function onResize(e){

        rm.setSize( window.innerWidth, window.innerHeight );
    }

    function animate() {

        requestAnimationFrame( animate );

        c.update();
        rm.distance = rm.camera.position.length() * 4;

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

    }

    init();


</script>

</body>
</html>