Animate tube geometry

Questions
1

I need help with animation. I want animation of curve to look like in this video Github Globe Clone using Three.js | Three.js Portfolio Website - YouTube

but i have problem with logic. My animation goes from first point to 2nd and again back to 1st.

function animateLineUndrawing(lineMain, maxUn, delay, name){
  let nEnd = maxUn;
  let nMax;
  let nStep = 5;
  let geometry = lineMain.geometry;
  nMax = 0;
  let lineTo = {val: nEnd};
  new TWEEN.Tween(lineTo)
          .to({val: nMax}, 1000)
          .delay(1500 * delay)
          .onStart(()=>{
              //scene.add(lineMain);
          })
          .onUpdate(()=>{
              lineMain.geometry.setDrawRange( 0, lineTo.val  ); 
              renderer.render(scene, camera);
          })
          .onComplete(()=>{
             
              
              
          })
          .start();
}

function animateLineDrawing(lineMain, delay){
  let nEnd = 0;
  let nMax;
  let nStep = 5;
  let geometry = lineMain.geometry;
  nMax = geometry.attributes.position.count*6;
  let lineTo = {val: nEnd};
  new TWEEN.Tween(lineTo)
          .to({val: nMax}, 1000)
          .delay(1000 * delay)
          .onStart(()=>{
              scene.add(lineMain);
          })
          .onUpdate(()=>{
            lineMain.geometry.setDrawRange( 0, lineTo.val );
              renderer.render(scene, camera);
          })
          .onComplete(()=>{
              //window.alert("aaa");
             // animateLineUndrawing(lineMain, nMax, 0.5, name);
          })
          
          .start();
}
2

Although it does not answer your question, I though about demonstrating another approach, that animates paths by simple rotation. See lines 91-93 in this demo:

https://codepen.io/boytchev/full/VwEwzra

image

1 Like
3

@Jelena_Lukic
In the animateLineUndrawing function, this line
lineMain.geometry.setDrawRange( 0, lineTo.val );
has to be something like:
lineMain.geometry.setDrawRange( maxUn - lineTo.val, lineTo.val );

As for the “undrawing”, how I see it, you need to change the beginning and the length of the range. :thinking:
But this is just a thought.

1 Like