Reactjs 加载带有三个JS和React JS的GLTF模型

使用React JS加载从sketchfab下载的GLTF文件时遇到问题。当我尝试在不使用React的情况下（使用常规index.html和index.js）执行此操作时，它可以工作，但当我将代码放入React应用程序中时，它会在JSON.parse错误的位置0处抛出一个意外的标记<在JSON中。这是我的密码：

import * as THREE from "three";
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';


componentDidMount(){


    var scene = new THREE.Scene();
    scene.background = new THREE.Color(0xdddddd);
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

    var width = 100;
    var height = 100;
    var intensity = 1.4;
    var rectLight = new THREE.RectAreaLight( 0xffffff, intensity,  width, height );
    rectLight.position.set( 1, 1, 10 );
    rectLight.lookAt( 1, 1, 3 );
    scene.add( rectLight )

    let renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.getElementsByClassName("three-canvas")[0].appendChild( renderer.domElement );


    camera.position.z = 5;
    var animate = function () {
      requestAnimationFrame( animate );
      renderer.render( scene, camera );
    };

    let loader = new GLTFLoader();
    loader.load(
      "../../public/js_models/apple_iphone_xs_max/scene.gltf",
      ( gltf ) => {
          // called when the resource is loaded
        console.log(gltf.scene)
      },
      ( xhr ) => {
        console.log(xhr);
        // called while loading is progressing
        // console.log("The xhr warning isL ",xhr.srcElement.responseText);
    }
      );

    animate();

  }

我读到它正在呈现我的index.html，这就是它抛出错误的原因，但我无法真正找到修复方法，因为我知道GLTF文件位于正确的路径中

如果有任何见解，我将非常感谢。谢谢大家!

更新

渲染包含gltf文件的组件时的“网络”选项卡

---

所以我确实找到了解决办法

我没有使用gltf的路径，而是将gltf压缩到一个glb文件中，并将其放在我的src文件夹中。然后，我使用导入语法导入了该文件：

import filePath from "filepath_of_your_glb_file"

然后，我简单地用filePath替换了loader函数中的loadpath，它就可以工作了

    let loader = new GLTFLoader();
    loader.load(
      "../../public/js_models/apple_iphone_xs_max/scene.gltf",

---

如果你想让它成为动态的（你有多个GLB要加载），只需将导入的文件路径记录到console.log中，并使用记录的URL作为你的路径。

我通过将3d模型放入公用文件夹（index.html和favicon.ico所在的位置）并调用

loader.load（“./littlestokyo.glb）”，（gltf）=>{
var obj=gltf.scene.children[0]；
控制台日志（obj）；
});

---

如果加载程序找不到文件，您应该看到“array没有元素”错误，否则，至少加载程序能够找到文件。但你可能还有其他问题。例如，在我的例子中，由于文件损坏，我有“x位置无效字符错误”和“无DracLoader”，可能是由于.glb文件格式。

你是如何托管你的React应用程序的？此错误通常表示web服务器不提供glTF资产，而是提供HTML文件。确保您检查了请求的HTTP响应，并确保glTF内容有效。@Mugen87我检查了“网络”选项卡，它说它正在加载scene.gtlf，并给出了200响应。我已经更新了我的问题并包含了网络选项卡，但是您还可以检查其他HTTP响应头吗？你得到的内容类型是什么？@Mugen87啊，你说得对。它得到的是一个文本文件，如内容类型所示。@Mugen87我不明白，为什么我的GLTF加载器将它解释为一个文本文件，尽管我将文件作为JSON传递？这是我第一次真正使用GLTF装载机，所以我不太确定。