Which controls to use for virtual showroom navigation with walkpoints?

Questions
1

Hey all,

i want to create a virtual showroom like i did a few years ago in Babylon:

Babylon Showroom Demo

Unfortunately, I’m stuck with the camera controls.
As I understand the different controllers there is only OrbitControls which provide smooth paning with dampening etc. as you would expect from such an experience.
Yes, I used the search … a lot!
But I’m not sure I searched for the right terms:
“Panorama controls” - no camera movement but paning with OrbitControls, target set right in front of the camera
“Indoor Controls” - some good examples but most of them use a custom camera control algorithm.
I also searched for camera movement, showroom way points, move camera to clicked object etc.

I found other developers with the same questions but unfortunately no answer.
This has to be so simple since in other 3D engines I worked with (Unity, Babylon, Away3D) there is always a simple out of the box solution … i hope I’m just to stupid to find it :slight_smile:

I made a Codepen with a simple example of my approach:

  • Click on the white boxes on the floor (dummy way points)
  • The camera should of course not orbit around some coordinate but instead turn around itself

That’s all :slight_smile:

I also tried to add the camera into a “Player”-Object3D and move this one around but then OrbitControls behaves very strangely!
Is something like this possible with OrbitControls or should I use a different controller?

Please help me out - I will buy you a Red Bull!
:slight_smile:
All the Best
Mat

2

Not exactly - out of the box orbit controls, as the name suggests, orbit the camera around a point. In your case camera rotates around its own origin.

But then again - there’s quite an easy way to work around that. If you always place the orbit point right in front of the camera, you will get a similar effect as if you’d rotate the camera itself. Try the following:

const controls = new THREE.OrbitControls(camera, renderer.domElement);

const updateCameraOrbit = () => {
  // Update OrbitControls target to a point just in front of the camera

  const forward = new THREE.Vector3();
  camera.getWorldDirection(forward);

  controls.target.copy(camera.position).add(forward);
};

controls.addEventListener('end', () => {
  updateCameraOrbit();
);

updateCameraOrbit();

Like here. And to smoothly move the camera around, Vector3.lerp should be enough.

(Optionally, you can also try using a slightly modified PointerLockControls.)

1 Like
3

Hey mjurczyk,

you made my day … big times!
I know that OrbitControls is not supposed to do what I want but with your workaround, it is perfect :+1:

I updated the CodePen in case someone else is interested.
I implemented it in TWEEN.update() as well in case you try to control while transitioning.
I also added “smoothing” with the OrbitControls internal dampening:
controls.enableDamping = true;
controls.dampingFactor = 0.5;
Now the user experience is absolutely as expected - thanks a lot!

Please level me your Paypal I will send you the equivalent of a Red Bull as promised :wink:
All the best
Mat