Rotating the character into the mouse direction

[klavdij]

Hello. I am a Babylon.js noob and i have been stuck on this problem for quite some time now. Im trying to implement that my character rotates toward the point where my mouse cursor is. I haven't found something like this for Babylon, but i have been trying to copy some of the unity scripts, but was unsucessful. 

I have a 3D ortographic view (camera), and have been trying to do it as it is shown in the code below (something similar works in unity).

document.onmousemove = function(e){            cursorX = e.pageX;            cursorY = e.pageY;            var vector = new BABYLON.Ray.CreateNew(character.position.x,character.position.z,cursorX,cursorY,camera.getWorldMatrix(),camera.getViewMatrix(),camera.getProjectionMatrix());            character.lookAt(vektor.direction);  }

My character only rotates at the start for a small value (also in the wrong direction, i only want to rotate the x and y axis) and after that the mouse movement doesn't impact him. If anybody has any kind of tip or a solution to the problem,  I would be very grateful. Cheers

[GameMonetize]

Hello and welcome

 

lookAt takes a position and not a direction so this may work with character.lookAt(character.position.add(vektor.direction)

[klavdij]

Thanks for the anwser. I tried your solution, but it does the same things. To explain what i mean that by that, here are 2 pictues :

 

http://imgur.com/a/nlGLc

 

 

The first one is before mouse enters the canvas and the second one is after i enter. After that i can move him normally, but he doesn't rotate in any way. Everything i tried until now gave me this result.

 Maybe the translation from world coordinates to screen isnt right ? I dont know, i really am lost. 

[iiceman]

Hi klavdij and welcome to the forum.

 

Maybe that helps: http://www.babylonjs-playground.com/#23M0G6

 

Tip for getting the best feedback here: make a playground so people can directly play with your code and help you out in the most efficient way

[klavdij]

Wow iiceman, thank you! Thats exactly the thing i needed... but there remains one problem. He now still rotates the x and y axis, and i only want him to look at x and z axis (he looks like he is looking in the air ). Can i apply lookAt in a different way, so that it will apply the pointerY to the Z axis rotation? And thanks for the tip, still getting used to the playground, but will use it in the future 

[iiceman]

Here is a link to the documentation of the lookAt function: http://doc.babylonjs.com/classes/2.2/AbstractMesh#lookat-targetpoint-yawcor-pitchcor-rollcor-rarr-void

 

The parameters have soemthing to do with the axis, but I don't have time to check how exactly that works. Maybe you just try things out and see if it helps

[klavdij]

Thanks, he does rotate now but he still is lying horizontally like the drunk he is  . I tried making a vector switching the axis but it doesn't solve the problem. Maybe the problem is somewhere else? Can i maybe make a fixed axis, so that he cant rotate in its way?

[iiceman]

Maybe you can do something like this: http://www.babylonjs-playground.com/#23M0G6#1 ? (maybe use the y value of your meshes position instead of a fixed value)

[klavdij]

I tried that with all the different axis, but i didnt work. Huh, could be a model problem... 

[iiceman]

What exactly is the Problem... he is always laying on his back?

 

Did you copy this part, too?

indicator.rotation.x = -Math.PI / 2;indicator.bakeCurrentTransformIntoVertices();

 You don't need that... if you have that in your code it could be the reason for the laying down. I just used this piece of code to rotate the cone and then bake the transformation into the geometry so that you can see what direction the model currently points at. No need for you to rotate your model and bake that transformation, though.

 

 

If you did not copy that code part... then do so. Sounds weird, I know. But If your model lays down because it's jsut created like this, you can rotate it back up and the bake the transformation into the model. Hope you know what I mean

[klavdij]

Yes, i get what you want to say  By lying down i mean the second picture that i posted No primarly i didn't copy that part . But when i did i got the following result : 

 

http://imgur.com/BOpVVVJ

 

He is in the right position! But he is moving out of the map if i get the mouse on the canvas....a whole new level  . The code doesn't tell him to move?   Dont know what to do haha.

Here is the latest attribution of the code , character import with baked vertices :

 BABYLON.SceneLoader.ImportMesh("","","benderskup.babylon",scene,function(newMeshes){        bender = newMeshes[0];        bender.position = new BABYLON.Vector3(-13,0.75,-14);        bender.scaling = new BABYLON.Vector3(0.1,0.1,0.1);        bender.rotation.z = Math.PI;        bender.isVisible = true;        bender.checkCollisions = true;        bender.collisionsEnabled = true;        bender.gravity = new BABYLON.Vector3(0,-9.81,0);        bender.rotation.x = -Math.PI / 2;        bender.bakeCurrentTransformIntoVertices();        camera.target = bender;    });

And the event listener :

window.addEventListener("mousemove", function () {                var pickResult = scene.pick(scene.pointerX, scene.pointerY);                if (pickResult.hit) {                    var targetPoint = pickResult.pickedPoint;                    targetPoint.y = 1; //this does not change anything                    bender.lookAt(targetPoint);                }        });

[iiceman]

Hmm, can you put the whole thing online or ZIP it and post a download link? Then we could take a closer look

[klavdij]

Sure here is  a GitHub link here for you : https://github.com/klavdijS/CleanItUp/tree/Cloudy 

The code is ugly, I know, this is my first game ever.. But if you see any optimization options, please let me know. Also, the collisions are very buggy, so if you start sliding down the wall, dont be surprised  . I still want to implement the camera rotation and eventually moving to the point where the cursor is pointing. These are the functions in the code that i made for rotation the object (so you know what to look for) : 

window.addEventListener("mousemove",function(){       //characterFollow();});function characterFollow(){        var pickResult = scene.pick(scene.pointerX,scene.pointerY);        if (pickResult.hit){            var targetPoint = pickResult.pickedPoint;            bender.lookAt(targetPoint);        }}

I commented it out so the game is functional and the character doesn't lay on the ground. If you have and solution to the problem, it would be great  .

[iiceman]

Okay, I'll take a look tonight and see waht I can do for you

[iiceman]

hmm.. guess I'll have to take a deep look later on, I just figured otu so far that you should do it in this order:

bender.rotation.z = Math.PI;bender.bakeCurrentTransformIntoVertices();bender.position = new BABYLON.Vector3(-13,0,-13);

when you import the mesh. But there are other problems, for some reason you character looses the texture when I do that. And there are problem with the picking as well. I take another look tomorrow.

[iiceman]

Okay, I finally took another look and played around with it quite some time. I cahnged alot of things (mostly code structure) and I broke alot of things you can have a look at the code here (as soon as it is done pushing, your assets are way too huge!): https://github.com/iiceman40/CleanItUp
 
And here is an online version to try out and tell me if that's what you want: http://p215008.mittwaldserver.info/CleanItUp/ (loads really long, again, the assets folder is 62MB, maybe you can reduce that )
 
What I broke:

• the switching between the cameras when moving around
• the whole level layout, not sure how I manged to break that but somehow it looks like all the things ended up in different places now
• the keyboard controls and you custom collision system
• probably also broke all interactions that you had in there... the door opening stuff and so on
• (removed some of your sources files (but nothing important) that I think you got via bower? or just copied everything in there? I removed it because it slowed down the auto complete function of my editor)

What I changed/fixed:

• I tried to separate some of of the things you do and put them into class files like a Player class and a LevelBuilder class. That way I could separate a view things which made debugging easier for me and helps keeping a better overview over things.
• I changed the movement to mouse cursor input. so your character moves where you click
• I switched to the moveWithCollions function provided by babylon (no physics here, just moving with collisions the way babylon js intends it)
• now for the main problem about the mesh rotation and the lookAt function: I fixed it by using a dummy cube as your player object and then just add this dummy as the parent of your imported mesh. This way I could somehow control better what rotations it does and I could test it without using your imported mesh in the first place. (i just tried it with the normal cube, then added your mesh as a child to that cube). I also added an extra ground object that is used for checking where you actually point with your cursor in the 3d environment.
  
  The gorund thingy:
  

  	this.ground = BABYLON.Mesh.CreateGround('ground', 50, 50, 100, scene);	this.ground.isVisible = false;

  The dummy player object and the imported mesh:
  

  	this.player = BABYLON.MeshBuilder.CreateBox('player', {}, scene);	this.player.isVisible = false;	this.player.position = new BABYLON.Vector3(-13, 1, -13);	this.player.gravity = new BABYLON.Vector3(0, -9.81, 0);	this.player.checkCollisions = true;	this.player.collisionsEnabled = true;	this.player.ellipsoid = new BABYLON.Vector3(0.5, 1.0, 0.5);	this.player.ellipsoidOffset = new BABYLON.Vector3(0, 1.0, 0);	camera.target = this.player;	BABYLON.SceneLoader.ImportMesh("", "assets/", "beauty.babylon", scene, function (newMeshes) {		playerAvatar = newMeshes[0];		playerAvatar.scaling = new BABYLON.Vector3(0.0075, 0.0075, 0.0075);		playerAvatar.isVisible = true;		playerAvatar.position.y = -1;		playerAvatar.parent = self.player;		//playerAvatar.rotation.z = Math.PI/2;		//playerAvatar.rotation.y = Math.PI/2;		//player.bakeCurrentTransformIntoVertices();	});

  The lookAt stuff:
  

  	// helper object to show current position of cursor in 3d space	var gizmo = BABYLON.Mesh.CreateBox('gizmo', 0.2, scene);	function characterFollow() {		var pickResult = scene.pick(scene.pointerX, scene.pointerY, function (mesh) {			return mesh == ground;		});		if (self.player && pickResult.hit) {			var targetPoint = pickResult.pickedPoint.clone();			gizmo.position = targetPoint.clone();			targetPoint.y = self.player.position.y;			self.player.lookAt(targetPoint);		}	}

  So in the end no extra rotations or anything was needed. The gizmo shows the point that you currently pick. And we just rotate the the cube mesh. You imported mesh follwes since the cube is it's parent.
   
• I think I changed more detail stuff, but can't remember anymore

 

I hope that helps somehow even if I broke more than I fixed. You can take a look at what I did and decide what of if you can and want to use and what you don't like. It's probably not all good/helpful. If you have questions just ask and I'll try to explain.

[klavdij]

Wow dude, I can't say how grateful i am for all the help!  . I owe you a beer  I will study up the code tomorrow when i have some spare time and will probably have alot of questions, untill then thank you very very much