WebGL Walkthrough, Move around the 3D scene - css

Question

I'm new to WebGL, and I'm trying to create a walk-through for a website, I have taken my Maya model into WebGL with the help of inka3D, but when I apply the following code for the movement, it doesn't work as it explains. Only the left arrow works fine.
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

If only the left arrow works this means that difference of (cameraTargetX - dx ) > 0. Thats why you can translate. The reason is cameraTargetX is 37 diff of 5 make it 32 and on key press you can visualize this in 5X7(loop). Key is pressed 7 times until the value become lesser than zero
But when var cameraTargetY = 12.846137; and dy is 5 it take only 5x2(loop) just a fraction and the value become lesser than zero and you can visualize the diff.
Solution is as stated dx and dy are delta values means this should be very small as variable convection so try with
var dx = 0.05;
var dy = 0.05;
You will get answer. If any doubt feel free to ask