How to make mesh go to position gradually

Question

When I want the mesh to go that position it goes there instantly. How do I make it so the mesh moves there gradually. I thought about doing things with time but I couldnt get that to work, even if it did work tho I think all that would do is delay the time it takes to instantly move to that position. Im aware this is easily doable using TweenMax but I cant use it.

var scene= new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var mouse = {x:0, y:0, z:0};

var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh( geometry, material);

scene.add(cube);

camera.position.z = 5;

function animate(){
    requestAnimationFrame(animate);


    cube.position.x = 3;

    renderer.render(scene, camera);
}
animate();

Answer 1

What you could actually do is to use a parametric equation to translate your mesh progressively, of the form p = t*(ba)+a .
That would give something like:

let fps = 60;           // fps/seconds
let tau = 2;            // 2 seconds
const step = 1 / (tau * fps);  // step per frame
const step = finalPosition * step;
let t = 0;

function animateMesh(t){
   if (t >= 1) return;
   t += step;  // Increment time
   let x = translation(initialPosition.x, goalPosition.x, t);
   let y = translation(initialPosition.y, goalPosition.y, t);
   let z = translation(initialPosition.z, goalPosition.z, t);
   object.position.set(x, y, z);
   requestAnimationFrame(() => animateMesh(t));
}

// Translation from a to b's parametric equation
function translation(a, b, t) {
    return a + (b - a) * t
}

animateMesh(t);