使用三个 JS 和 React JS 加载 GLTF 模型

Posted 2023-02-27

【中文标题】使用三个 JS 和 React JS 加载 GLTF 模型

【英文标题】：Loading a GLTF model with Three JS and React JS

【发布时间】：2020-06-10 01:54:06

【问题描述】：

我无法使用 React JS 加载从 sketchfab 下载的 GLTF 文件。当我尝试在不使用 React（使用常规 index.html 和 index.js）的情况下执行此操作时，它可以工作，但是当我将代码带入我的 React 应用程序时，它会在 JSON.parse 的位置 0 处的 JSON 中抛出一个 Unexpected token

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 文件的组件时的网络选项卡

【问题讨论】：

你如何托管你的 React 应用程序？此错误通常表明您的 Web 服务器不提供 glTF 资源，而是提供 HTML 文件。确保检查请求的 HTTP 响应并确保 glTF 内容有效。

@Mugen87 我检查了 Networks 选项卡，它说它正在加载 scene.gtlf，并且它给出了 200 响应。我更新了我的问题并包含了网络标签

但是你能检查一下其他的 HTTP 响应头吗？你得到什么内容类型？

@Mugen87 啊，你是对的。它正在获取一个文本文件，如内容类型所示。

@Mugen87 我不明白，为什么我的 GLTF 加载程序将其解释为文本文件，尽管我将文件作为 JSON 传递？这是我第一次真正使用 GLTF 加载器，所以我不太确定。

【参考方案1】：

所以我确实找到了解决方案！

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

import filePath from "filepath_of_your_glb_file"

然后，我简单地将 loader 函数中的 loadpath 替换为 filePath 就可以了！

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

如果你想让它动态化（你有多个要加载的 glb），只需 console.log 导入的 filePath 并使用记录的 URL 作为你的路径。

【参考方案2】：

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

解决了这个问题

loader.load("./LittlestTokyo.glb", (gltf) => 
  var obj = gltf.scene.children[0];
  console.log(obj);
);

如果加载器找不到文件，你应该看到“数组没有元素”错误，否则，至少加载器能够找到文件。但是您可能还有其他问题。例如，在我的情况下，由于文件损坏，我有“位置 x 错误处的无效字符”和可能是由于 .glb 文件格式导致的“没有 DRACOLoader”。