I am looking to develop a 3D walkthrough application, something like this:
Any advices please or recommendations? I didn’t find any git repo to learn from.
Thank you!
This kind of animation can be done with GSAP and ThreeJS easily
The word “easily” is subjective 
, but still learning, and one day maybe i’ll be able to do that !
I expect it could be done with three.js alone:
So, the three.js mechanics should be fairly straightforward.
You will spend most of your time in Blender (or other 3D modeling program) creating the perfect model.
In three.js, you will spend time tweaking things like camera path and lighting.
Keep us posted on your progress as this looks like an interesting prototype for a museum-like exhibition that could be very useful.
I’m also interested in developing experiences of this kind so thank you for providing the step by step workflow! But I would think that GSAP would indeed help implementing the smooth camera movement on the path.
Moving the camera smoothly in three.js is not a problem. See this example. That is real-time camera movement. Implementing the movement in the example would be even easier since the camera is basically locked to a track and the only thing that moves is your head. See my solar system demo for an example where the camera is locked to a track (move the vertical slider on the right to follow an elliptical “track”.).
Now, if you wanted to run around the building and climb stairs and not run through walls, that would require some extra work to implement collision detection so that you wouldn’t fall through surfaces. But three.js should be able to handle that as well.
Agreed, create a spline curve for the camera path/ just select a couple of points and animate with gasp,
Hi Senji,
Were you able to do it ? I am having difficulty achieving the ouput.
An alternative is maybe the UI as I have implemented here:
It is mouse-only (Navigation by dragging (Orbitcontrols) and clicking the floor)