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

使用正弦波在three.js中从中心动画一个对象

1 个答案: