Javascript three.js粒子系统粒子无法移动

我读了一本关于WebGL的中文书。我用firefox运行了本书中的粒子系统示例，遇到了粒子无法移动的问题

我将源代码和资源放在网站上：

浏览器上的控制台日志包括：

“三个。WebGLRenderer”“75”

three.min.js:631:0“three.ImageUtils.loadTexture已被弃用。请改用three.TextureLoader（）

three.min.js:791:67“three.ParticleBasicMaterial已重命名为three.PointsMaterial。”

three.min.js:777:230“three.ParticleSystem已重命名为three.Points。”

three.min.js:769:197“three.WebGLRenderer:图像不是二的幂（109x109）。大小调整为128x128”

以下是html文件的部分代码：

function updateParticles(){

   var particleNum = particleSystem.geometry.vertices.length;

   for(var i=0; i<particleNum; i++){
       particle = particleSystem.geometry.vertices[i];
       particle.z +=  5;       
       if(particle.z>1000){
          particle.z-=2000;
       }
   }
}


function animate() {

   requestAnimationFrame(animate);

   updateParticles();

   renderer.render(scene, camera);
}

函数updateParticles（）{
var particleNum=particleSystem.geometry.vertices.length；
对于（变量i=0；i1000）{
粒子z-=2000；
}
}
}
函数animate（）{
请求动画帧（动画）；
updateParticles（）；
渲染器。渲染（场景、摄影机）；
}

---

有人能帮忙解决这个问题吗？谢谢

我认为您可能使用旧版本的three.js，但它不适用于粒子系统。是一个非常接近您所做工作的示例。当我在本地运行这个示例时，它可以工作，然后用项目中的three.min.js替换它，它就停止工作了。您可以获取此示例使用的three.js版本

/@请参见http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame=（函数（）{
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
函数（/*function*/callback，/*doElement*/element）{
设置超时（回调，1000/60）；
};
})();
//设置场景大小
可变宽度=400，
高度=300；
//设置一些摄影机属性
var视图_角度=45，
纵横比=宽度/高度，
接近=0.1，
FAR=10000；
//获取要附加到的DOM元素
//-假设我们手头有jQuery
var$container=$（“#container”）；
//创建WebGL渲染器、摄影机
//还有一个场景
var renderer=new THREE.WebGLRenderer（）；
var摄像机=新的三个摄像机（视角，
方面,，
近的
远）；
var scene=new THREE.scene（）；
//摄影机从0,0,0开始，所以将其向后拉
摄像机位置z=300；
//启动渲染器-设置清晰颜色
//全黑
setClearColor（新的三种颜色（0,1））；
设置大小（宽度、高度）；
//附加渲染提供的DOM元素
$container.append（renderer.domeElement）；
//创建粒子变量
var particleCount=1800，
粒子=新的三个。几何体（），
p材料=新的三种。颗粒基质材料({
颜色：0xFFFFFF，
尺码：20，
地图：3.ImageUtils.loadTexture(
“/Images/icon_ch.png”
),
混合：3.可加性贷款，
透明：正确
});
//现在创建单个粒子
对于（var p=0；p250
var pX=Math.random（）*500-250，
pY=数学随机数（）*500-250，
pZ=Math.random（）*500-250，
粒子=新的三个顶点(
新的三矢量3（pX，pY，pZ）
);
//创建一个速度向量
particle.velocity=新的3.Vector3(
0，//x
-Math.random（），//y
0）；//z
//将其添加到几何体中
粒子。顶点。推（粒子）；
}
//创建粒子系统
var particleSystem=新的3.particleSystem(
粒子，
p材料）；
particleSystem.sortParticles=true；
//将其添加到场景中
scene.addChild（particleSystem）；
//动画循环
函数更新（）{
//向系统添加一些旋转
粒子系统旋转度y+=0.01；
var pCount=粒子计数；
while（pCount--）{
//获取粒子
var particle=粒子。顶点[pCount]；
//检查是否需要重置
if（粒子位置y<-200）{
粒子位置y=200；
粒子速度y=0；
}
//更新速度
particle.velocity.y-=Math.random（）*.1；
//位置呢
particle.position.addSelf(
粒子速度）；
}
//标记到我们已经创建的粒子系统
//已更改其顶点。这是
//肮脏的小秘密。
particleSystem.geometry.\uuu dirty顶点=真；
渲染器。渲染（场景、摄影机）；
//设置下一个呼叫
请求帧（更新）；
}
请求帧（更新）；

hey hey hey您在第40版上的解决方案和他在第75版（最新版本）上的问题。哎哟

  // @see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
  window.requestAnimFrame = (function(){
     return  window.requestAnimationFrame       ||
             window.webkitRequestAnimationFrame ||
             window.mozRequestAnimationFrame    ||
             window.oRequestAnimationFrame      ||
             window.msRequestAnimationFrame     ||
             function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
             };
  })();
  // set the scene size
  var WIDTH = 400,
          HEIGHT = 300;

  // set some camera attributes
  var VIEW_ANGLE = 45,
          ASPECT = WIDTH / HEIGHT,
          NEAR = 0.1,
          FAR = 10000;

  // get the DOM element to attach to
  // - assume we've got jQuery to hand
  var $container = $('#container');

  // create a WebGL renderer, camera
  // and a scene
  var renderer = new THREE.WebGLRenderer();
  var camera = new THREE.Camera(  VIEW_ANGLE,
          ASPECT,
          NEAR,
          FAR  );
  var scene = new THREE.Scene();

  // the camera starts at 0,0,0 so pull it back
  camera.position.z = 300;

  // start the renderer - set the clear colour
  // to a full black
  renderer.setClearColor(new THREE.Color(0, 1));
  renderer.setSize(WIDTH, HEIGHT);

  // attach the render-supplied DOM element
  $container.append(renderer.domElement);

  // create the particle variables
  var particleCount = 1800,
          particles = new THREE.Geometry(),
          pMaterial = new THREE.ParticleBasicMaterial({
             color: 0xFFFFFF,
             size: 20,
             map: THREE.ImageUtils.loadTexture(
                     "./Images/icon_ch.png"
             ),
             blending: THREE.AdditiveBlending,
             transparent: true
          });

  // now create the individual particles
  for(var p = 0; p < particleCount; p++) {

     // create a particle with random
     // position values, -250 -> 250
     var pX = Math.random() * 500 - 250,
             pY = Math.random() * 500 - 250,
             pZ = Math.random() * 500 - 250,
             particle = new THREE.Vertex(
                     new THREE.Vector3(pX, pY, pZ)
             );
     // create a velocity vector
     particle.velocity = new THREE.Vector3(
             0,             // x
             -Math.random(),    // y
             0);                // z

     // add it to the geometry
     particles.vertices.push(particle);
  }

  // create the particle system
  var particleSystem = new THREE.ParticleSystem(
          particles,
          pMaterial);

  particleSystem.sortParticles = true;

  // add it to the scene
  scene.addChild(particleSystem);

  // animation loop
  function update() {

     // add some rotation to the system
     particleSystem.rotation.y += 0.01;

     var pCount = particleCount;
     while(pCount--) {
        // get the particle
        var particle = particles.vertices[pCount];

        // check if we need to reset
        if(particle.position.y < -200) {
           particle.position.y = 200;
           particle.velocity.y = 0;
        }

        // update the velocity
        particle.velocity.y -= Math.random() * .1;

        // and the position
        particle.position.addSelf(
                particle.velocity);
     }

     // flag to the particle system that we've
     // changed its vertices. This is the
     // dirty little secret.
     particleSystem.geometry.__dirtyVertices = true;

     renderer.render(scene, camera);

     // set up the next call
     requestAnimFrame(update);
  }
  requestAnimFrame(update);