useGTF与ReactJS示例一起在沙盒中工作，但在本地不工作

Question

加载和显示GLTF格式文件的代码在沙箱中工作。这正是我要找的。代码(https://codesandbox.io/s/hungry-easley-lwmpi?file=/src/App.js)不是我的代码，而是复制的。在Sandbox中使用我自己的数据。当创建一个具有相同包级别的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>
    );
}

CHROME错误

R3F钩子只能在画布组件中使用！index.js:1上述错误发生在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]

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

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

R3F钩子只能在画布组件中使用！index.js:1组件中发生了上述错误：

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

考虑向树中添加错误边界以自定义错误处理行为。访问https://reactjs.org/link/error-boundaries，了解有关错误边界的更多信息。控制台。@ index.js:1 react dom.Development.js:11340不透亮的R3F钩子只能在画布组件中使用！

火狐未登录的R3F钩子只能在画布组件中使用！- ForwardRef组件中发生了上述错误：

[./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

考虑向树中添加错误边界以自定义错误处理行为。访问https://reactjs.org/link/error-boundaries，了解有关错误边界的更多信息。index.js:1未登录的R3F钩子只能在画布组件中使用！react刷新-runtime.Development.js:320未透亮的R3F钩子只能在画布组件中使用！- ForwardRef组件中发生了上述错误：

[./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]

考虑向树中添加错误边界以自定义错误处理行为。访问https://reactjs.org/link/error-boundaries，了解有关错误边界的更多信息。index.js:1未登录的R3F钩子只能在画布组件中使用！Development.js:2561组件中发生了上述错误：

Content@http://localhost:3000/static/js/vendors~main.chunk.js:128848:17

div

http://localhost:3000/static/js/vendors~main.chunk.js:128898:7 Canvas@http://localhost:3000/static/js/vendors~main.chunk.js:128936:94

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

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]

Answer 1

似乎您对版本有一个问题，useGLTF没有检测到更老的canvas。这个包现在被称为@ are 3/fiber，它与三个生态系统包一起工作，它们以类似的格式命名，如您的代码@are 3/drei中所示。

更新到最新版本或检出我编译过的https://github.com/Epiczzor/r3f-template模板上的版本

此外，您还需要使用GLTFJSX为GLTF/GLB自动生成一个反应性组件。