css - WebGL 演练，在 3D 场景中移动

Question

我是 WebGL 的新手，我正在尝试为一个网站创建一个演练，我已经在 inka3D 的帮助下将我的 Maya 模型带入了 WebGL，但是当我为运动应用以下代码时，它没有像它解释的那样工作。只有左箭头可以正常工作。

function resize()
{
    var width = canvas.offsetWidth;
    var height = canvas.offsetHeight;
    canvas.width = width;
    canvas.height = height;
    aspect = width / height;
}    


var cameraTargetX = 37.2878151;
    var cameraTargetY = 12.846137;
    var cameraTargetZ = 7.17901707;

    var dx = 5;
    var dy = 5;

    window.addEventListener('keydown',doKeyDown,true);
                    function doKeyDown(evt){
                    switch (evt.keyCode) {
                    case 38:  /* Up arrow was pressed */
                        if (cameraTargetY - dy > 0){ 
                        cameraTargetY -= dy;
                    }
                    break;
                    case 40:  /* Down arrow was pressed */
                        if (cameraTargetY + dy < height){ 
                        cameraTargetY += dy;
                    }
                    break;
                    case 37:  /* Left arrow was pressed Fine*/
                        if (cameraTargetX - dx > 0){ 
                        cameraTargetX -= dx;
                    }
                    break;
                    case 39:  /* Right arrow was pressed */
                        if (cameraTargetX + dx < width){ 
                        cameraTargetX += dx;
                    }
                    break;
                    }
                    }

                };

Answer 1

如果只有左箭头有效，这意味着 (cameraTargetX - dx) > 0 的差异。这就是您可以翻译的原因。原因是 cameraTargetX 是 37 diff of 5 使它成为 32 并且在按键时你可以在 5X7(循环)中可视化它。键被按下 7 次，直到值变得小于零但是当 var cameraTargetY = 12.846137; dy 是 5，它只需要 5x2(循环)只是一小部分，并且该值变得小于零，您可以看到差异。

解决方案如所述 dx 和 dy 是增量值意味着这应该非常小，因为变量对流所以尝试 var dx = 0.05; var dy = 0.05; 你会得到答案。如有任何疑问，请随时询问