colors.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;
    function init() {

        rm = new RayMarcher();
        rm.loadFragmentShader("glsl/colors.glsl", animate );

        new THREE.OrbitControls( rm.camera );

        rm.camera.position.z = 8;

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

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

    function animate() {


        requestAnimationFrame( animate );

        if( rm.loaded ){

            var l1 = rm.getUniform( "light1" );
            if( l1 != null )
            {
                rm.getUniform( "light1" ).value.x = 20 * ( Math.cos( Date.now() * 0.001 ) );
                rm.getUniform( "light1" ).value.z = 20 * ( Math.sin( Date.now() * 0.001 ) );
            }
        }
        rm.update();
        rm.render();

    }

    init();


</script>

</body>
</html>