透視投影時反轉z軸

Question

我正在創建一個節奏游戲。 但是我沒有使用節拍器來計算音符在屏幕上的位置（游戲界面）。 我所擁有的是帶有注釋圖的文件，該文件與字幕文件非常相似。

問題是當我透視投影筆記時，筆記無法正確顯示。 似乎我已經反轉了Z軸，無法更改它。 我想知道如何正確更改軸，因為。 或者，如果有人可以幫助我提供其他解決方案，我將不勝感激。 我嘗試了不同的方法，但無法正確顯示筆記。

這是小提琴 ，以及執行透視圖計算的函數。

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);
  }
  });
}

提前致謝。

Answer 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>