Inverser l'axe z, lors de la projection en perspective

Question

Je crée un jeu de rythme. Mais je n'utilise pas le métronome pour calculer les positions des notes sur l'écran (interface du jeu). Ce que j'ai est un fichier avec une carte de notes qui ressemble beaucoup à un fichier de sous-titres.

Le problème est que lorsque je projette les notes en perspective, les notes ne sont pas affichées correctement. Il semble que j'ai inversé l'axe Z et je ne peux pas le changer. Je voudrais savoir comment changer l'axe correctement car. Ou si quelqu'un peut m'aider avec une autre solution, j'apprécierais. J'ai essayé différentes choses mais je ne suis pas capable de faire apparaître correctement les notes.

Here is the fiddle, et la fonction où j'exécute le calcul de la perspective.

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

Merci d'avance.

Answer 1

L'axe z n'est pas inversé, les notes viennent de haut en bas, mais elles semblent s'éloigner, car elles se réduisent, vous devez donc ajuster votre affectation d'échelle. Lorsque vous utilisez var scale = (fov + notePosition)/fov;, il semble qu'ils viennent vers l'utilisateur, bien que vous deviez ajuster un peu plus votre formule pour l'améliorer.

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