在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 来创建运动。最后我们添加一些变量来调整波浪的大小。