three.js move ball forward and back - animation

Question

I am trying to create in three.js a ball which moves forward and back constantly but no success. It just does not work. Only moves in one direction.
My code:
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

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

Answer 2

From what I can tell, animation is a recursive function so a counter is not going to go up - each time you call it the counter will go back to its original value.
What you need to do is create a ball object using sphere as a base, then add a direction property.