Eisha

Reversing an object in babylon js

Recommended Posts

I am trying to reverse the direction of a sphere as soon as it touches the ground. I have tried every possibilities to try reverse the direction and I want it to bounce up and down starting from the ground to go upward and then coming back down. I am not understanding how to do it. Below is the code for that part. Please help me.
Thank You 

    var originalVelocity = -.005;
            scene.registerAfterRender(function () { 
                sphere3.position.y = sphere3.position.y + originalVelocity;
                if (sphere3.intersectsMesh(ground, true)) { 
                    sphere3.material.diffuseColor = new BABYLON.Color3(1, 0, 0);
                
                    sphere3.position.y = sphere3.position.y - 4*originalVelocity;  //this line is not working
                } 
            });

Share this post


Link to post
Share on other sites

How about something like this?

var velocity = 0.005;
var dir = -1.0;
scene.registerBeforeRender(function () { 
    sphere.position.y += velocity * dir
    
    if (sphere.intersectsMesh(ground, false)) {
         console.log('intersected');
         dir = 1.0;
    }

    if (sphere.position.y > 3) {
        dir = -1.0;
    }
});

Explanation:

Sphere is moving in the direction of velocity * -1 (negative y direction is downwards).

When the sphere touches the ground, the direction is flipped to the positive direction.

When the sphere reaches a height of y = 3, it returns to the negative direction.

Going Further:

More like gravity: Increase the velocity a little each step when traveling in the negative y direction (like accelerating downwards via gravity). Decrease the velocity while traveling in the positive y direction (like a ball reaching the top of an arc and then falling). No need to flip the direction manually at the top anymore, this fake gravity will have done it already.

More like a rubber ball: if the ball's scale is compressed in the y direction when it hits the ground, it'll look like a bouncy ball. There are other little details depending how bouncy/squishy one would like things to look.

Demo:

https://www.babylonjs-playground.com/#7D23I2

Share this post


Link to post
Share on other sites
9 hours ago, timetocode said:

How about something like this?


var velocity = 0.005;
var dir = -1.0;
scene.registerBeforeRender(function () { 
    sphere.position.y += velocity * dir
    
    if (sphere.intersectsMesh(ground, false)) {
         console.log('intersected');
         dir = 1.0;
    }

    if (sphere.position.y > 3) {
        dir = -1.0;
    }
});

Explanation:

Sphere is moving in the direction of velocity * -1 (negative y direction is downwards).

When the sphere touches the ground, the direction is flipped to the positive direction.

When the sphere reaches a height of y = 3, it returns to the negative direction.

Going Further:

More like gravity: Increase the velocity a little each step when traveling in the negative y direction (like accelerating downwards via gravity). Decrease the velocity while traveling in the positive y direction (like a ball reaching the top of an arc and then falling). No need to flip the direction manually at the top anymore, this fake gravity will have done it already.

More like a rubber ball: if the ball's scale is compressed in the y direction when it hits the ground, it'll look like a bouncy ball. There are other little details depending how bouncy/squishy one would like things to look.

Demo:

https://www.babylonjs-playground.com/#7D23I2

Hello @timetocode
Thank you so much for your help its a great explanation 🙂 
Very well explained
Thank You

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.