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

Question

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

下面是绘制模型的CodeSandBox
CodeSandBox-A

绘制的模型靠近canvas的顶部，我想居中

能否请您告诉我如何使模型在 canvas 上居中？
这是我第一次接触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中看到的那样，我无法移动相机。

Answer 1

给 orbitcontrols "makeDefault" 道具，然后它应该在中心。否则检查 dreis Bounds 组件。参见：https://twitter.com/0xca0a/status/1453807293074661385

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

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

How to move the camera using react-three-fiber and @react-three/drei?

three.js

typescript

reactjs

react-three-fiber

drei