How to provide animation delay

Questions
1 
function render(time) {
  const width = divContainer.clientWidth;
  const height = divContainer.clientHeight;
  renderer.setSize(width, height);
  renderer.render(scene, camera);
  updateShot();
  requestAnimationFrame(render);
}

function updateShot() {
  if(shot) {
    setupLine(trajectory);
  }
}

function setupLine(trajectory) {
  const lineMaterial = new THREE.LineBasicMaterial({ color: 'red', opacity: 0.5, transparent: true});
  const shaderLineMeterial = new THREE.LineBasicMaterial({color: 'black', opacity: 0.5, transparent: true});

  let linePoints = [new THREE.Vector3(0, 0, 0).multiplyScalar(3)];
  let shaderPoints = [new THREE.Vector3(0, 0, 0).multiplyScalar(3)];

  if (count < trajectory.length) {
    for (let i = 0; i < count; i++) {
      linePoints.push( new THREE.Vector3(trajectory[i].x, trajectory[i].y, trajectory[i].z,).multiplyScalar(3));
      shaderPoints.push( new THREE.Vector3(trajectory[i].x, 0, trajectory[i].z).multiplyScalar(3));
    }

    let tubeGeometry = new THREE.TubeGeometry(
      new THREE.CatmullRomCurve3(linePoints),
      40,// path segments
      0.3,// THICKNESS
      22, //Roundness of Tube
      false //closed
    );
  
    let shaderTubeGeometry = new THREE.TubeGeometry(
      new THREE.CatmullRomCurve3(shaderPoints),
      40,// path segments
      0.3,// THICKNESS
      22, //Roundness of Tube
      false //closed
    );

    scene.remove(group);
    scene.remove(group2);

    let line = new THREE.Mesh(tubeGeometry, lineMaterial);
    let line2 = new THREE.Mesh(shaderTubeGeometry, shaderLineMeterial);
    group = new THREE.Group();
    group2 = new THREE.Group();

    line.castShadow = true;

    group.add(line);
    group2.add(line2);
    group.castShadow = true;
    group.position.z = 100;
    group.position.y = -20;

    group2.position.z = 99.9;
    group2.position.y = -20;

    scene.add(group);
    scene.add(group2);
  } else {
    shot = false;
    count = 1;
  }
  count++;
}

hello.
I used tubegeometry to create line drawing animation by adding and deleting lines.
I want to add a delay to this animation. Is there any way? Thank you as always for your kind answers.

2

you can use settimeout()
or compare elapsed time with THREE.Clock()

1 Like
3

Thanks for your answer! Thanks to you, I solved it well.