OrbitControls camera rotation instead of world

Questions
, ,
1

Hi,

I was wondering how can I best achieve this effect:
https://threejs.org/examples/?q=webgl_panorama_cube#webgl_panorama_cube

by using the OrbitControls, but only when I rotate. I want to be able to continue moving in my world with other properties from the OrbitControls.

If I apply the camera.position.z = 0.01; I get stuck in one position and cannot longer further in the other rooms.

I have been told maybe best I write my own controls, but still wondering if there’s a way to achieve it without it that hasn’t crossed my mind with the current controls.

FYI - I don’t want to use the PointerLockControls because I want the freedom of the mouse from OrbitControls.

I discovered that if I zoom-in the beginning with the OrbitControls and then rotate, I get this camera rotation as I wanted similar to first person, and it stays in that view further on. I wonder if there would be a way for me to set this camera rotation without zooming in?

2

The example assumes that OrbitControls.target is always at the origin and the camera’s position slightly next to it.

You could try to change OrbitControls.target in your app so it has always a relative position to the camera’s current position.

1 Like
3

@Mugen87 Thank you so much for the quick reply!

I was thinking and trying to do that, but I feel like my JS knowledge goes to 0, whenever I try something with the controls.

I feel that I should do that once the mouse move rotation event happens, but this is the part where I am lost, at how best I can tackle the if case to update my target when the rotation is happening.

Also, is there a way to invoke the dolly in function triggered with the mouseButton MIDDLE?

4

Hey everybody, I found a solution to my dilemma.

I had to hack the OrbitControls.js by creating my own public method for this.dollyIn = function () because I discovered that if I zoom enough I get this First Person View rotation with the OrbitControls.

And around line 363 I increased the zoomScale scope.zoomSpeed*29 so that when I invoke this on my app with this.controls.dollyIn(); I get to that specific point in the world by zooming in which triggers the First Person View with OrbitControls, but still can pan with the arrows and stay in that view as the user moves along the world.

This resource helped → Three.js OrbitControls.js - invoking zoom in/out with button - controls.dollyOut() is not a function - Stack Overflow

1 Like