Различные спрайты для частиц в трех JS - PullRequest
Новая
       28

Различные спрайты для частиц в трех JS

0 голосов
/ 19 февраля 2019

Идея состоит в том, чтобы разбить изображение на маленькие плитки, это должно быть достигнуто, используя всегда одно и то же изображение, но изменяя смещение используемого изображения для каждого спрайта.Следующий код работает, но работает очень медленно.

Хорошо. Я обновил код следующим образом: 

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 );

Это разбивает изображение на плитки, определенные в rowCount и columnCount.Единственная проблема с этим решением в том, что оно очень медленное.Некомментированная строка, где я пытаюсь клонировать текстуру, не работает.

Есть предложения?

Вот рабочая демонстрация:

https://jsfiddle.net/zy2rt9eg/

Работает нормально для небольшого количества частиц.

1 Ответ

0 голосов
/ 19 февраля 2019

Похоже, что вы используете одну и ту же геометрию для каждого материала, что означает, что вы заставляете точки перекрываться, показывая только последнюю добавленную на сцену.Вы должны использовать различную геометрию для каждого THREE.Points, чтобы каждая точка имела свою уникальную позицию.

Кроме того, чтобы избежать вызова .load() для каждой текстуры, вы можете использовать метод .clone() для всего, что находится после первой: 

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