how to properly animate/tween a line in THREE.js using TweenLite?
gsap, javascript, three.js
Solution
Found the solution myself: Above the vertex is flagged as needing an update, which happens once in the line `line.geometry.verticesNeedUpdate = true;`. But this flag needs to be set after each change in the vertex. This can be achieved by putting the update line in the `onUpdate` function. Now, the line will be called after each update of the vertex.
target.onUpdate = function () {
line.geometry.verticesNeedUpdate = true;
};
Problem
I want to tween a 3D line using `THREE.JS` and `TweenLite`. But the approach that works well with e.g. the position of a sphere does not work out here. I do not know why. ``` // add a line to 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 ); // using TweenLite to animate 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(); ``` Result: Nothing happens. Why? PS. The reason might be explained in this post, but I do not understand it.