如何设置 OrbitControls 随后使用的相机的初始水平和垂直旋转（方位角和极角）

Question

我想设置 PerspectiveCamera 的初始水平和垂直旋转，然后 OrbitControl 使用。我尝试在 PerspectiveCamera 中调用 .rotateX(X) .rotateY(Y)，但它似乎不起作用。

在 OrbitControl 示例的 threejs 文档中，他们说

//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

我想做同样的事情，但要水平和垂直旋转。

相关代码如下：

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 }

这里是保存相机初始变换值的单例

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
      }
    }
  }
}

这个单例现在有虚拟值，但将来它应该填充相机在离开当前页面之前拥有的最后一个转换属性。

无论如何，初始相机位置可以正常工作但不能旋转。知道如何解决这个问题吗？

Answer 1

旋转 PerspectiveCamera 不适用于 OrbitControls。这是因为 OrbitControls 覆盖了相机的旋转 。

为了解决这个问题，我使用了 OrbitControls.target 使透视相机围绕这个目标坐标运行。

如何设置 OrbitControls 随后使用的相机的初始水平和垂直旋转（方位角和极角）

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

javascript

three.js