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

您似乎对每种材质使用相同的几何图形，这意味着您正在使点重叠，从而仅显示添加到场景中的最后一个。您应该为每个THREE.Points使用不同的几何形状，以便每个点都具有自己的唯一位置。

此外，为避免为每个纹理调用.load()，可以对第一个纹理之后的所有内容使用Dullimeister方法：

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

三个JS中不同的粒子精灵

1 个答案: