React-Three-Fiber (R3F)：GLTF 加载程序加载问题。为啥我看不到我的模型？

Posted 2023-02-27

【中文标题】React-Three-Fiber (R3F)：GLTF 加载程序加载问题。为啥我看不到我的模型？

【英文标题】：React-Three-Fiber (R3F): GLTF loader loading issue. Why can't I see my model?React-Three-Fiber (R3F)：GLTF 加载程序加载问题。为什么我看不到我的模型？

【发布时间】：2020-07-30 01:37:07

【问题描述】：

我正在尝试在 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 的创建者将模型加载到他的代码盒中，如下所示：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 一起玩，但我似乎在第一关就掉了下来。有人请救我脱离这个头痛！哈哈。

谢谢！

【问题讨论】：

不要使用../public/mindbreaker.glb。它必须是相对路径，例如加载图像或在 html 中使用 <image/>。正确的代码应该是useLoader(GLTFLoader, "mindbreaker.glb")

【参考方案1】：

如果是codesandbox，请在设置中禁用循环保护。 csb 无法加载更大的 gltf，并且无法追踪错误。

否则它可能是一切，如果 gltf 是 draco 压缩的，你需要 draco loader，它可能是错误的路径，缺少灯光，模型太大所以它不在凸轮截头体中，等等。所有这些东西在开始，但你会习惯的。当我开始使用threejs时，它几乎让我发疯。

ps.

../public/ 看起来很可疑。它是 /... 或 /public/...

【参考方案2】：

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

【参考方案3】：

我遇到了同样的问题，所以我转移到了一个简单的 HTTP 服务器，这样我就可以继续前进了。在我的情况下，模型最终会得到服务，所以这不会带来太大的不便。

http-服务器。 -p 8000 --cors

并在 react 中提供使用加载器的 url。

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

【参考方案4】：

如果其他人在寻找此问题的答案时发现此线程，我通过首先导入我的 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)