我正试图在react three fiber(R3F(中加载一个gltf模型，我正在做噩梦。我试着寻找答案，也有人遇到过类似的问题，但我没能解决我的问题。
我一直在控制台上看到这个：
at JSON.parse (<anonymous>)
at GLTFLoader.parse (GLTFLoader.js:213)
at Object.onLoad (GLTFLoader.js:145)
at XMLHttpRequest.<anonymous> (three.module.js:35829)
据我所知，我的代码没有任何问题。我尝试过以多种不同的方式在模型中加载它。react三光纤的创建者几天前在一个模型中加载到他的代码沙盒中，如下所示：https://codesandbox.io/s/r3f-gltf-useloader-8nb5i-所以我觉得这不可能是R3F的问题。我注意到他使用的是glb而不是gltf文件，所以我去找了一个glb模型来检查这是否会有所不同。我意识到我还必须把我的模型放在公共文件夹中，我也这样做了。不幸的是，这并没有产生什么影响，我仍然继续受到这个问题的困扰。
我试过这样：
import React, { Suspense } from "react";
import { Canvas, useLoader } from "react-three-fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import * as THREE from "three";
import Box from "./Components/Sphere.Component";
import Plane from "./Components/Plane.Component";
import Controls from "./Components/Controls.Component";
import "./App.css";
const Chair = () => {
const { nodes } = useLoader(GLTFLoader, "../public/mindbreaker.glb");
return (
<mesh geometry={nodes.Cube.geometry}>
<meshStandardMaterial attach="material" color="lightblue" />
</mesh>
);
};
function App() {
return (
<Canvas
camera={{ position: [0, 0, 5] }}
onCreated={({ gl }) => {
gl.shadowMap.enabled = true;
gl.shadowMap.type = THREE.PCFSoftShadowMap;
}}
>
<fog attach="fog" args={["pink", 5, 15]} />
<Plane />
<Controls />
<Box />
<Suspense fallback={null}>
<Chair />
</Suspense>
</Canvas>
);
}
export default App;
以下是一位有类似问题的人士：https://discourse.threejs.org/t/json-or-gltf-loader-for-three-js-in-react/3898/10但我仍然不知道如何解决这个问题。
任何帮助都将不胜感激，我非常期待与R3F比赛，但我似乎在第一个栏上摔倒了。有人请把我从头痛中救出来！哈哈。
谢谢！
这里有很多If，但如果你已经在"public"目录中保存了"mindbreaker.glb"，并且你正在使用create-rect应用程序，那么文件的路径应该是"useLoader(GLTFLoader，"mindbrooker.glb"(
如果是codesandbox，请在设置中禁用循环保护。csb无法加载更大的gltf，并且无法跟踪错误。
否则它可能是一切，如果gltf是draco压缩的，你需要draco加载程序，它可能是一个错误的路径，缺少灯光，模型太大，所以它不在凸轮轴上，等等。所有这些东西一开始真的很糟糕，但你会习惯的。当我启动threejs时，它几乎让我发疯。
ps。
/公众/看起来可疑。要么/。。。或/public/。。。
我遇到了同样的问题，所以我转移到了一个简单的HTTP服务器上，这样我就可以继续了。在我的情况下，模型最终会被提供，所以这不会带来太多不便。
http服务器-p 8000--cors
并在react中向useLoader提供url。
您可以在上找到更多信息https://threejs.org/docs/#manual/en/introduction/How-在本地运行
如果其他人在寻找这个问题的答案时发现了这个线程，我通过首先导入我的glb文件解决了一些加载问题。我还不太熟悉react，但我认为这是因为react会更改文件的相对路径，因此按如下所示导入它(例如(可能会起作用。
import modelPath from "../public/mindbreaker.glb";
//----------//
// Use your loader with the imported model variable, instead of a hardcoded path
useLoader(GLTFLoader, modelPath)