Moving multiple objects at once in three.js

Question

I am trying to move multiple balls at once in three.js. I made a function that creates a ball and created three balls using it. Afterwards I created a function that moves balls and it works for one ball but whenever I try to move them all at once it doesn't work. Any help would be much appreciated. Here is the code:

ball function:

function Ball(valuex, valuey, valuez, ballname, color)
{
   var balMaterial, balGeometry, balMesh;
   balMaterial = new THREE.MeshLambertMaterial({ color: color});
   balGeometry = new THREE.SphereGeometry(0.3,50,50);
   balMesh = new THREE.Mesh(balGeometry, balMaterial);
   balMesh.position.set(valuex,valuey,valuez);
   balMesh.name = ballname;
   balMesh.ballDirection = new THREE.Vector3();
   balMesh.ballDirection.x = -5;
   balMesh.ballDirection.z = 1;
   balMesh.ballDirection.normalize();
   balMesh.moveSpeed = 25;
   scene.add(balMesh);
}

move balls:

function moveBalls (ball) {
var tempbal = scene.getObjectByName(ball);
var ballDirection = tempbal.ballDirection;
tempbal.position.add(speed.copy(ballDirection).multiplyScalar(clock.getDelta() * tempbal.moveSpeed));



    if (tempbal.position.x < -4.7) {
        ballDirection.x = Math.abs(ballDirection.x);
    }
    if (tempbal.position.x > 4.7) {
        ballDirection.x = -Math.abs(ballDirection.x);
    }
    if (tempbal.position.z > 12.2) {
        ballDirection.z = -Math.abs(ballDirection.z);
    }
    if (tempbal.position.z < -12.2) {
        ballDirection.z = Math.abs(ballDirection.z);
    }
    if (tempbal.moveSpeed > 0)
    {
        tempbal.moveSpeed = tempbal.moveSpeed - 0.002;
    }
}

Create balls:

Ball(0,4.5,0, "ball1", 0xffffff);
Ball(2,4.5,0, "ball2", 0xffffff);
Ball(0,4.5,6, "ball3", 0xff0000);

Animate Scene:

function animateScene()
{
    moveBalls("ball1");
    moveBalls("ball2");
    moveBalls("ball3");
    requestAnimationFrame(animateScene);

    renderer.render(scene, camera);
}

PS: I am new here and this is my first post so if I did anything wrong in this post please tell me so I can learn from it.

Answer 1

The function clock.getDelta() returns the seconds passed since the last call to clock.getDelta() which means only your first ball may move. Indeed, the first ball calls getDelta() (which returns something greater than 0). In the same frame (meaning approximately at the same time), you call clock.getDelta() for the 2nd ball, which returns 0. The same happens to the 3rd ball.

Try to do the following :

function moveBalls (ball, deltaTime) {
   var tempbal = scene.getObjectByName(ball);
    var ballDirection = tempbal.ballDirection;
    tempbal.position.add(speed.copy(ballDirection).multiplyScalar(deltaTime 
* tempbal.moveSpeed));

    if (tempbal.position.x < -4.7) {
        ballDirection.x = Math.abs(ballDirection.x);
    }
    if (tempbal.position.x > 4.7) {
        ballDirection.x = -Math.abs(ballDirection.x);
    }
    if (tempbal.position.z > 12.2) {
        ballDirection.z = -Math.abs(ballDirection.z);
    }
    if (tempbal.position.z < -12.2) {
        ballDirection.z = Math.abs(ballDirection.z);
    }
    if (tempbal.moveSpeed > 0)
    {
        tempbal.moveSpeed = tempbal.moveSpeed - 0.002;
    }
}

// ...

function animateScene()
{
    var deltaTime = clock.getDelta() ;
    moveBalls("ball1", deltaTime);
    moveBalls("ball2", deltaTime);
    moveBalls("ball3", deltaTime);
    requestAnimationFrame(animateScene);

    renderer.render(scene, camera);
}