（Three.js）改变形成图像的粒子的颜色

Question

我正在研究一个粒子系统，在这个粒子系统中，粒子会四处移动并在其间创建几秒钟的图片（几乎就像幻灯片一样）。我知道在哪里放置颜色代码来改变形成图片bur的粒子上的颜色，因为某些原因它不起作用。因此我怀疑问题是在脚本中的其他地方，但问题是在哪里......

你可以看到下面的代码（尝试编写代码，但它不起作用）：

var dispersed = false;
var firstDone = false;
var secondDone = false;
var thirdDone = false;
var fRgba = []; // first img rgba data
var sRgba = []; // second img rgba data
var tRgba = []; // third img rgba data

var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight;

var VIEW_ANGLE = 45,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 0.01,
    FAR = 10000;

var $container = $("#container");
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
    VIEW_ANGLE,
    ASPECT,
    NEAR,
    FAR);

var scene = new THREE.Scene();
scene.add(camera);
camera.position.z = 900;
renderer.setSize(WIDTH, HEIGHT);
$container.append(renderer.domElement);

var particleCount = 5200,
    particles = new THREE.Geometry();

var pMaterial = new THREE.PointsMaterial({
    size: 6,
    map: createCircleTexture('#CACACA', 256),
    transparent: true,
    depthWrite: false
});

function createCircleTexture(color, size) {
    var matCanvas = document.createElement('canvas');
    matCanvas.width = matCanvas.height = size;
    var matContext = matCanvas.getContext('2d');
    var texture = new THREE.Texture(matCanvas);
    var center = size / 2;
    matContext.beginPath();
    matContext.arc(center, center, size/2, 0, 2 * Math.PI, false);
    matContext.closePath();
    matContext.fillStyle = color;
    matContext.fill();
    texture.needsUpdate = true;
    return texture;
    }

for (var i = 0; i < particleCount; i++) {
    var x = Math.random() * 1600 - 800;
    var y = getRandomInt(600, 1500)
    var z = Math.random() * 30 - 15;
    var particle = new THREE.Vector3(x, y, z);
    particle.updated = 0;
    particles.vertices.push(particle);
};

var particleSystem = new THREE.Points(particles, pMaterial);
particleSystem.sortParticles = true;
scene.add(particleSystem);

function drawImage(imageObj, array) {
    var canvas = $("#canvas")[0];
    var context = canvas.getContext("2d");
    var imageX = 0;
    var imageY = 0;
    var imageWidth = imageObj.width;
    var imageHeight = imageObj.height;
    context.drawImage(imageObj, imageX, imageY);
    var imageData = context.getImageData(imageX, imageY, imageWidth,          
    imageHeight);
    var data = imageData.data;
    for(var y = 0; y < imageHeight; y+= 4) {
    for(var x = 0; x < imageWidth; x+= 4) {
    var red = data[((imageWidth * y) + x) * 4];
    var green = data[((imageWidth * y) + x) * 4 + 1];
    var blue = data[((imageWidth * y) + x) * 4 + 2];
    var alpha = data[((imageWidth * y) + x) * 4 + 3];

    if (red < 100) {
        var pX = (x % 500) - 249;
        var pY = 249 - y;
        array.push([pX, pY, red, green, blue, alpha]);
    }
   }
  }
};

var addDestination = function(particle, x, y, z) {
    var dest = new THREE.Vector3(x, y, z);
    particle.destination = dest;
};

var addVelocity = function(particle) {
    var xDiff = (particle.destination.x - particle.x) / 180;
    var yDiff = (particle.destination.y - particle.y) / 180;
    var zDiff = (particle.destination.z - particle.z) / 180;
    var vel = new THREE.Vector3(xDiff, yDiff, zDiff);
    particle.velocity = vel;
};

var move = function(particle) {
    particle.x += particle.velocity.x;
    particle.y += particle.velocity.y;
    particle.z += particle.velocity.z;
    particle.updated += 1;
};

var slowDown = function(particle) {
    particle.velocity.x -= (particle.velocity.x / 300)
    particle.velocity.y -= (particle.velocity.y / 300)
    particle.velocity.z -= (particle.velocity.z / 160)
};

var resetProperties = function() {
    var pCount = particleCount;
    while (pCount--) {
        var particle = particles.vertices[pCount];
        particle.destination = null
        particle.updated = 0;
        };
};

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
};

var distributedZ = function(level) {
    var z;
    if (level === 1) {
    z = getRandomInt(50, 100);
    } else if (level === 2) {
    z = getRandomInt(350, 400);
    } else {
    z = getRandomInt(650, 700);
  }

  return z;
};

function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex;
    while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
}

return array;
};

var disperse = function() {
    pCount = particleCount;
    for (var i = 0; i < pCount; i++) {
    var particle = particles.vertices[i];
    if (typeof(particle.destination) === "undefined") {
    var nums = [-1, 1];
    var x = particle.x + nums[Math.round(Math.random())];
    var y = particle.y - 1000;
    var z = Math.random() * 30 - 15;
    addDestination(particle, x, y, z);
    particle.velocity = new THREE.Vector3(x - particle.x, -3, z - 
    particle.z);
    }

    if (particle.updated <= 300) {
    move(particle);
    } else {
    particles.vertices = shuffle(particles.vertices);
    resetProperties();
    dispersed = true;
    return;
    }
  }
}

var morphImageParticles = function(imageParticles, rgba) {
    for (var i = 0; i < imageParticles.length; i++) {
    var particle = imageParticles[i]
    if (particle.destination === null) {
    var pixelData = rgba[i];
    var x = pixelData[0];
    var y = pixelData[1];
    var z = Math.random() * 15 - 7;
    addDestination(particle, x, y, z);
    addVelocity(particle);
    }

    if (particle.updated <= 180) {
      move(particle);
    }
  }
};

var morphOuterParticles = function(outerParticles, ord) {
    for (var i = 0; i < outerParticles.length; i++) {
    var nums = [-1, 1];
    var particle = outerParticles[i];
    if (particle.destination === null) {
        var x = Math.random() * 1000 - 500;
        var y = Math.random() * 1000 - 500;
        var z;
        if (i <= Math.round(outerParticles.length * 0.6)) {
        z = distributedZ(1)
        } else if (i > Math.round(outerParticles.length * 0.6) && i <   
        Math.round(outerParticles.length * 0.9)) {
        z = distributedZ(2)
        } else {
        z = distributedZ(3);
        }

    addDestination(particle, x, y, z);
    addVelocity(particle);
}

if (particle.updated <= 600) {
    move(particle);
    slowDown(particle);
    } else {
    particles.vertices = shuffle(particles.vertices);
    resetProperties();
    if (ord === 1) {
        firstDone = true;
        } else if (ord === 2) {
            secondDone = true;
            } else {
                thirdDone = true;
                }
                return;
                }
              }
            };

var makeImg = function(rgba, ord) {
var pCount = particleCount;
var imagePs = particles.vertices.slice(0, rgba.length);
var outerPs = particles.vertices.slice(rgba.length, pCount);

morphImageParticles(imagePs, rgba);
morphOuterParticles(outerPs, ord);
};

var update = function() {
if (thirdDone) {
} else if (secondDone) {
makeImg(tRgba, 3);
} else if (firstDone) {
makeImg(sRgba, 2);
} else if (dispersed) {
makeImg(fRgba, 1);
} else {
disperse();
}

particleSystem.geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
requestAnimationFrame(update);
TWEEN.update();
};

var rotXScale = d3.scale.linear().domain([0, window.innerHeight]).range([15, 
-15]);
var rotYScale = d3.scale.linear().domain([0, window.innerWidth]).range([25, 
-25]);

d3.select("body").on("mousemove", function() {
    var scaledX = rotXScale(d3.mouse(this)[1]) * Math.PI / 180;
    var scaledY = rotYScale(d3.mouse(this)[0]) * Math.PI / 180;
    var tween = new TWEEN.Tween(particleSystem.rotation).to({ x: scaledX, y:         
    scaledY, z: 0 });
    tween.easing( TWEEN.Easing.Quartic.Out);
    tween.start();
    transparency: true
    });

var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.onload = function() {
    drawImage(this, fRgba);
img2.onload = function() {
    drawImage(this, sRgba);
img3.onload = function() {
    drawImage(this, tRgba);
}
img3.src = "images/p1.png";
}
img2.src = "images/p2.png";
update();
}
img1.src = "images/p3.png";
update();

我以为我只需要添加下面的代码，例如['0xffffff']，它至少应该如何工作，但事实并非如此。因此，我猜问题是脚本中的其他地方。

var fRgba = []; // first img rgba data
var sRgba = []; // second img rgba data
var tRgba = []; // third img rgba data