Jump to content

Need help with Babylon.js + Timeline.js


Recommended Posts

Hi all! :) I'm new here, and could use some help. I've just recently gotten into Babylon.js, and I LOVE it (Thank You, creators!), but I've recently run into a problem with my game. My game requires an NPC to fly from point to point, and rotate during a certain point in the sequence so it looks like he's flying around objects such as trees & stuff. Problem is, I can only get this to position the cube (bird), and not rotate during a certain point in the sequence. Can someone please help show me what I'm doing wrong? I need to be able to loop this object as many times as I want.


I have uploaded the needed files as a zip file.



<!DOCTYPE html><html>    <head>        <title>Bezier Curves</title>        <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <style type="text/css">            html, body, div, canvas            {                width: 100%;                height: 100%;                padding: 0;                margin: 0;                overflow: hidden;            }        </style>    </head>        <script type="text/javascript" src="./JS/EasePack.min.js"></script>        <script type="text/javascript" src="./JS/TweenLite.min.js"></script>        <script type="text/javascript" src="./JS/TimelineLite.min.js"></script>        <script type="text/javascript" src="./JS/BezierPlugin.min.js"></script>        <script type="text/javascript" src="./JS/babylon.js"></script>        <script src="./JS/scene.js"></script>    <body>        <div id="rootDiv">            <canvas id="canvas_renderer"></canvas>        </div>    </body></html>

Here is the zip file:




Thanks alot!


Have a GREAT afternoon! :)





Link to comment
Share on other sites

Yes. Basically, I need to be able to control while the object is moving along the bezier curve at a selected movement speed as well as a selected rotation speed. I also cannot get the object to rotate at certain points. For example: Point A is set to follow the path at a movement speed of 1.0, and a turning speed of 0.5. But point B all the way to Point J is set at a movement speed of 2.0 and a turning speed of 1.0.


Does that explain a bit better? :)

Link to comment
Share on other sites

I don't entirely follow what your problem is, especially since you are using an external library, but as far as I understand your problem, you want to make an object move from one waypoint to another, while always facing the next waypoint.

So why don't you create a Vector3 array in which you can store all your waypoints and create a function that will do the following:
create a counter variable at the start of your code and set it to 0


now in your update function or "scene.registerBeforeRender(function{})" function, make your "bird" or whatever move forward along its rotation axis (I think this was possible by multiplying the object's position Vector with its rotation matrix to get the Forward Vector) or just Lerp it from its position to the 'current' waypoint position and make it look at the first waypoint in your list. (you can simply use "bird.lookAt(waypointArray[current])" for this the Mesh.lookAt function will automatically orient your bird every step)
So up until now your bird will simply fly from point A to Point B while automatically looking at it. Next you need to do some RayCasting, create a Ray originating from yout Birds momentary position and Aiming to its forward position (that you calculated at the beginning already). if the Ray will hit anything (and it really should since we are looking at the next waypoint) you can measure the distance to it. And if the distance get's small enough simply move on to the next waypoint in your list by adding +1 to your counter variable. Now the bird will look at your next waypoint any if you move it to the waypoint instead of it's forward it will also automatically move there.

Of course check before adding +1 to your counter variable if the counter variable +1 will be > than the Array count ... and if it would set it back to 0


... now for objects that are no waypoints but still get picked up by the raycasting you can perform several actions, one possibility is to make the bird perform a sine  based curve around the object, another would be to add an intermediate waypoint on demand.

Create an angle variable and a boolean then in the same function in which you cast the ray, evaluate the hit result and check if it is one of your waypoints, if not, check if a certain range to the 'obstacle' has been reached, if so, set your boolean to true, now an if statement should encapsule your whole function and if the boolean value you just created is true only the else statement should be carried out in it you will perform the following steps: create a new local Vector3 the Vectors x position will be the distance the bird should remain from the object multiplyed by the Sinus of the angle variable (I am not sure what the exact init-value for the angle would be, but it would probably be -90*Math.PI/180) and the Vectors z position will be the distance times the Cosinus of the angle (!!! If you are planning on having your angle variable represent actual degrees, you have to multily it with "Math.PI/180" before calculating the Sinus or Cosinus) now after every step the bird will perform in that manner, you have to raise the angle value by a bit until it reaches its original vaule +180° then return to the original functionalty where the bird just faces the next waypoint by setting your boolean to false again.

another option would be to just create nother waypoint at the same position the hit is found, but then offsetting it by a little ...

wow ... that got WAY too long... I hope it still helps in any way...

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