如何使用react三纤维和@react 3/drei移动摄像机？

Question

我正在用下面的配置绘制一个3d模型。

• 反应-三纤维
• @3/drei

下面是一个CodeSandBox，它绘制了一个模型。

CodeSandBox-A

绘制的模型接近画布的顶部，我想把它集中起来。

​

​

你能告诉我如何把模型放在画布上吗？

这是我第一次接触Three.js，所以我确信我可能犯了一些基本的错误。

代码如下。

我参考了以下支持画布组件的文档。

反应三纤维文件

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在v6.x中被删除。#1147 .pmndrs/react三纤维

我还尝试使用上述问题中描述的useThree代码。

下面是它的CodeSandBox。

CodeSandBox-B

正如你从CodeSandBox上看到的那样，我无法移动相机。

Answer 1

给轨道控制"makeDefault“支柱，然后它应该在中心。否则，请检查dreis边界组件。请参阅：https://twitter.com/0xca0a/status/1453807293074661385

备忘录的事情没有任何意义，不要把jsx放在usememo。