如何使用 react-three-fiber 和 @react-three/drei 移动相机？答案

【问题标题】：How to move the camera using react-three-fiber and @react-three/drei?如何使用 react-three-fiber 和 @react-three/drei 移动相机？
【发布时间】：2021-12-23 03:33:48
【问题描述】：

我正在绘制具有以下配置的 3d 模型。

以下是绘制模型的 CodeSandBox。
CodeSandBox-A

绘制的模型靠近画布顶部，我想居中。

您能告诉我如何在画布上居中放置模型吗？
这是我第一次接触 Three.js，所以我确定我可能犯了一些基本错误。

代码如下。
Canvas组件的props参考了以下文档。
React Three Fiber Documentation

import { useMemo, Suspense } from "react";
import "./style.css";
import { Canvas } from "@react-three/fiber";
const { useGLTF, OrbitControls, Stage } = require("@react-three/drei");

const CanvasContainer = () => {
  const { scene } = useGLTF("/scene.glb");
  return (
    <Canvas camera={{ fov: 70, position: [0, 1000, 1000] }}>
    // No matter what I put in this "position" value, I could not see any change in the canvas.
      <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
      <Stage>
        <group dispose={null}>
          <primitive scale={[1, 1, 1]} object={scene} />
        </group>
      </Stage>
    </Canvas>
  );
};

const App = () => {
  const isWindow = typeof window === "undefined";
  const memoCanvas = useMemo(() => <CanvasContainer />, []);

  return (
    <>
      <h1>Canvas</h1>
      <div className="canvas_container">
        {!isWindow && <Suspense fallback={<div />}>{memoCanvas}</Suspense>}
      </div>
    </>
  );
};

export default App;

setDefaultCamera removed in v6.x. · Issue #1147 · pmndrs/react-three-fiber
我还尝试了使用useThree 的代码，如上述问题中所述。
以下是它的CodeSandBox。
CodeSandBox-B
从 CodeSandBox 可以看出，我无法移动相机。

【问题讨论】：

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

【解决方案1】：

给轨道控制“makeDefault”道具，那么它应该在中心。否则请查看 dreis Bounds 组件。见：https://twitter.com/0xca0a/status/1453807293074661385

顺便说一句，memocanvas 的东西没有意义，不要将 jsx 放入 usememo。

【讨论】：