How to set the initial horizontal and vertical rotation of a camera that OrbitControls then uses (Azimuthal & Polar Angles)

Question

I'd like to set the initial horizontal and vertical rotation of a PerspectiveCamera that the OrbitControl then uses. I tried calling .rotateX(X) .rotateY(Y) in PerspectiveCamera but it doesn't seem to work.

In threejs docs at OrbitControl's example, they say

//controls.update() must be called after any manual changes to the camera's transform
camera.position.set( 0, 20, 100 );
controls.update();

https://threejs.org/docs/#examples/en/controls/OrbitControls

I'd like to do the same but with the horizontal and vertical rotation.

Here is the relevant code:

camera.js

import { PerspectiveCamera } from 'three'
import { tweakParams } from 'src/World/utils/twekParams'

function createCamera () {
  const camera = new PerspectiveCamera(
    35,
    1,
    0.1,
    100
  )

  camera.userData.setInitialTransform = () => {
    // Grab the initial position and rotation values from a Singleton (tweakParams)
    const cameraPosition = tweakParams.camera.transform.position
    const cameraRotation = tweakParams.camera.transform.rotation
    camera.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z)
    camera.rotateX(cameraRotation.x)
    camera.rotateY(cameraRotation.y)
  }

  return camera
}

export { createCamera }

controls.js

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

function createControls (camera, canvas, { enablePan = true, autoRotate = false } = {}) {
  const controls = new OrbitControls(camera, canvas)
  controls.enableDamping = true
  controls.enablePan = enablePan
  controls.autoRotate = false
  controls.autoRotateSpeed = 0.25
  controls.maxDistance = 30

  camera.userData.setInitialTransform()
  controls.update()

  // This function gets called in the animation Loop.
  controls.tick = () => controls.update()

  return controls
}

export { createControls }

And here is the singleton that holds the initial transform values of camera

export const tweakParams = {
  camera: {
    transform: {
      position: {
        x: 6.83487313982359,
        y: 9.164636749995928,
        z: 13.384934657461855
      },
      rotation: {
        x: Math.PI * 0.5,
        y: Math.PI * 0.5
      }
    }
  }
}

This singleton has dummy values for now, but in the future It should be populated with the last transform attributes the camera had before leaving the current page.

Anyway, the initial camera position works fine but not the rotation. Any idea how to solve this?

Answer 1

Rotating the PerspectiveCamera does not work with OrbitControls. This is because the OrbitControls overwrites the camera's rotation.

To solve this, I used OrbitControls.target which makes the perspective camera orbit around this target coordinates.