move forward and rotation

[dav74]

Hi,

I want to move and rotate a "tank" : left and right arrow => rotation + up arrow => move forward

i made this code :

var canvas = document.getElementById("renderCanvas"); var posZ=0;var keys={letft:0,right:0,forward:0};window.addEventListener('keydown',function(event){	if (event.keyCode==37){		keys.left=1;	}	if (event.keyCode==39){		keys.right=1;	}	if (event.keyCode==38){		keys.forward=1;	}});window.addEventListener('keyup',function(event){	if (event.keyCode==37){		keys.left=0;	}	if (event.keyCode==39){		keys.right=0;	}	if (event.keyCode==38){		keys.forward=0;	}});var engine = new BABYLON.Engine(canvas, true); var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("maCamera", 0, Math.PI/2, 30, new BABYLON.Vector3(0, 0, 0), scene); var light = new BABYLON.PointLight("pointLumineux1", new BABYLON.Vector3(20, 0, -10), scene); var tank=BABYLON.Mesh.CreateCylinder("tank", 3, 5, 3, 50, scene, false); var canon=BABYLON.Mesh.CreateCylinder("canon", 3.5, 0.5, 0.5, 50, scene, false);canon.position.z=3;canon.rotation.x=Math.PI/2;canon.parent=tank;scene.registerBeforeRender(function(){	if (keys.forward==1){		posZ=posZ+0.1		tank.setLocalTranslation(new BABYLON.Vector3(0,0,posZ));	}	if (keys.left==1){		tank.rotation.y=tank.rotation.y+0.1	}		if (keys.right==1){		tank.rotation.y=tank.rotation.y-0.1	}});engine.runRenderLoop(function () {     scene.render(); });

I understand why my code doesn't work but I don't know how to make it work ! How move forward (so in local space) after (and before) a rotation (I know this is a recurring problem, but i don't find the solution)?

 

Thank you for your help

[Temechon]

Hi Dav, 

 

Can you try this please ?

scene.registerBeforeRender(function(){	if (keys.forward==1){		var posX = Math.sin(tank.rotation.y);		var posZ = Math.cos(tank.rotation.y);		console.log(posX, posZ);		tank.position.x += posX;		tank.position.z += posZ;			}	if (keys.left==1){		tank.rotation.y=tank.rotation.y+0.1;	}		if (keys.right==1){		tank.rotation.y=tank.rotation.y-0.1	}});

It should work

[dav74]

Hi Temechon,

it works fine, thank you ! it will be hard to explain that to my students (sorry, in french to Temechon : des élèves de seconde), but, that's why "teacher" is a wonderful job ;-)

[Temechon]

Actually, it's simple trigonometry : sinus and cosinus in a triangle rectangle. (Piece of cake pour des élèves de secondes - programme de 3e je crois )

[dav74]

there is a big difference between programes and the actual level of students ;-)

[Temechon]

True

[melaugui]

Yep, best solution here, because of cosinus/sinus, your tank is always moving at the same speed (when cos increases, sin decreases)

Don't hesitate to see my exemple here : http://babylon.azurewebsites.net/

[dav74]

@melaugui thank you for your example