3

我正在尝试在 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 一起玩，但我似乎在第一关就掉了下来。有人请救我脱离这个头痛！哈哈。

谢谢！

4

4 回答 4

1

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

于 2020-07-04T11:51:17.753 回答
0

我遇到了同样的问题，所以我搬到了一个简单的 HTTP 服务器，这样我就可以进步了。在我的情况下，模型最终将被提供，所以这并没有太多的不便。

http服务器。-p 8000 --cors

并在反应中提供 url 给 useLoader。

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

于 2020-07-16T04:11:13.823 回答
0

万一其他人在寻找这个问题的答案时发现了这个线程，我通过首先导入我的 glb 文件解决了一些加载问题。我还不太精通反应，但我认为这是因为反应改变了文件的相对路径，因此如下所示（例如）导入它可能会起作用。

import modelPath from "../public/mindbreaker.glb";

//----------//

// Use your loader with the imported model variable, instead of a hardcoded path
useLoader(GLTFLoader, modelPath)
于 2021-05-17T11:48:41.547 回答
0

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

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

附言。

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

于 2020-04-17T19:31:29.240 回答