React-Three-Fiber（R3F）：GLTF加载问题。为什么我看不到我的模型？

Question

我尝试在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-three-fiber的创建者几天前像这样在codesandbox中加载了一个模型：https://codesandbox.io/s/r3f-gltf-useloader-8nb5i ，所以我觉得这不可能是R3F的问题。我注意到他使用的是glb文件而不是gltf文件，所以我去找了一个glb模型来检查是否会有所不同。我意识到我还必须将我的模型放在public文件夹中，我已经做到了。不幸的是，这并没有改变什么，我仍然继续遇到这个问题。

我已经尝试过以下方法：

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，但似乎在第一道难关上就失败了。请有人解救我吧！哈哈。

谢谢！

- SheShellSheShore

---

请勿使用 ../public/mindbreaker.glb。它必须是相对路径，就像加载图像或在 HTML 中使用 <image/> 一样。正确的代码应该是 useLoader(GLTFLoader, "mindbreaker.glb")。 - mr.b

Answer 1

这里有很多条件语句，但如果你已经将'mindbreaker.glb'保存在你的'public'目录中，并且正在使用create-react-app，则文件的路径应该是'useLoader(GLTFLoader, "mindbreaker.glb")'

- James

Answer 2

如果有其他人在寻找解决此问题的答案时看到了这个帖子，我通过首先导入我的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)

- Frida O.

Answer 3

如果使用CodeSandbox，请在设置中禁用循环保护。 CodeSandbox无法加载更大的gltf文件，而且错误难以追踪。

否则，可能是各种原因造成的，如果gltf是Draco压缩的，则需要使用Draco Loader，可能是路径错误、缺少灯光、模型太大导致不在摄像机视锥体内等等。在开始阶段，所有这些都非常恶心，但你会习惯的。当我开始学习Three.js时，我差点疯了。

附注：

../public/ 看起来可疑，应该是 /... 或 /public/...

- hpalu

Answer 4

我也遇到了同样的问题，所以我转向了一个简单的HTTP服务器以便能够进展。 在我的情况下，模型最终会被提供，因此这并不是太麻烦。

http-server . -p 8000 --cors

在React中提供要使用的url。

您可以在以下链接中找到更多信息： https://threejs.org/docs/#manual/en/introduction/How-to-run-things-locally

- Richard H