2016-08-30 2 views
0

Ich versuche in Three.js einen Ball zu schaffen, der sich ständig vorwärts und rückwärts bewegt, aber keinen Erfolg. Es funktioniert einfach nicht. Bewegt sich nur in eine Richtung.
Mein Code:three.js move ball vorwärts und zurück

 var scene = new THREE.Scene();  
     var camera = new THREE.PerspectiveCamera(75,     window.innerWidth/window.innerHeight, 0.1, 1000);  
     var renderer = new THREE.WebGLRenderer();  
     renderer.setSize(window.innerWidth, window.innerHeight);  
     document.body.appendChild(renderer.domElement);  
     var faceradius = 0.2;  
     var bodyradius = 0.2; 
     var geometry = new THREE.SphereGeometry(faceradius, 32, 32);//sphere size 
     var material = new THREE.MeshBasicMaterial({ color: 0x24D69D }); //red color 
     var face = new THREE.Mesh(geometry, material); 
     scene.add(face);  
     var group = new THREE.Group(); 
     group.add(face); 
     scene.add(group); 
     var counter = 0; 
     camera.position.z = 5; 

     var render = function() { 
      requestAnimationFrame(render); 
      if (counter < 100){ 
       group.position.x += 0.01; 
       counter++; 
      } 

      renderer.render(scene, camera); 

      if (counter > 100){ 
       group.position.x -= 0.01; 
       counter++; 
      } 

      if (counter > 200){ 
       counter = 0; 
      } 
      renderer.render(scene, camera); 
     }; 

     render(); 

Antwort

0

Try this:

var render = function() { 
    requestAnimationFrame(render); 

    if (counter <=100){ //Note the <= 
    group.position.x += 0.01; 
    counter++; 
    } 

    if (counter > 100){ 
    group.position.x -= 0.01; 
    counter++; 
    } 

    if (counter > 200){ 
    counter = 0; 
    } 
    renderer.render(scene, camera); 
}; 
0

Von dem, was ich sagen kann, Animation ist eine rekursive Funktion, so dass ein Zähler wird nicht steigen - jedes Mal, wenn Sie es so nennen die Zähler wird auf seinen ursprünglichen Wert zurückgehen.

Was Sie tun müssen, ist ein Kugelobjekt mit Kugel als Basis zu erstellen, dann fügen Sie eine Richtungseigenschaft hinzu.