Navigating Within Tight Space

Questions
,
#1

I have created a Three.js scene of an interior space which I want to allow users to explore. The building has a narrow, circular corridor around a central room and I want users to be able to walk around this corridor. Using the default mouse navigation controls has proven to be very awkward for two reasons:

  1. The perspective camera orbits around a target point which is too easily outside the corridor walls. This causes the user to left-click and drag, hoping to look around, and they very quickly orbit outside of the corridor which I want to avoid.
  2. Dollying to navigate around the circular corridor can be difficult, particularly when faced with the issue above.

Is there a way of rigging the camera so that when the user left-clicks and drags, to orbit, the view always orbits around the camera as opposed to the target?

Can anyone suggest an approach which would allow more of a Google Streetview methodology for navigating or perhaps hotspots on the floor which the user could point to and click on which would animate the camera to the related coordinates?

Many thanks.

How to move fps to click on floor with three js
#2

Are you looking for something like:

Selecting controls
How to achieve zoom effect like this
#3

That’s exactly what I had in mind. I will review the code. Thank you. Is this available to use now, or still in development with a view to being merged into Three.js?

#4

I personally think it would be better if the OP just shares its work here in the forum since the controls are very application specific. Such code is normally not added to the repository.

1 Like
#5

Forgive my ignorance here, how should I implement this great example. Has wobushijiujiu developed a three.js scene which has this functionality in the JavaScript or have they extended the base application to create a customised version of Three.js?

#6

how should I implement this great example

If you open the link @Mugen87 shared and click on the “Files changed” tab, you can see the code.

Has wobushijiujiu developed a three.js scene which has this functionality in the JavaScript or have they extended the base application to create a customised version of Three.js?

wobushijiujiu has created a camera control plugin. Check out OrbitControls for another example of a controls plugin.

#7

That’s very helpful, thank you.