在three.js中用正弦波从中心为对象设置动画

Question

我正在尝试复制这种效果：https : //dribbble.com/shots/1754428-Wave?list=users&offset=5

我想与我提供的链接类似地为飞机的顶点设置动画。我知道它是使用正弦波传播实现的，但我不知道如何从平面的中心点开始运动。现在，我有这样的事情

(function drawFrame(ts){
  window.requestAnimationFrame(drawFrame);
  var vLength = plane.geometry.vertices.length;
  for (var i = 0; i < vLength; i++) {
    var v = plane.geometry.vertices[i];
    v.z = Math.sin(ts / 500 + (v.x * (vLength / 2)) * (v.y / (vLength / 2))) * 3 + 5;
  }

它的工作原理还可以，但请注意左上角和右下角的运动是如何向内，朝向平面中心而不是向外的，这应该是。其他两个角落的行为完全符合我的希望。

这是我目前拥有的链接：http : //codepen.io/gbnikolov/pen/QwjGPg

欢迎所有的建议和想法！

Answer 1

我找到了你的功能，因为它很有趣！

(function drawFrame(ts){
  var center = new THREE.Vector2(0,0);
  window.requestAnimationFrame(drawFrame);
  var vLength = plane.geometry.vertices.length;
  for (var i = 0; i < vLength; i++) {
    var v = plane.geometry.vertices[i];
    var dist = new THREE.Vector2(v.x, v.y).sub(center);
    var size = 5.0;
    var magnitude = 2.0;
    v.z = Math.sin(dist.length()/size + (ts/500)) * magnitude;
  }
  plane.geometry.verticesNeedUpdate = true;
  renderer.render(scene, camera);
}());

圆形图案是通过创建一个点来创建的，就像我上面所做的那样，调用center. 这就是波浪的起源。我们计算到中心点的距离。然后我们sin从中心点的距离来创建向上/向下。接下来我们添加时间ts来创建运动。最后我们添加一些变量来调整波浪的大小。