如何设置 OrbitalControls 初始位置？答案

【问题标题】：How to set OrbitalControls initial position?如何设置 OrbitalControls 初始位置？
【发布时间】：2021-09-20 19:05:12
【问题描述】：

我一直在搞乱 react-three-fiber 并且非常喜欢 OrbitControls 元素，它可以让您通过拖动鼠标来控制相机。我怀疑是否有办法控制元素的初始位置/视角。

我正在创建一个演示，我正在使用飞机来模拟地面。从上面看它看起来很好，但在默认位置它变得不可见，就像水平看一张纸。

我试图弄乱一些属性，如 position 和 minPolarAngle，但没有发现任何区别。有没有人可以帮忙解决这个问题？

      <Canvas>
        <OrbitControls position={[10, -40, 0]} /> // 'position' doesn't seem to work
        <ambientLight intensity={0.4} />

        <Suspense fallback={"...Loading"}>
          <Stars />
          <Box/>
          <Ground />
        </Suspense>

      </Canvas>

【问题讨论】：

我不熟悉React-three-fiber，但由于OrbitControls只是控制你场景的相机，你不能为相机定义一个起始位置吗？
我放弃了寻找正确的道具，只选择了useThree(state=>state.camera)和useEffect(()=>{camera.position.set(10,-40,0)},[camera])的组合。这设置了初始位置。然后target 属性设置lookAt 向量。

标签： reactjs three.js react-three-fiber

【解决方案1】：

OrbitControls 将使用现有相机并尊重其初始位置*，因此您无需做任何专门的事情；只需在 Canvas 上指定 camera 属性即可。

*但不是它最初的旋转。 OrbitControls 将立即覆盖对camera.lookAt 的任何调用。在这种情况下，请指定 target（默认为 [0,0,0]）。

<Canvas camera={{ fov: 45, position: [10, -40, 0] }}>
  <OrbitControls target={[10, 0, 0]} />
</Canvas>

【讨论】：