Идея состоит в том, чтобы разбить изображение на маленькие плитки, это должно быть достигнуто, используя всегда одно и то же изображение, но изменяя смещение используемого изображения для каждого спрайта.Следующий код работает, но работает очень медленно.
Хорошо. Я обновил код следующим образом:
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/
Работает нормально для небольшого количества частиц.