# 360-Panorama camera initial rotation

**URL:** <https://discourse.threejs.org/t/360-panorama-camera-initial-rotation/60450>\
**Category:** Questions\
**Tags:** camera-contro, orbitcontrols, camera\
**Created:** [January 18, 2024, 8:05am UTC](https://discourse.threejs.org/t/360-panorama-camera-initial-rotation/60450 "2024-01-18T08:05:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ghostbob](https://avatars.discourse-cdn.com/v4/letter/g/e19b73/32.png) [@Ghostbob](https://discourse.threejs.org/u/Ghostbob)\
**Post date:** [January 18, 2024, 8:05am UTC](https://discourse.threejs.org/t/360-panorama-camera-initial-rotation/60450/1 "2024-01-18T08:05:38Z")

</div>

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](https://jsfiddle.net/12q583u9/5/)

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

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 18, 2024, 7:53pm UTC](https://discourse.threejs.org/t/360-panorama-camera-initial-rotation/60450/2 "2024-01-18T19:53:18Z")

</div>

You can only modify controls rotation by modifying [OrbitControls.target](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/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:

```js
controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0.0, 0.0, 1.0);
controls.update();

```

---

<div class="post-metadata">

**Author:** ![Ghostbob](https://avatars.discourse-cdn.com/v4/letter/g/e19b73/32.png) [@Ghostbob](https://discourse.threejs.org/u/Ghostbob)\
**Post date:** [January 18, 2024, 8:53pm UTC](https://discourse.threejs.org/t/360-panorama-camera-initial-rotation/60450/3 "2024-01-18T20:53:09Z")

</div>

> [@mjurczyk](#):
>
> ```javascript
> controls.target.set(0.0, 0.0, 1.0);
> controls.update();
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 18, 2024, 9:09pm UTC](https://discourse.threejs.org/t/360-panorama-camera-initial-rotation/60450/4 "2024-01-18T21:09:08Z")

</div>

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.

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

```

Nevertheless, consider using [scene.environment](https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene.environment) / [CubeMaps](https://threejs.org/examples/#webgl_materials_cubemap) 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.

---

<div class="post-metadata">

**Author:** ![Rene\_Veerman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rene_veerman/32/16356_2.png) [@Rene\_Veerman](https://discourse.threejs.org/u/Rene_Veerman)\
**Post date:** [January 19, 2024, 8:40pm UTC](https://discourse.threejs.org/t/360-panorama-camera-initial-rotation/60450/5 "2024-01-19T20:40:31Z")

</div>

i was facing a similar/identical problem in my own 3D file manager app.  
live demo is at [3D file manager on nicer.app](https://nicer.app/3D-data) (version 5) and [NicerApp WebOS Unified Interface](https://new.nicer.app/mediaPlayer) (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…

> <https://github.com/NicerEnterprises/NicerApp-WebOS-v6.y.z/blob/6727ccd84ef81e74c7a9bdddad6e07c6dd10edd8/NicerAppWebOS/logic.vividUserInterface/v6.y.z/3D/na3D.js#L1910>

with git repo stored at

> **[GitHub - NicerEnterprises/NicerApp-WebOS-v6.y.z](https://github.com/NicerEnterprises/NicerApp-WebOS-v6.y.z)**
>
> Contribute to NicerEnterprises/NicerApp-WebOS-v6.y.z development by creating an account on GitHub.

i’m available for follow-up questions.