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

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

有什么建议吗？

这是一个工作演示：

https://jsfiddle.net/zy2rt9eg/

它适用于少量粒子。

Answer 1

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

三个JS中粒子的不同精灵

Different Sprites for Particles in Three JS

particles

three.js