• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

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?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error