llama.html

<html>
	<head>
		<meta charset="utf-8">
    <script type="text/javascript" src="three.js"></script>
   	<script type="text/javascript" src="dat.gui.min.js"></script>
    <script type="text/javascript" src="libgif.js"></script>
   	<script src="TrackballControls.js"></script>
    
    <style type="text/css">
      .jsgif {
        display: none;
      }
    </style>
    
	</head>
	<body style="background:#ececec; margin:0px; padding:0px" onmousemove="update()">
  <img id="example2" src="llama.gif" rel:auto_play="1" width="467" height="375" rel:rubbable="1" />
  <div id="container"></div>


  <!-- ----- MAIN THREE.JS CODE ----- -->   
 
  <script type="text/javascript">
  
      
  var sup2 = new SuperGif({ gif: document.getElementById('example2') } );
  sup2.load();
  llamacanvas = sup2.get_canvas();
  var ictx=llamacanvas.getContext("2d");
        
  var camera, scene, renderer, container;
  var light, pointLight, geometry, mesh;
  var uniforms, material;
  var heightmap, diffTexture, dispTexture;
  
  function start() {

    container = document.getElementById( 'container' );

    // --- WebGl render

    try {
        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.autoClear = false;
        container.appendChild( renderer.domElement );
    }
    catch (e) {
        alert(e);
    }

    scene = new THREE.Scene();

    // --- Camera

    var fov = 15; // camera field-of-view in degrees
    var width = renderer.domElement.width;
    var height = renderer.domElement.height;
    var aspect = width / height; // view aspect ratio
    camera = new THREE.PerspectiveCamera( fov, aspect );
    camera.position.z = -600;
    camera.position.y = -800;
    camera.lookAt(scene.position);
    camera.updateMatrix();

    controls = new THREE.TrackballControls( camera, renderer.domElement );
    controls.rotateSpeed = 3.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;
    controls.noZoom = false;
    controls.noPan = false;
    controls.staticMoving = true;
    controls.dynamicDampingFactor = 0.3;
    controls.addEventListener( 'change', render );

    
    // --- Lights
        
    pointLight = new THREE.PointLight( 0xffffff, 1.0 );
    scene.add( pointLight );
    
    pointLight.position.set(0, 100, -200);


    // MATERIAL

    dispTexture = new THREE.Texture(llamacanvas);
    
    var shader = THREE.ShaderLib[ "normalmap" ];
    uniforms = THREE.UniformsUtils.clone( shader.uniforms );
    
    uniforms[ "enableDisplacement" ] = { type: 'i', value: 1 };
    uniforms[ "tDisplacement" ] = { type: 't', value: dispTexture };
    uniforms[ "uDisplacementScale" ] = { type: 'f', value: 35 };
    
    uniforms[ "enableDiffuse" ] = { type: 'i', value: 1 };
    uniforms[ "tDiffuse" ].value = dispTexture;

    uniforms[ "tNormal" ] = { type: 't', value: new THREE.ImageUtils.loadTexture( 'flat.png' )};
    
    
    material = new THREE.ShaderMaterial( {
            uniforms: uniforms,
            vertexShader: shader.vertexShader,
            fragmentShader: shader.fragmentShader,
            lights: true,
            side: THREE.DoubleSide
    } );

    
    // GEOMETRY

    geometry = new THREE.PlaneGeometry(256, 200, 256, 200);
    geometry.computeTangents();
    mesh = new THREE.Mesh( geometry, material);
    mesh.rotation.y = Math.PI;
    scene.add(mesh);

    
    setInterval("update()", 30);
   
    update();
  }
  
  function update() {
    dispTexture.needsUpdate = true;

    render();
    controls.update(); // trackball interaction
  }

  function render() {
    renderer.clear();
    renderer.render(scene, camera);
  }
  
  function log(n) {
    console.log(n);
  }

  
    // GUI
  
  var initDisp = function() {
    this.scale = 25;
  }
  
  
  window.onload = function() {
    var disp = new initDisp();
    var gui = new dat.GUI();
    var scaleVal = 25.0;
    
 		scControl = gui.add(disp, "scale", 0, 200);
    scControl.onChange(function(value) {
      scaleVal = value;
      uniforms[ "uDisplacementScale" ].value = value;
    });

    start();
    controls.update();

  }

			</script>
      
      
	</body>
</html>