我正在绘制具有以下配置的 3d 模型。
下面是一个绘制模型的 CodeSandBox。
CodeSandBox-A
绘制的模型靠近画布的顶部，我想将其居中。
你能告诉我如何将模型放在画布上吗？
这是我第一次接触 Three.js，所以我确信我可能犯了一些基本错误。
代码如下。
Canvas组件的props我参考了以下文档。
React 三纤维文档
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;
在 v6.x 中删除了 setDefaultCamera。· 问题#1147 · pmndrs/react-three-fiber
我还尝试了使用useThree上述问题中描述的代码。
以下是它的 CodeSandBox。
CodeSandBox-B
从 CodeSandBox 中可以看到，我无法移动相机。