如何在threejs中制作动画波浪

debugcn 发表于 Dev

雅库布·尤兹扎克

我正在尝试使用 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)

初代还是不错的。但是更新有问题。

动画（）代码：

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 开始，然后慢慢增加。

雅库布·尤兹扎克

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。