Question

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

我把我的源代码和资源放在网站上： https://onedrive.live.com/redir?resid=FBEB6373D9321A7F!649236&authkey=!AA4upPPcARcAvso&ithint=file%2czip

浏览器上的控制台日志是：

＆＃34; THREE.WebGLRenderer＆＃34; ＆＃34; 75＆＃34;

three.min.js：631：0＆＃34; THREE.ImageUtils.loadTexture已被弃用。请改用THREE.TextureLoader（）。＆＃34;

three.min.js：791：67＆＃34; THREE.ParticleBasicMaterial已重命名为THREE.PointsMaterial。＆＃34;

three.min.js：777：230＆＃34; THREE.ParticleSystem已重命名为THREE.Points。＆＃34;

three.min.js：769：197＆＃34; THREE.WebGLRenderer：图像不是2的幂（109x109）。调整为128x128＆＃34;

以下是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);
}

有人可以帮忙解决这个问题吗？谢谢！

Answer 1

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

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

three.js粒子系统粒子不能移动

1 个答案: