Jump to content

Camera mode like freelancer game


Recommended Posts

Hi Asagi.  My initial thoughts is that there is an invisble mesh parented to the fighter ship... and positioned in front of the ship... SOME distance.

Then, something similar to a BABYLON.FollowCamera is targeting that invisible mesh.  Notice the followCamera...

   .lockedTarget property - set the camera's .lockedTarget to the invisible mesh.  [a mesh object]
   .radius property - set the distance that the camera should follow-at.  [a positive number]
   .heightOffset property - to keep the camera a bit higher than ship/invisible-target.  [a number - perhaps positive or negative]
   .rotationalOffset property - potentially useful... just experiment with it.  [a number - perhaps positive or negative]
   .inertia and .speed - also potentially-useful properties.  [also numbers, likely positive-only]

I would say... 'target' your experiments in this 'direction'.  (arr arr arr)  :)  

Stay tuned, others may reply soon.

Link to comment
Share on other sites

The camera is apparently not following your space ship but the other way around.

Have you looked into the mesh.lookAt() and scene.pickMesh() functions?
You can look up the code behind it on GitHub.
Instead of instantly looking your mesh (camera) at the target (pickedMesh.position), the transition is smoothed to a max delta angle per frame.

If there's no mesh (e.g. enemy ship) under your cursor, no problemo.
You can still transform the pointed pixel back to a Ray cast from the camera by transforming 2D point using Camera view matrix to world 3D.
This is basic 3D math and BabylonJS provides some default functions to transform positions and rotations to different spaces (CAMERA, LOCAL, WORLD).
So the computation is translating the 2D cross hair position in camera space to 3D cross hair world space position.

Your space ship is like the FollowCamera logic of inertia.
It's following a point in front of the real camera used.
You can see that clearly when turning and stopping turning: the ship smoothly transitions back to the center bottom of the screen.

Finally the guns on your spaceship are then pointed to the 3D point that the screen cursor is pointing at.
If there's a mesh under the cursor, that gives you the distance.
If not, then you can default to a certain distance in Z-axis (e.g. near infinity).
You can use mesh.lookAt() to target the guns to the 3D cross hair location.
Again you can use interpolation (smoothing) to give the guns some time to aim at the new direction.

Hope these tips help.

If you solved it I would glad to hear about the solution. ?
I'm looking for a similar aiming for my BabylonJS Model Train Simulator game, but then the Spaceship/guns is replaced with a Locomotive/crane.
The above steps describe how I would start tackling this click-and-aim challenge.


Check out this post from @renjianfeng : for inspiration and help:


Edited by QuintusHegie
added reference to other babylonjs developer that is solving the same problem
Link to comment
Share on other sites

  • 2 weeks later...

I've worked up a "flying through space" camera that might be applicable:


I used the technique in my ZOOM game at jounce.space.

Here is a thread where Phuein is trying to create a camera rolls so "up" is always in the same direction:

and here:


Good luck!   ? ☘️

Link to comment
Share on other sites

I need help. I have a some object like this. It's mesh of spaceship. And when i try add rotation, babylonjs give some error:



Object structure. Object is 3d model imported from babylon file. (converted from blender3d)



What i do wrong? Thanks!


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