0

我是two.js的新手。我正在尝试使用橡胶球示例进行一些基本实验，以根据随机输入而不是鼠标移动每秒重新定位球。

所以，我写了下面的代码，但经过一些迭代后它正在消除橡皮球效应。我不知道出了什么问题。

第二个问题，经过一些迭代，橡胶球的形状正在从圆形变为椭圆形。

JSFiddle： http: //jsfiddle.net/2v93n/尝试了很多次，但没有与 jsFiddle 一起工作。

<body>
<script>
      var two = new Two({
        fullscreen: true,
        autostart: true
      }).appendTo(document.body);

      Two.Resoultion = 32;

      var delta = new Two.Vector();
      var mouse = new Two.Vector();
      var drag = 0.1;
      var radius = 25;
      var shadow = two.makeCircle(two.width / 2, two.height / 2, radius);
      var ball = two.makeCircle(two.width / 2, two.height / 2, radius);
      ball.noStroke().fill = 'green';shadow.noStroke().fill = 'rgba(0, 0, 0, 0.2)';          shadow.scale = 0.85;

    function moveRubberBall() {

      shadow.offset = new Two.Vector(- radius / 2, radius * 2);

      _.each(ball.vertices, function(v) {
        v.origin = new Two.Vector().copy(v);
      });

      mouse.x = Math.floor((Math.random() * 1000) + 1);
      mouse.y = Math.floor((Math.random() * 600) + 1);
      shadow.offset.x = 5 * radius * (mouse.x - two.width / 2) / two.width;
      shadow.offset.y = 5 * radius * (mouse.y - two.height / 2) / two.height;

      two.bind('update', function() {

        delta.copy(mouse).subSelf(ball.translation);

        _.each(ball.vertices, function(v, i) {

          var dist = v.origin.distanceTo(delta);
          var pct = dist / radius;

          var x = delta.x * pct;
          var y = delta.y * pct;

          var destx = v.origin.x - x;
          var desty = v.origin.y - y;

          v.x += (destx - v.x) * drag;
          v.y += (desty - v.y) * drag;

          shadow.vertices[i].copy(v);

        });
        ball.translation.addSelf(delta);
        shadow.translation.copy(ball.translation);
        shadow.translation.addSelf(shadow.offset);

      });
  }
  var auto_refresh = setInterval("moveRubberBall()", 1000);
</script>
</body>

请帮助某人。

4

1 回答 1

0

主要问题是two.bind('update'...)在moveRubberBall(). 当你绑定到update它意味着这个函数将被调用requestAnimationFrame，实际上是 60FPS。当每次moveRubberBall调用事件都绑定时（每秒一次），它会添加另一个回调。所以 5 秒后会有 5 次更新，称为 60FPS。我更新了您的小提琴以正确导入 two.js 并修复概述的此错误：

http://jsfiddle.net/2v93n/1/

于 2014-06-02T22:50:26.527 回答