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.

2

Are you looking for something like:

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.

8

Hi Mugen, cnt find those code. can you help me to find those. Am also looking for the same function . tap on the floor and move the camera. I cn’t find the code under examples git .

9

The code is only available as a PR. Since it was never merged, you don’t find it as a part of the official examples. Please use: New controls IndoorControls by wobushijiujiu · Pull Request #18908 · mrdoob/three.js · GitHub

2 Likes
10

@Mugen87 okay thanks mate

11

Mugen , it’s hard to find those missing files . can you please upload as a individual project ?

12

If we just get those camera along with a demo a scene will be so useful for the community.

13

Why don’t you just copy the code from IndoorControls into a separate file in your project?

No sorry. I’m not the author of the code and I can’t tell you whether it is properly developed or not. Creating a repository with IndoorControls would mean I take responsibility of this module.

14

I tried mate ,they got some missing reference too. will check again thanks

15

Noted Mugen