CODEWITHSUNDEEP
three.jsparticles
Simon S.
Simon S.

Reputation: 573

Different Sprites for Particles in Three JS

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.

Ok I updated the code as follows: 

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<rowCount;i++){
  for(j=0;j<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 );

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.

Any suggestions?

Here is a working demo:

https://jsfiddle.net/zy2rt9eg/

It works ok for small amount of particles.

Upvotes: 0

Views: 500

Answers (1)

M -
M -

Reputation: 28472

It looks like you're using the same geometry for each material, which means you're causing points to overlap, thus only showing the last one added to the scene. You should use a different geometry for each THREE.Points so each point gets its own unique position.

Also, to avoid calling .load() for each texture, you could use the .clone() method for everything after the first one:

texture[0] = textureLoader.load('textures/sprites/256.png');
texture[1] = texture[0].clone();
texture[2] = texture[0].clone();
texture[3] = texture[0].clone();

Upvotes: 1

Related Questions