Jump to content

Cursor on the center of the canvas


Recommended Posts

Hello !

I'm trying to set a mesh at the center of my canvas while using a free camera, but I have difficulties.

Considering that it's a mandatory feature in fps games, I thought that I may have a response using babylon js transformations classes, and camera worldMatrix and viewMatrix.

Thank you in advance !

Link to comment
Share on other sites

Thanks !

I used this for calculating the 3D position of a mesh placed at the center of the canvas. Knowing that, I do a reference change for calculating the distance between the projection in the viewport of this two meshes : the central mesh and a picked mesh.

Now, I'm trying to do that without this pointless mesh. So it would be nice if I only had the position of this mesh without this mesh.

I've thought of using a Ray but I don't know how to do it, and if it's technically possible.

Is this a possible solution and is there a solution ?

Link to comment
Share on other sites

Hi SC!  Welcome to the forum... good to have you with us.  Getting the distance between the active camera and the picked mesh... is actually SUPER easy.  Take a look at our picking tutorial:




The pickResult object is mainly composed of 4 pieces of information:


1 - hit (bool): TRUE if your click hits an object in the scene.


2 - distance (float): the “distance” between the active camera and your hit (infinite if no mesh was hit)


3 - pickedMesh (BABYLON.Mesh): if you hit an object, this is the selected mesh. If not, it’s null.


4 - pickedPoint (BABYLON.Vector3): the point you have clicked, transformed in 3D coordinates, depending on the object you’ve clicked. Null if no hit.


See #2?  So, pickResult.distance contains the distance between the cam and the picked mesh.  Nice, huh?


I made a playground scene to test it...




Ignore all that 'label' stuff.  That's just goofy me trying to avoid using an 'alert'.  (Sometimes I think our playground needs a small text output field added to it.)


Way down near the bottom, I use pickResult.distance to set the text on that lower plane (the label).  But you don't need all that label stuff.  There is a remarked-out alert just above that line, so feel free to un-remark that line, and hit the Run button again.  The playground is designed for making adjustments and hitting Run, over and over... experimenting.


The main point, pickResult.distance, contains the value you need, if I understand your need correctly.  Notice that when you click in the corners, the distance is higher... than when you click in the center.  That makes logical sense, right?  I hope this helps.

Link to comment
Share on other sites

Thanks for your detailed response Wingnut,


But it doesn't answer to my question. I already know these tools and they are not effective for resolving my problem. I'm not trying to calculate the distance between the camera and a picked mesh.


What I'm trying to do is to know the position of a mesh which is placed on the axe of my camera, regardless of the depth. I need to have this position without introducing an additional mesh or a plane.


I've already managed to do that with recovering the absolute position of a mesh whose parent is the camera and whose position relative to the camera is (0,0,10).


But now, it would be nice to have this position without this mesh. Moreover, is there a function who can get the vector whose direction is the sight direction of the camera ?

Link to comment
Share on other sites

is there a function who can get the vector whose direction is the sight direction of the camera ?


Hello SolidCatuar,


Try this:

var directionJoueur = function (rotation) {    var matriceRotation = BABYLON.Matrix.RotationYawPitchRoll(rotation.y, rotation.x, rotation.z);    return BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0, 0, 1), matriceRotation);};

Cordially, Mounir.

Link to comment
Share on other sites

Sorry SC... I misunderstood your needs.  I edit the Playpen Series tutorials pretty often, and after a person does that for a while, a person starts over-explaining things, and speaking like everyone is a beginner to 3D graphics.  It is a strange (and somewhat annoying) habit I have acquired. 


But the good thing about that... it has led to Moon giving us both some cool code.  Thanks Moon, for the code, and for cleaning up my mess.  :D  SC, if you would, make YOUR code/project available, too, at some 'point'.  I love to learn... and I NEED to learn.  Thanks.


Remember a game called Battlezone?  Green vector graphics FPS tank game.  (Am I a geezer?)  Ever since Temechon put that mesh in front of the camera in that playground scene... I have been thinking about that game.  Hmm.  Anyway, enough yapping about me me me.  Geez, Wingy.

Link to comment
Share on other sites

No problems Wingnut :)

I'm too young to have known this game, but retro gaming have always fascinated me so I will

And thank you Moon for this code !


On my side I've solved my problem. Here is a jsfiddle with my solution : http://jsfiddle.net/BluePampa/J8Mq3/

Here, I'm working with a free camera. The results is the same as if I had attached my mesh to a camera but I can get the absolute position of this mesh without creating this mesh and it's important for me !


Thank you again to everyone ! it's really handy to be part of a such reactive community :D

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.

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.


  • Recently Browsing   0 members

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