json - React-Three-Fiber (R3F) : GLTF loader loading issue. 为什么我看不到我的模型？

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的创建者在他的codeandbox中加载了一个模型，如下所示: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 一起玩，但我似乎已经在第一个障碍中摔倒了。有人请把我从这个头痛中解救出来!哈哈。

谢谢!

Answer 1

这里有很多ifs但是如果你已经在你的'public'目录中保存了'mindbreaker.glb'并且你正在使用create-react-app那么文件的路径应该是'useLoader(GLTFLoader，“mindbreaker.glb”)