How to use wheel/scroll to control camera movement along a path

Questions
,
1

Hello all,
I found a demo on Babylon.js website and it is exactly what I would like to achieve: using middle mouse scroll to move a camera along a designated path.

I have two questions:

  1. what are the feasible approaches to create a path in Babylon.js? I use Blender as my primary 3D software and I am wondering if I can export a camera path directly from Blender and use it in Babylon.js?

2)how to use scrolling to let camera go along the path? Are there any playground examples you guys could share?

I am new to Babylon.js and your answers are highly appreciated! Thanks!

2

Hi @alexli16 and welcome to the Babylon.js community! :smiley:

For your second question here is a playground example of the mouse position moving around with the scroll wheel: https://www.babylonjs-playground.com/#6FHKHC#41

My assumption is instead of updating the position based on the camera direction you can instead increase the percentage along the path that you create.

2 Likes
3

Hi @msDestiny14, thank you so much for sharing the playground. It helps a lot and now I can use the scroll to move the camera. :clap:

4

Interesting approach.
If I would set an animated path for the camera in a 3D modelling software like blender, could the scroll be captured and used to scroll forward or backward over this animation?

Thanks!

5

I believe it could :slight_smile:

While I’m less familiar with exporting the animations from blender I’m sure you would be able to set the frame on based value. This value could then be increased or decreased based on the scroll wheel.

For help with the blender part, I’m going to reference this thread that may give some context to what you want to do. Need hints or pointers for exporting "Follow Path" animations

Please let me know if you have additional questions. :+1:

1 Like
6

Hi @Pieter_van_Stee just checking in, do you have any more questions about the path stuff? :slight_smile:

7

Hi @carolhmj yes I got the basic principle working and in the mean time I’m able to export an animated path (which is just an array of camera positions & rotations) from blender. And import that animated scene into babylon where I can capture the scroll to transition the animation position backward and forward using the scroll.
I think it can definitely be improved to make it more smoothly but overall it works.

I’ll have a look if I can find the code I used last to post it here for anyone else to use. Don’t have a PG though as I’m developing in vscode.

Thank you for following up.

EDIT: have a look at this topic: Animation current frame - #11 by Pieter_van_Stee

1 Like