three.js particle system particle kann sich nicht bewegen

Question

Ich lese ein chinesisches Buch über WebGL. Ich führe das Partikelsystem-Beispiel des Buches mit Firefox, ich treffe ein Problem, das mein Partikel nicht bewegen kann.

Ich habe meine Quellcode und Ressourcen in der Website: https://onedrive.live.com/redir?resid=FBEB6373D9321A7F!649236&authkey=!AA4upPPcARcAvso&ithint=file%2czip

Konsolenprotokolle auf dem Browser sind:

"THREE.WebGLRenderer" "75"

three.min.js: 631: 0 "THREE.ImageUtils.loadTexture ist veraltet. Verwenden Sie stattdessen THREE.TextureLoader()."

three.min.js: 791: 67 "THREE.ParticleBasicMaterial wurde in THREE.PointsMaterial umbenannt."

threw.min.js: 777: 230 "THREE.ParticleSystem wurde in THREE.Points umbenannt."

three.min.js: 769: 197 "THREE.WebGLRenderer. Bild ist nicht Potenz von zwei (109x109) Resized zu 128x128"

ist hier Teil-Code der HTML-Datei:

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); 
} 

Kann jemand helfen, dieses Problem zu lösen? Vielen Dank!

Answer 1

Ich denke, Sie verwenden vielleicht eine alte Version von three.js und es funktioniert nicht mit dem Partikelsystem. Here ist ein Beispiel, das ziemlich nah an dem ist, was Sie tun. Wenn ich dieses Beispiel lokal ausführe, funktioniert es und ersetzt dann durch die three.min.js von Ihrem Projekt, es funktioniert nicht mehr. Sie können die three.js-Version verwenden, die von diesem Beispiel there verwendet wird.

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