Is there a way to set the initial horizontal and vertical rotation of a PerspectiveCamera
that the OrbitControl
can then use? I attempted to use .rotateX(X) .rotateY(Y)
in PerspectiveCamera
, but it doesn't seem to have an effect.
In the three.js documentation for the OrbitControl's example, they mention:
//controls.update() must be called after any manual changes to the camera's transform
camera.position.set(0, 20, 100);
controls.update();
I want to achieve the same result but with the horizontal and vertical rotation.
Below 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 = () => {
// Get 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 is called in the animation Loop.
controls.tick = () => controls.update()
return controls
}
export { createControls }
And here is the singleton that stores the initial transform values of the 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
}
}
}
}
Currently, this singleton contains placeholder values, but in the future, it should store the last transform attributes the camera had before leaving the current page.
The initial camera position works, but the rotation does not. Any suggestions on how to address this issue?