反应三纤维（R3F）：GLTF装载机装载问题。为什么我看不到我的模型？

Question

我试图加载反应三光纤（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 Fibre的创建者将一个模型中装载的光纤与他的codesandbox连接起来，如下所示：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一起玩，但我似乎已经在第一个障碍上跌倒了。谁能把我从这头痛中救出来！哈哈。

谢谢你！

Answer 1

我也有同样的问题，所以我转移到一个简单的HTTP服务器，这样我就可以进步了。在我的例子中，这些模型最终将被提供，因此这不会带来太多不便。

超文本传输协议-server.-p 8000--cors

并在反应中提供url给useLoader。

你可以在以下网址找到更多信息：https://threejs.org/docs/#manual/en/introduction/How-在本地运行

Answer 2

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

否则它可以是一切，如果gltf是draco压缩，你需要draco加载器，它可能是一个错误的路径，丢失的灯，模型太大，所以它不在凸轮挫折，等等，所有这些东西在开始时真的很糟糕，但你会习惯的当我开始三人行的时候，它几乎把我逼疯了。

附言

.../公共/看起来很可疑。要么是/...或者/公共/...

Answer 3

这里有很多如果，但是如果你已经在你的公共目录中保存了mindbreaker.glb，并且你正在使用创建-反应-应用程序，那么文件的路径应该是“useLoader”（GLTFLoader，“mindbreaker.glb”）