4

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.

Community
  • 1
  • 1
Mark Heckmann
  • 10,943
  • 4
  • 56
  • 88

1 Answers1

6

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;
};
Mark Heckmann
  • 10,943
  • 4
  • 56
  • 88
  • Should be noted that the onUpdate function is a function that comes with GSAP, not Three.js, for clarity purposes. – 10000RubyPools Dec 20 '18 at 14:59
  • You hardcoded the animation a one specific vertice. Did you also find a way to animate all vertices of an object? That's what I am struggling atm because a simple forEach iteration doesn't seems to work. – phng Jul 04 '19 at 18:04