透视投影时反转 z 轴答案

【问题标题】：Invert z-axis, when projecting in perspective透视投影时反转 z 轴
【发布时间】：2017-01-22 20:03:52
【问题描述】：

我正在创建一个节奏游戏。但我没有使用节拍器来计算屏幕上音符的位置（游戏界面）。我所拥有的是一个与字幕文件非常相似的带有注释映射的文件。

问题是当我透视投影笔记时，笔记显示不正确。好像我把Z轴倒了，改不了了。我想知道如何正确更改轴，因为。或者，如果有人可以帮助我解决其他问题，我将不胜感激。我尝试了不同的方法，但无法正确显示笔记。

Here is the fiddle，以及我执行透视计算的函数。

function updateNotes() {
    currentPosition = (sound.seek() * 1000);

    notes.forEach(function(note, index) {
    var notePosition = (currentPosition * noteSpeed) - ((note.position * noteSpeed) - deadLine);

    if (notePosition > offScreenY && notePosition < height) {
    var ball = new Ball3d(5, '#000000');
    var scale = fov / (fov + notePosition);
    console.log(notePosition);
    ball.x = halfWidth;
    ball.y = halfHeight + notePosition * scale;
    ball.scaleX = ball.scaleY = scale;
    ball.draw(context);
    balls.push(ball);
  } else {
    // elimino la nota
    balls.splice(index, 1);
  }
  });
}

提前致谢。

【问题讨论】：

很难知道你想要什么。猜一猜试试ball.y = height - notePosition * scale;
感谢回复，我尝试的是从远方来的笔记，如下reference

标签： javascript math canvas perspectivecamera

【解决方案1】：

z 轴没有倒置，音符是从上到下的，但它们看起来好像越来越远，因为它们按比例缩小，所以你必须调整你的比例分配。使用var scale = (fov + notePosition) / fov; 时，它们看起来更像是向用户走来，尽管您必须更多地调整您的公式以使其看起来更好。

  // init variables
  var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    width = canvas.width = window.innerWidth,
    height = canvas.height = window.innerHeight,
    halfWidth = width / 2,
    halfHeight = height / 2,
    deadLine = height - 100,
    fov = 250,
    offScreenY = -100,
    currentPosition = 0,
    balls = [],
    noteSpeed = 0.3,
    animId;

  var sound = new Howl({
    src: ['https://rawcdn.githack.com/noeszc/atwood/master/assets/sounds/mario.ogg'],
    onload: function(){ setup(); },
    onend : function(){ stop(); }
  });

  function setup(){
    sound.play();
    sound.mute();
    drawDeadLine();
    gameLoop();
  }

  function gameLoop() {
    animId = requestAnimationFrame(gameLoop, canvas);
    context.clearRect(0, 0, width, height);
    updateNotes();
    drawDeadLine();
  }

  function updateNotes() {
    currentPosition = (sound.seek() * 1000);

    notes.forEach(function(note, index) {
      var notePosition = (currentPosition * noteSpeed) - ((note.position * noteSpeed) - deadLine);

      if (notePosition > offScreenY && notePosition < height) {
        var ball = new Ball3d(5, '#000000');
        var scale = (fov + notePosition)/fov;
        ball.x = halfWidth;
        ball.y = halfHeight + notePosition * scale;
        ball.scaleX = ball.scaleY = scale;
        ball.draw(context);
        balls.push(ball);
      } else {
        // elimino la nota
        balls.splice(index, 1);
      }
    });
  }

  // dibuja la linea base donde deben llegar las notas al ritmo
  function drawDeadLine() {
    context.beginPath();
    context.moveTo(0, deadLine);
    context.lineTo(width, deadLine);
    context.stroke();
  }

  function stop() {
    context.clearRect(0, 0, width, height);
    cancelAnimationFrame(animId);
    drawDeadLine();
    console.log('======= end music =========');
    console.log(balls);
  }

body {
  margin: 0;
}
canvas {
  display: block;
}

<script src="https://rawcdn.githack.com/noeszc/atwood/master/scripts/ball3D.js"></script>
<script src="https://rawcdn.githack.com/noeszc/atwood/master/scripts/notes.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.2/howler.min.js"></script>
<canvas id="canvas"></canvas>

【讨论】：