三个JS中粒子的不同精灵

Question

想法是将图像分割成小的图块，这应该通过使用始终相同的图像但是改变每个子画面的使用图像的偏移来实现。以下代码有效，但速度很慢。

好的，我更新了代码如下：

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

这会将图像拆分为tileCile和columnCount中定义的切片。这个解决方案唯一的问题是，它非常慢。我试图克隆纹理的未注释行不起作用。

有什么建议？

这是一个有效的演示：

https://jsfiddle.net/zy2rt9eg/

它适用于少量颗粒。

Answer 1

看起来您为每种材质使用相同的几何体，这意味着您要使点重叠，因此仅显示添加到场景中的最后一个点。您应该为每个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();