Math 如何在3JS中制作动画波浪

我正在尝试用三个.js和点制作一个动画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)

this.particleGeometry=新几何体（）
for（设ix=0；ix

最初的一代相当不错。但是更新是有缺陷的

动画（）代码：

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)
},

render（）{
设指数=0
让时间=Date.now（）*0.00005
设h=（360*（1.0+时间）%360）/360
这个θ=0.0008
此.material.color.setHSL（h，0.5，0.5）
for（设ix=0；ix

---

该.theta从0开始，然后缓慢增加
 好的，让它与
（Math.cos（（ix/this.WIDTH*PI*8+this.theta））+Math.sin（（iz/this.HEIGHT*PI*8+this.theta））一起工作。

现在它是稳定的。不过，可能会对它进行更多的调整。
好的，让它使用
（Math.cos（（ix/this.WIDTH*PI*8+this.theta））+Math.sin（（iz/this.HEIGHT*PI*8+this.theta））

现在它是稳定的。不过，它可能会做更多的调整。
尝试使用加法而不是乘法，
y=（Math.cos（（ix/this.WIDTH+this.theta）*Math.PI*6）+Math.sin（（iz/this.HEIGHT+this.theta）*Math.PI*6））
。为什么振幅里面有一个系数
pi
，这似乎不自然，你可以用
20
代替
6*pi
。你能尝试使θ更新与经过的时间成比例吗，即，
因子*（time starttime）
？谢谢，我会尝试这个，抱歉，没有正确扫描公式中的分组，
6*pi
在三角参数内，因此是正确的。这个问题有点老了，但是你是否有机会获得这种效果的现场版本的链接？我记得在Three.js官方网站上有一个类似的例子，但我找不到它的链接。似乎已经更新了许多示例。@IsilmëO.当然：尝试使用加法而不是乘法，
y=（Math.cos（（ix/this.WIDTH+this.theta）*Math.PI*6）+Math.sin（（iz/this.HEIGHT+this.theta）*Math.PI*6））
。为什么振幅里面有一个系数
pi
，这似乎不自然，你可以用
20
代替
6*pi
。你能尝试使θ更新与经过的时间成比例吗，即，
因子*（time starttime）
？谢谢，我会尝试这个，抱歉，没有正确扫描公式中的分组，
6*pi
在三角参数内，因此是正确的。这个问题有点老了，但是你是否有机会获得这种效果的现场版本的链接？我记得在Three.js官方网站上有一个类似的例子，但我找不到它的链接。似乎已经更新了许多示例。@IsilmëO。确定：