如何在threejs中制作动画波形

Question

我正在尝试使用Three.js和Points制作动画3D波形。它有点工作。它开始缓慢，然后应用程序正在增加。但是过了一段时间它变得太高而且不稳定。

这应该是它的样子。然而，经过一段时间后，它正在失去它的形状。问题是正弦的减少周期和增加的幅度。但我没有解决它。

这是一些代码。

创建点网格。

this.particleGeometry = new Geometry()

for (let ix = 0; ix < this.WIDTH; ix++) {
  for (let iz = 0; iz < this.HEIGHT; iz++) {
    let vert = new Vector3()
    vert.x = ix * this.SEPERATION - ((this.WIDTH * this.SEPERATION) / 2)
    vert.y = (Math.cos((ix / this.WIDTH) * Math.PI * 6) + Math.sin((iz / this.HEIGHT) * Math.PI * 6))
    vert.z = iz * this.SEPERATION - ((this.HEIGHT * this.SEPERATION) / 2)
    this.particleGeometry.vertices.push(vert)
  }
}

this.particleCloud = new Points(this.particleGeometry, this.material)
this.scene.add(this.particleCloud)

最初的一代非常好。但更新有问题。

animate（）代码：

render () {
  let index = 0
  let time = Date.now() * 0.00005
  let h = (360 * (1.0 + time) % 360) / 360

  this.theta += 0.0008

  this.material.color.setHSL(h, 0.5, 0.5)

  for (let ix = 0; ix < this.WIDTH; ix++) {
    for (let iz = 0; iz < this.HEIGHT; iz++) {
      this.particleCloud.geometry.vertices[index].y = (Math.cos((ix * this.theta / this.WIDTH) * Math.PI * 6) + Math.sin((iz * this.theta / this.HEIGHT) * Math.PI * 6))
      index++
    }
  }

  this.particleCloud.geometry.verticesNeedUpdate = true
  this.updateGuiSettings()
  this.renderer.render(this.scene, this.camera)
},

this.theta从0开始然后慢慢增加。

Answer 1

好的，让它与(Math.cos((ix / this.WIDTH * PI * 8 + this.theta)) + Math.sin((iz / this.HEIGHT * PI * 8 + this.theta)))

一起使用

现在它很稳定。但是会调整它可能更多。