Sprite animation

by Rebecca Chen

HTML

<div id="info">Sprite Animation
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script id="myVertexShader" type="x-shader/x-vertex">
  varying vec2 vUv; 
  void main() { 
  	gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
    vUv = uv; 
  }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
  uniform sampler2D spriteTex; 
  varying vec2 vUv; 
  void main() { 
  	vec4 color = texture2D (spriteTex, vUv); 
    if (abs(color.b - 1.0) < 0.22) 
    	discard; 
    gl_FragColor=color; 
  } 
</script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mouse = new THREE.Vector2();
var clock = new THREE.Clock();
var sprite;

init();
animate();

function init() {

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });

  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera(-30, 30, 30, -30, -10, 100);
  camera.position.z = 10;
  scene.add(camera);

  ////////////////////////////////////////////////////////
  var geometry = new THREE.Geometry();
  geometry.vertices.push(
    new THREE.Vector3(-5, -5, 0),
    new THREE.Vector3(5, -5, 0),
    new THREE.Vector3(5, 5, 0),
    new THREE.Vector3(-5, 5, 0)
  );

  var face;
  face = new THREE.Face3(0, 1, 2);
  //  face.materialIndex = 0;
  geometry.faces.push(face);
  face = new THREE.Face3(0, 2, 3);
  //  face.materialIndex = 0;
  geometry.faces.push(face);

  geometry.faceVertexUvs[0].push([new THREE.Vector2(0, 0.75), new THREE.Vector2(0.25, 0.75), new THREE.Vector2(0.25, 1)]);
  geometry.faceVertexUvs[0].push([new THREE.Vector2(0., 0.75), new THREE.Vector2(0.25, 1), new THREE.Vector2(0.0, 1)]);

  geometry.computeBoundingSphere();
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();

  THREE.ImageUtils.crossOrigin = '';
  texture = THREE.ImageUtils.loadTexture('http://i.imgur.com/oalfl4R.jpg');
  texture.wrapS = THREE.RepeatWrapping;
  shaderMaterial = new THREE.ShaderMaterial({
    uniforms: {
      spriteTex: {
        type: 't',
        value: texture
      }
    },
    vertexShader: document.getElementById('myVertexShader').textContent,
    fragmentShader: document.getElementById('myFragmentShader').textContent
  });

  sprite = new THREE.Mesh(geometry, shaderMaterial);
  scene.add(sprite);

  console.log(sprite);
  ////////////////////////////////////////////////////

  window.addEventListener('resize', onWindowResize, false);
 ...