.addVectors() function not working

Hey all. I am New to three.js
I’ve written this small piece of code:
let assyCenter = new THREE.Vector3(0, 0, 0);

let oldCenter = new THREE.Vector3(1, 0, 0);

let unitVector = new THREE.Vector3().subVectors(oldCenter, assyCenter).normalize();

let distance = assyCenter.distanceTo(oldCenter);

let scaleFactor = 2;

let _i = 0;

let newCenter = new THREE.Vector3().addVectors(oldCenter, unitVector.multiplyScalar(distance * scaleFactor));

let _incrementVariable = 0.1;

let renderer = new THREE.WebGLRenderer();

let newCenterLoop = new THREE.Vector3();

renderer.setAnimationLoop(function () {

    if (_i < scaleFactor) {

        newCenterLoop.addVectors(oldCenter, unitVector.multiplyScalar(distance * _i));



        _i = _i + _incrementVariable;


    else {




But as you can see from the picture below the newCenterLoop isnt getting updated. I’ve included the jsFiddle as well: https://jsfiddle.net/PxyMeister/58kxwn4a/
(Its a silly a doubt. But I am new to three js and Programming in general)/


After that line, your unitVector is not a unit vector anymore. Now it’s (2, 0, 0) instead of (1, 0, 0).
If you want to keep your unit vector length of 1 unit, then do something like that:
let newCenter = new THREE.Vector3().copy( oldCenter ).addScaledVector( unitVector, distance * scaleFactor ); ( though, I didn’t get what that line intended for originally)

And do the same thing in your animation loop
newCenterLoop.copy( oldCenter ).addScaledVector( unitVector, distance * _i );

1 Like

Thanks for the reply!