Jump to content

Rotating the character into the mouse direction


klavdij
 Share

Recommended Posts

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 :)

Link to comment
Share on other sites

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.  :wacko:

Link to comment
Share on other sites

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 :D). 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  ;)

Link to comment
Share on other sites

Thanks, he does rotate now but he still is lying horizontally like the drunk he is  :P . 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?

Link to comment
Share on other sites

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 :P

Link to comment
Share on other sites

Yes, i get what you want to say :) By lying down i mean the second picture that i posted :P No primarly i didn't copy that part :D. 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 :D . The code doesn't tell him to move? :lol:  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);                }        });
Link to comment
Share on other sites

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  :D . 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  :P .

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :D 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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...