我使用three.js的空间扭曲场景中的线条动画不会重置

Question

我使用此视频制作了类似于空间扭曲效果的东西： 文字

动画效果很好，但由于某种原因，我的线条不会像我的代码视频中那样重置，它们只是一直持续到一个点然后停止。有人可以帮忙吗？

这是我的代码：

let numofStars = 1000

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 500);

let starGeom = new THREE.BufferGeometry()
starGeom.setAttribute("position", new THREE.BufferAttribute(new Float32Array(6 * numofStars), 3))
starGeom.setAttribute("velocity", new THREE.BufferAttribute(new Float32Array(2 * numofStars), 1))
let starPos = starGeom.getAttribute("position")
let pa = starPos.array
let starVel = starGeom.getAttribute("velocity")
let va = starVel.array

for (let i = 0; i < numofStars; i++) {
  let x = Math.random() * 400 - 200
  let y = Math.random() * 200 - 100
  let z = Math.random() * 500 - 100

  let xx = x
  let yy = y
  let zz = z
  // line start
  pa[6 * i] = x
  pa[6 * i + 1] = y
  pa[6 * i + 2] = z
  // line end
  pa[6 * i + 3] = xx
  pa[6 * i + 4] = yy
  pa[6 * i + 5] = zz

  va[2 * i] = va[2 * i + 1] = 0
}
let starMaterial = new THREE.LineBasicMaterial({ color: 0xffffff })
let stars = new THREE.LineSegments(starGeom, starMaterial)
scene.add(stars)

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
});

const pointLight = new THREE.PointLight(0xffffff)
pointLight.position.set(5, 5, 5)
const ambientLight = new THREE.AmbientLight(0xffffff)
scene.add(pointLight, ambientLight)

// const lightHelper = new THREE.PointLightHelper(pointLight)
// const gridHelper = new THREE.GridHelper(200, 50)
// scene.add(lightHelper, gridHelper)

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
const controls = new OrbitControls(camera, renderer.domElement)

camera.position.z = 200;
camera.position.x = -2;
controls.update();

function animate() {

  for (let i = 0; i < numofStars; i++) {
    va[2 * i] += 0.03
    va[2 * i + 1] += 0.025

    pa[6 * i] += va[2 * i] //start

    pa[6 * i + 2] += va[2 * i + 1] //end

    if (pa[6 * i + 5] > 200) {
      let z = Math.random() * 200 - 100;
      pa[6 * i + 2] = z
      pa[6 * i + 5] = z
      va[2 * i] = 0
      va[2 * i + 1] = 0

    }

    starPos.needsUpdate = true
  }

// Here is what it's doing 
// [ just a bunch of lines that end](https://i.stack.imgur.com/3Inkk.jpg)


  // stars.rotation.y += 0.002;

  requestAnimationFrame(animate);

  controls.update()

  renderer.render(scene, camera);
}

animate();

这是我试过的第三个视频。我期待类似视频的内容，但无济于事。