cartman Posted May 11, 2016 Share Posted May 11, 2016 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? Quote Link to comment Share on other sites More sharing options...
Brandenburg Posted May 11, 2016 Share Posted May 11, 2016 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 Quote Link to comment Share on other sites More sharing options...
Brandenburg Posted May 11, 2016 Share Posted May 11, 2016 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 lesterhaus, Wingnut and Temechon 3 Quote Link to comment Share on other sites More sharing options...
cartman Posted May 12, 2016 Author Share Posted May 12, 2016 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? Quote Link to comment Share on other sites More sharing options...
cartman Posted May 12, 2016 Author Share Posted May 12, 2016 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? Quote Link to comment Share on other sites More sharing options...
adam Posted May 12, 2016 Share Posted May 12, 2016 This might be helpful: http://www.babylonjs-playground.com/#1HH4OJ#5 Quote Link to comment Share on other sites More sharing options...
adam Posted May 12, 2016 Share Posted May 12, 2016 http://www.babylonjs-playground.com/#1HH4OJ#14 gryff 1 Quote Link to comment Share on other sites More sharing options...
gryff Posted May 12, 2016 Share Posted May 12, 2016 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 Quote Link to comment Share on other sites More sharing options...
adam Posted May 12, 2016 Share Posted May 12, 2016 6 minutes ago, gryff said: Always liked that example @adam Me too. Thanks @jerome Quote Link to comment Share on other sites More sharing options...
jerome Posted May 12, 2016 Share Posted May 12, 2016 thanks ... you're welcome.... huuu, but about what ? Quote Link to comment Share on other sites More sharing options...
adam Posted May 12, 2016 Share Posted May 12, 2016 I thought you created this: http://www.babylonjs-playground.com/#1HH4OJ#5 If not, thanks for hosting the images. Quote Link to comment Share on other sites More sharing options...
jerome Posted May 12, 2016 Share Posted May 12, 2016 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 Quote Link to comment Share on other sites More sharing options...
Brandenburg Posted May 12, 2016 Share Posted May 12, 2016 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 Quote Link to comment Share on other sites More sharing options...
cartman Posted May 13, 2016 Author Share Posted May 13, 2016 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? Quote Link to comment Share on other sites More sharing options...
cartman Posted May 13, 2016 Author Share Posted May 13, 2016 @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. Quote Link to comment Share on other sites More sharing options...
Brandenburg Posted May 13, 2016 Share Posted May 13, 2016 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 Quote Link to comment Share on other sites More sharing options...
jerome Posted May 13, 2016 Share Posted May 13, 2016 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) RaananW and cartman 2 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.