How to animate / scroll a line in THREE.js using TweenLite?

I want to fine tune the 3D line using THREE.JSand TweenLite. But an approach that works well with, for example, the position of the ball does not work 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. What for?

PS. The reason can be explained in this post , but I do not understand this.

+3
source share
1 answer

: , line.geometry.verticesNeedUpdate = true;. . onUpdate. .

target.onUpdate = function () {
   line.geometry.verticesNeedUpdate = true;
};  
+6

All Articles