I've been trying to animate a 3D line using THREE.JS and TweenLite. However, the method that usually works well with the position of an object like a sphere is not yielding the desired results in this case. The reason for this discrepancy eludes me.
// Creating a line in the scene using THREE.js
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(500, 500, 500));
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial());
scene.add( line );
// Implementing TweenLite for animation
var tl = new TimelineLite();
var target = { x: 0, y: 0, z:0 };
line.geometry.verticesNeedUpdate = true;
tl.add(TweenLite.to(line.geometry.vertices[1] , 1, target));
tl.play();
Outcome: No changes are observed. Why is that?
PS. The answer might be provided in this post, but I find it confusing.