How to move object through a cube?

[cartman]

Hi guys, I'm trying to make a sphere move from one end of a tube to the other. I can't seem to figure out how to move the sphere according to the curve.

I made a playground link: http://www.babylonjs-playground.com/#V4RRM#1

Any ideas?

[Brandenburg]

Hello Cartman,

I found a way to do this using animations:

http://www.babylonjs-playground.com/#14EGUT#2

Basically I am using the curve array that you made and making an animation key with each of those points (see lines 47-63).

Let me know if this works or if you need any more help.

Brandenburg

[Brandenburg]

I just saw your comment at the bottom that said you wanted a follow camera as well so here is the updated playground.

http://www.babylonjs-playground.com/#14EGUT#4

[cartman]

Thanks @Brandenburg! I'm trying to expand on this with two ideas:

1) Third-person perspective (following the sphere from behind). I did this demo with a FreeCamera: http://www.babylonjs-playground.com/#14EGUT#6 ... it's not perfect.

How do I make sure the view follows the sphere? I'd like the camera to always point forward (imagine a game where the user follows closely behind the sphere, and sees what the sphere sees) 

 

2) First person perspective. I basically used the FreeCamera, and matched the position of camera with sphere. Demo: http://www.babylonjs-playground.com/#14EGUT#7. How do I make sure the camera view is always looking forward? (imagine a game where the user IS the sphere).

 

Any ideas?

[cartman]

I'm also thinking, perhaps it's easier to visualize the sphere as a box instead

http://www.babylonjs-playground.com/#14EGUT#8

This way, the problem is finding how to make the box rotate so that it's front face (head) is always moving towards the exit of the tube. Once that rotation curve is figured out, we can attach a FreeCamera to it to mimic the rotation.

Any ideas?

[adam]

This might be helpful:

http://www.babylonjs-playground.com/#1HH4OJ#5

[adam]

http://www.babylonjs-playground.com/#1HH4OJ#14

[gryff]

cartman, if you use a 3D modeling software you can create animations on curves quite easily

Example here

A cube was animated on a path to move between the various objects in Blender, then the light and camera were attached to the cube with BJS

Always liked that example @adam

cheers, gryff

[adam]

6 minutes ago, gryff said:

Always liked that example @adam

Me too.  Thanks @jerome

[jerome]

thanks ... you're welcome.... huuu, but about what ?

[adam]

I thought you created this:

http://www.babylonjs-playground.com/#1HH4OJ#5

If not, thanks for hosting the images.

[jerome]

yep I did 

actually, it's one of my demo examples here : http://jerome.bousquie.fr/BJS/demos/ that I'd like to write a tutorial about for ... months

ooops, I just realized that I didn't see the related post, sorry

[Brandenburg]

Hi @cartman,

I got rid of the animate function to condense the code, I am now using the registerBeforeRender function to move and rotate the mesh. Let me know how this next playground looks.

Without follow camera: http://www.babylonjs-playground.com/#14EGUT#13

With follow camera: http://www.babylonjs-playground.com/#14EGUT#14

Thanks, Brandenburg

[cartman]

Thanks @Brandenburg, elegant solution with the lookAt method. Very useful!

One thing I noticed, is that you're iterating through the indexes in the curve.

How would I slow down/speed up the movement of the cube (sphere), in this case? Is is possible via BABYLON.Animation?

 

 

[cartman]

@Brandenburg i tried your other solution (without registerBeforeRender): http://www.babylonjs-playground.com/#14EGUT#16

Looks good overall. Minor bug: I noticed there's a few times the cube kinda "jittered" along its path.... Happens with each run.

[Brandenburg]

Yes, for some reason the cube kept jittering with animations so here it is with a new playground:

http://www.babylonjs-playground.com/#14EGUT#19

I am using a extra mesh (invisible) to get the rotation. If I could find the code for the lookAt method I could probably come up with my own method so that we would not need the extra mesh.

Let me know how it works, Brandenburg

[jerome]

I'll tell you a secret ...

When the tube is constructed, a reference to its underlying Path3D is stored : https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.meshBuilder.ts#L777 in order to not reallocate the memory in case the tube would be morphed (it is intended to be morphed)

The path3D is a triplet (tangent, normal, binormal) associated to each point of the tube path. This triplet is a left-handed normalized system :-)

So no need to recompute it ... it's already stored in the tube instance. You can just use RotationFromAxisToRef(tangent, normal, binormal, ref)