three.jsボールを前後に移動

Question

私はthree.jsボールを前後に動かすが、成功しないようにしようとしている。それだけでは機能しません。一方向にのみ移動します。
マイコード：

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

Answer 1

このお試しください：アニメーションがとてもカウンタが上がるするつもりはない再帰関数である、私が言うことができるものから

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

Answer 2

を - あなたはそれを呼び出すたびにカウンタを元の値に戻ります。

球体をベースとしてボールオブジェクトを作成し、directionプロパティを追加するだけです。