useGTF和ReactJS示例在沙箱中工作，但在本地不工作

加载和显示GLTF格式文件的代码在沙箱中工作。这正是我想要的。代码不是我的代码，而是复制的。在沙盒中使用我自己的数据。创建具有相同包级别的react应用程序时，总是失败。有趣的是，不同的浏览器报告的错误略有不同

沙箱和本地代码

import React, { Suspense } from "react";
import { Canvas } from "react-three-fiber";
import { OrbitControls, useGLTF } from "@react-three/drei";

function Model(props) {
    const { scene } = useGLTF('untitled.glb');
    return <primitive object={scene} />;
}

export default function App() {

    return (
    <Canvas pixelRatio={[1, 2]} camera={{ position: [-10, 15, 15], fov: 50 }}>
    <ambientLight intensity={1} />
    <Suspense fallback={null}>
    <Model />
    </Suspense>
    <OrbitControls />
    </Canvas>
    );
}

考虑向树中添加错误边界以自定义错误处理行为

Visit [https://reactjs.org/link/error-boundaries][2] to learn more about error boundaries.
console.<computed> @ index.js:1
react-reconciler.development.js:2559 

考虑向树中添加错误边界以自定义错误处理行为。 访问以了解有关错误边界的更多信息。 控制台@index.js:1 react dom.development.js:11340未捕获的R3F钩子只能在画布组件中使用

FIREFOX 未捕获的R3F挂钩只能在画布组件中使用！反应三种纤维。esm.js:1340 ForwardRef组件中出现上述错误：

at [http://localhost:3000/static/js/vendors~main.chunk.js:5788:5][2]
at Canvas [(http://localhost:3000/static/js/vendors~main.chunk.js:128676:66)][2]

at Content [(http://localhost:3000/static/js/vendors~main.chunk.js:128849:3)][2]
at div
at ResizeContainer [(http://localhost:3000/static/js/vendors~main.chunk.js:128876:5)][2]
at Canvas [(http://localhost:3000/static/js/vendors~main.chunk.js:128937:3)][2]
at App

[./node_modules/@react-three/drei/core/OrbitControls.js/OrbitControls<@http://localhost:3000/static/js/vendors~main.chunk.js:5791:7][3]
Canvas@http://localhost:3000/static/js/vendors~main.chunk.js:128676:66

[./node_modules/@react-three/drei/core/OrbitControls.js/OrbitControls<@http://localhost:3000/static/js/vendors~main.chunk.js:5791:7
Canvas@http://localhost:3000/static/js/vendors~main.chunk.js:128676:66][3]

重定尺寸容器@ 帆布@

MS边缘

Fetch finished loading: GET "<URL>".
Fetch finished loading: GET ["http://localhost:3000/static/js/vendors~main.chunk.js".][7]
Fetch finished loading: GET ["http://localhost:3000/static/js/vendors~main.chunk.js".][7]
Fetch finished loading: GET ["http://localhost:3000/static/js/vendors~main.chunk.js.map".][7]
Fetch finished loading: GET ["http://localhost:3000/static/js/vendors~main.chunk.js.map".][7]
Fetch finished loading: GET "http://localhost:3000/static/js/vendors~main.chunk.js.map".[enter link description here][7]

XHR finished loading: GET ["http://localhost:3000/untitled.glb".][7]
Fetch finished loading: GET "blob:[http://localhost:3000/9be11f26-da7b-40c2-bf56-039313b88773".][7]
Fetch finished loading: GET "blob:[http://localhost:3000/5fe62429-1fd1-4b68-88b0-1ae7695a70ea".][7]
Fetch finished loading: GET "blob:[http://localhost:3000/bfaaf41b-7dc8-45e0-bbb8-9603ffa30111".][7]
Fetch finished loading: GET "blob:[http://localhost:3000/7a0884c3-5fcc-4fb3-9c7e-b3f7ab547c4f".][7]

获取已完成加载：获取“”。
获取已完成加载：获取[”http://localhost:3000/static/js/vendors~main.chunk.js.“][7]
获取已完成加载：获取[”http://localhost:3000/static/js/vendors~main.chunk.js.“][7]
获取已完成加载：获取[”http://localhost:3000/static/js/vendors~main.chunk.js.map.“][7]
获取已完成加载：获取[”http://localhost:3000/static/js/vendors~main.chunk.js.map.“][7]
获取已完成加载：获取“http://localhost:3000/static/js/vendors~main.chunk.js.map.“[在此处输入链接说明][7]
XHR已完成加载：获取[“http://localhost:3000/untitled.glb".][7]
获取已完成加载：获取“blob:[http://localhost:3000/9be11f26-da7b-40c2-bf56-039313b88773“。][7]
获取已完成加载：获取“blob:[http://localhost:3000/5fe62429-1fd1-4b68-88b0-1ae7695a70ea][7]
获取已完成加载：获取“blob:[http://localhost:3000/bfaaf41b-7dc8-45e0-bbb8-9603ffa30111“。][7]
获取已完成加载：获取“blob:[http://localhost:3000/7a0884c3-5fcc-4fb3-9c7e-b3f7ab547c4f.“][7]

看起来您的版本有问题，useGLTF没有检测到画布上的旧版本。这个包现在被称为@react three/fiber，它与三个以类似格式命名的生态系统包一起工作，正如您的代码@react three/drei中所示

更新到最新版本或检查我编译的此模板上的版本

---

此外，还需要使用GLTFJSX为GLTF/GLB自动生成react组件

尝试使用“导出到ZIP”按钮直接从codesandbox下载代码。使用

npm start

执行它。应该没有区别

App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit [https://reactjs.org/link/error-boundaries][3] to learn more about error boundaries. index.js:1
Uncaught R3F hooks can only be used within the Canvas component! react-dom.development.js:11342

Fetch finished loading: GET "<URL>".
Fetch finished loading: GET ["http://localhost:3000/static/js/vendors~main.chunk.js".][7]
Fetch finished loading: GET ["http://localhost:3000/static/js/vendors~main.chunk.js".][7]
Fetch finished loading: GET ["http://localhost:3000/static/js/vendors~main.chunk.js.map".][7]
Fetch finished loading: GET ["http://localhost:3000/static/js/vendors~main.chunk.js.map".][7]
Fetch finished loading: GET "http://localhost:3000/static/js/vendors~main.chunk.js.map".[enter link description here][7]

XHR finished loading: GET ["http://localhost:3000/untitled.glb".][7]
Fetch finished loading: GET "blob:[http://localhost:3000/9be11f26-da7b-40c2-bf56-039313b88773".][7]
Fetch finished loading: GET "blob:[http://localhost:3000/5fe62429-1fd1-4b68-88b0-1ae7695a70ea".][7]
Fetch finished loading: GET "blob:[http://localhost:3000/bfaaf41b-7dc8-45e0-bbb8-9603ffa30111".][7]
Fetch finished loading: GET "blob:[http://localhost:3000/7a0884c3-5fcc-4fb3-9c7e-b3f7ab547c4f".][7]