# Virtual museum walk through

**URL:** <https://discourse.threejs.org/t/virtual-museum-walk-through/36066>\
**Category:** Questions\
**Tags:** virtual, threejs\
**Created:** [March 17, 2022, 1:17pm UTC](https://discourse.threejs.org/t/virtual-museum-walk-through/36066 "2022-03-17T13:17:24Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Senji](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/senji/32/22981_2.png) [@Senji](https://discourse.threejs.org/u/Senji)\
**Post date:** [March 17, 2022, 1:17pm UTC](https://discourse.threejs.org/t/virtual-museum-walk-through/36066/1 "2022-03-17T13:17:24Z")

</div>

I am looking to develop a 3D walkthrough application, something like this:

- [Plus X Virtual Showroom](https://s.muz.li/YzcwZDQzOGUx) (ENTER → EASY) with mouse wheel movement
- [https://www.magische-spiegelungen.de/](https://www.magische-spiegelungen.de/) same thing here, walk only using mouse wheel.

Any advices please or recommendations? I didn’t find any git repo to learn from.

Thank you!

---

<div class="post-metadata">

**Author:** ![smartweb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/smartweb/32/25186_2.png) [@smartweb](https://discourse.threejs.org/u/smartweb)\
**Post date:** [March 25, 2022, 9:57am UTC](https://discourse.threejs.org/t/virtual-museum-walk-through/36066/2 "2022-03-25T09:57:56Z")

</div>

This kind of animation can be done with GSAP and ThreeJS easily

---

<div class="post-metadata">

**Author:** ![Senji](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/senji/32/22981_2.png) [@Senji](https://discourse.threejs.org/u/Senji)\
**Post date:** [March 25, 2022, 10:04am UTC](https://discourse.threejs.org/t/virtual-museum-walk-through/36066/3 "2022-03-25T10:04:41Z")

</div>

The word “easily” is subjective 😅 , but still learning, and one day maybe i’ll be able to do that !

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [March 25, 2022, 8:42pm UTC](https://discourse.threejs.org/t/virtual-museum-walk-through/36066/4 "2022-03-25T20:42:28Z")

</div>

I expect it could be done with three.js alone:

1. Create museum model (using Blender or other 3D modeling program)
2. Display model using three.js
3. Create path for camera to follow as you scroll mouse.
4. Create pop-up narratives for the specific displays.

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.

---

<div class="post-metadata">

**Author:** ![Benny](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/benny/32/25234_2.png) [@Benny](https://discourse.threejs.org/u/Benny)\
**Post date:** [March 26, 2022, 9:44am UTC](https://discourse.threejs.org/t/virtual-museum-walk-through/36066/5 "2022-03-26T09:44:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [March 26, 2022, 11:06am UTC](https://discourse.threejs.org/t/virtual-museum-walk-through/36066/6 "2022-03-26T11:06:26Z")

</div>

Moving the camera smoothly in three.js is not a problem. See this [example](https://threejs.org/examples/?q=controls#misc_controls_pointerlock). 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](http://philcrowther.com/WebGL/Space/Earth/Earth.html) 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.

---

<div class="post-metadata">

**Author:** ![XAR](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/xar/32/21054_2.png) [@XAR](https://discourse.threejs.org/u/XAR)\
**Post date:** [March 26, 2022, 12:52pm UTC](https://discourse.threejs.org/t/virtual-museum-walk-through/36066/7 "2022-03-26T12:52:00Z")

</div>

Agreed, create a spline curve for the camera path/ just select a couple of points and animate with gasp,

---

<div class="post-metadata">

**Author:** ![Kailash\_V](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kailash_v/32/27670_2.png) [@Kailash\_V](https://discourse.threejs.org/u/Kailash_V)\
**Post date:** [September 18, 2022, 11:38am UTC](https://discourse.threejs.org/t/virtual-museum-walk-through/36066/8 "2022-09-18T11:38:21Z")

</div>

Hi Senji,

Were you able to do it ? I am having difficulty achieving the ouput.

---

<div class="post-metadata">

**Author:** ![awonnink](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/awonnink/32/22486_2.png) [@awonnink](https://discourse.threejs.org/u/awonnink)\
**Post date:** [September 18, 2022, 1:10pm UTC](https://discourse.threejs.org/t/virtual-museum-walk-through/36066/9 "2022-09-18T13:10:27Z")

</div>

An alternative is maybe the UI as I have implemented here:

[Virtual museum](http://threeml.org/ex/museum/)

It is mouse-only (Navigation by dragging (Orbitcontrols) and clicking the floor)