360-Panorama camera initial rotation

Questions
, ,
1

Goal: to show a 360-degree panorama with initial camera rotation at a specific horizontal angle.

Problem: OrbitControls reset the camera angle.

Example: I took the code from threejs docs on how to show 360-panorama and tried to rotate the camera: Edit fiddle - JSFiddle - Code Playground

I would like the panorama to start with the position where the camera looks at the statue, not out of the window.

If I comment out OrbitControls, the camera angle is what I need, but as soon as I uncomment OrbitControls, the camera is back looking out of the window.

I dug through tons of similar topics about the problem of OrbitControls but haven’t found any suitable solution.

Any help would be highly appreciated.

@Mugen87

2

You can only modify controls rotation by modifying OrbitControls.target - which by default looks in the direction of (0.0, 0.0, -1.0) (in your case, out that window.) To initially look in the opposite direction, all you have to do is add these two lines:

controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0.0, 0.0, 1.0);
controls.update();
1 Like
3

try to add these line into fiddle and then use your mouse to rotate panorama as usual :slight_smile:
you will fly out of cube.

4

OrbitControls orbit the target. Changing the target will make the camera orbit another point - so if you skybox is a local cube, you have to reposition it, so that the centre of the cube is again in the same place at the controls target.

skyBox.position.set(0.0, 0.0, 1.0);
camera.position.set(0.0, 0.0, 0.99);

Nevertheless, consider using scene.environment / CubeMaps instead of actual geometries - then you won’t need to worry about positioning and depth, since these are always infinitely far away from the camera.

1 Like
5

i was facing a similar/identical problem in my own 3D file manager app.
live demo is at 3D file manager on nicer.app (version 5) and NicerApp WebOS Unified Interface (version 6)

my sources are MIT-licensed, therefore free to use (even commercially).

basically i calculate how much space a scene’s meshes take up, define a gsap path around it, and then run an gsap animation with those gsap points. the center of the world is also calculated by code and stored in a global variable…

with git repo stored at

i’m available for follow-up questions.

1 Like