title: Different Sprites for Particles in Three JS
body: <p>The Idea is to split an image into small tiles, this should get achieved by using always the same image but changing the offset of the used image for each sprite. The following code works but is very slow.</p>
  
  <p>Ok I updated the code as follows: </p>
  
  <pre><code>camera = new THREE.PerspectiveCamera( 85, window.innerWidth / window.innerHeight, 1, 2000 );
  camera.position.z = 100;
  camera.position.x = 40;
  camera.position.y = 30;
  
  scene = new THREE.Scene();
  
  
  var textureLoader = new THREE.TextureLoader();
  var rowCount= 73;
  var columnCount=83;
  
  var material = {};
  var particles = {};
  var geometry = {};
  var texture = {};
  
  imageCount = 0;
  
  // DOES NOT WORK
  // var originalTexture = textureLoader.load('textures/sprites/full-size.png');
  
  for(i=0;i&lt;rowCount;i++){
    for(j=0;j&lt;columnCount;j++){
  
      // DOES NOT WORK
      // texture[imageCount] = originalTexture.clone();
      texture[imageCount] = textureLoader.load('textures/sprites/full-size.png');
      texture[imageCount].repeat.set(1/columnCount, 1/rowCount);
      texture[imageCount].offset.y = 1/rowCount * i;
      texture[imageCount].offset.x = 1/columnCount * j;
  
      geometry[imageCount] = new THREE.BufferGeometry();
  
      var x = j*2;
      var y = i*2;
      var z = 1;
      vertices.push( x, y, z );
      vertice1 = [];
      geometry[imageCount].addAttribute( 'position', new THREE.Float32BufferAttribute([x, y, z], 3 ) );
  
      material = new THREE.PointsMaterial( { size: 2, map: texture[imageCount], depthTest: true, transparent: false } );
      particles = new THREE.Points( geometry[imageCount], material );
      scene.add(particles);
      imageCount++;
  
    }
  }
  
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  </code></pre>
  
  <p>This splits an image into tiles, defined in rowCount and columnCount. Only problem with this solution is, that it is very slow. The uncommented line, where I try to clone the texture does not work. </p>
  
  <p>Any suggestions?</p>
  
  <p>Here is a working demo:</p>
  
  <p><a href="https://jsfiddle.net/zy2rt9eg/" rel="nofollow noreferrer">https://jsfiddle.net/zy2rt9eg/</a></p>
  
  <p>It works ok for small amount of particles.</p>