逆投影したときのz軸反転

Question

私はリズムゲームを作成しています。しかし、私は、メトロノームを使って画面上の音符の位置を計算していません（ゲームインターフェイス）。私が持っているものは、字幕ファイルに非常に似ているノートマップを持つファイルです。

問題は、ノートをパースペクティブに投影すると、ノートが正しく表示されないということです。私は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); 
    } 
    }); 
} 

ありがとうございます。

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>