javascript - 通过鼠标单击场景来模拟 2d js Canvas 上的物理 3d 球 throw

Question

我想将一个球(带有图像)扔到一个二维场景中，并在它到达一定距离时检查它是否发生碰撞。但我无法让它正确地“飞”。似乎这个问题已经被问过一百万次了，但随着我发现的越多，我就越困惑..现在我关注了this answer但看起来，球的表现与我的预期非常不同。事实上，它移动到 Canvas 的左上角并且变得太小太快 - 当然我可以通过将 vz 设置为 0.01 或类似的值来调整它，但随后我根本看不到球......

这是我的对象(简化)/链接到 full source谁有兴趣。重要的部分是 update() 和 render()

var ball = function(x,y) {

  this.x        = x;
  this.y        = y;
  this.z        = 0;
  this.r        = 0;
  this.src      = 'img/ball.png';
  this.gravity  = -0.097;

  this.scaleX   = 1;
  this.scaleY   = 1;

  this.vx       = 0;
  this.vy       = 3.0;
  this.vz       = 5.0;

  this.isLoaded = false;

  // update is called inside window.requestAnimationFrame game loop
  this.update = function() {
    if(this.isLoaded) {
      // ball should fly 'into' the scene
      this.x += this.vx;
      this.y += this.vy;
      this.z += this.vz;

      // do more stuff like removing it when hit the ground or check for collision
      //this.r += ?

      this.vz += this.gravity;
    }
  };

  // render is called inside window.requestAnimationFrame game loop after this.update()
  this.render = function() {
    if(this.isLoaded) {

      var x       = this.x / this.z;
      var y       = this.y / this.z;

      this.scaleX = this.scaleX / this.z;
      this.scaleY = this.scaleY / this.z;

      var width   = this.img.width * this.scaleX;
      var height  = this.img.height * this.scaleY;

      canvasContext.drawImage(this.img, x, y, width, height);

    }
  };

  // load image
  var self      = this;
  this.img      = new Image();
  this.img.onLoad = function() {
    self.isLoaded = true;
    // update offset to spawn the ball in the middle of the click
    self.x        = this.width/2;
    self.y        = this.height/2;
    // set radius for collision detection because the ball is round
    self.r        = this.x;
  };
  this.img.src = this.src;

} 

我还想知道，使用 requestAnimationFrame 以约 60fps 渲染 Canvas 时，哪些速度参数应该合适，以获得“自然”的飞行动画

如果有人能指出我正确的方向(当然还有解释逻辑的伪代码)，我将非常感激。

谢谢

Answer 1

我认为最好的方法是首先在公制内模拟情况。

speed = 30; // 30 meters per second or 108 km/hour -- quite fast ...
angle = 30 * pi/180;  // 30 degree angle, moved to radians.

speed_x = speed * cos(angle);
speed_y = speed * sin(angle);  // now you have initial direction vector

x_coord = 0;
y_coord = 0;  // assuming quadrant 1 of traditional cartesian coordinate system

time_step = 1.0/60.0;    // every frame...

// at most 100 meters and while not below ground
while (y_coord > 0 && x_coord < 100) {

   x_coord += speed_x * time_step;
   y_coord += speed_y * time_step;

   speed_y -= 9.81 * time_step;   // in one second the speed has changed 9.81m/s

   // Final stage: ball shape, mass and viscosity of air causes a counter force
   // that is proportional to the speed of the object. This is a funny part:
   // just multiply each speed component separately by a factor (< 1.0)
   // (You can calculate the actual factor by noticing that there is a limit for speed
   //  speed == (speed - 9.81 * time_step)*0.99, called _terminal velocity_
   // if you know or guesstimate that, you don't need to remember _rho_,
   // projected Area or any other terms for the counter force.

   speed_x *= 0.99; speed_y *=0.99;
}

现在您将拥有一个时间/位置系列，从 0,0 开始(您可以使用 Excel 或 OpenOffice Calc 进行计算)

speed_x        speed_y       position_x     position_y    time 
25,9807687475  14,9999885096 0              0             0 
25,72096106    14,6881236245 0,4286826843   0,2448020604  1 / 60
25,4637514494  14,3793773883 0,8530785418   0,4844583502  2 / 60
25,2091139349  14,0737186144 1,2732304407   0,7190203271
...
5,9296028059   -9,0687933774 33,0844238036  0,0565651137  147 / 60
5,8703067779   -9,1399704437 33,1822622499 -0,0957677271  148 / 60

从该表中，人们可以首先估计球击中地面的距离和时间。它们的长度为 33.08 米，时间为 2.45 秒(或 148 帧)。通过继续在 Excel 中进行模拟，我们还注意到终端速度约为 58 km/h，这并不多。

确定 60 m/s 或 216 km/h 的最终速度比较合适，正确的衰减因子将为 0,9972824054451614。

现在唯一剩下的任务是确定屏幕的长度(以米为单位)并将 pos_x、pos_y 乘以正确的缩放因子。如果 1024 像素的屏幕为 32 米，那么每个像素对应 3.125 厘米。根据应用的不同，人们可能希望“改善”现实并使球变得更大。

编辑:另一件事是如何将其投影到 3D 上。我建议您将前一种算法(或Excel)生成的路径作为可见对象(由线段组成)，您可以旋转和平移它。