无法在React应用程序中使用GLTFLoader从本地目录加载GLTF文件。它可以从外部URL正确加载

Question

编辑:将webpack.config.js中的gltf- the loader替换为url-loader似乎解决了这个问题。

我正在尝试使用Three.js在React应用程序中渲染3d模型，但是我

从本地目录加载GLTF文件时出现问题。当我尝试使用GLTF Loader加载GLTF文件时，我得到一个404 (未找到)错误。当我从外部url加载GLTF文件时，它可以正常工作。

GLTF文件本身可以工作。我在一个单独的非react项目(只是一个html文件)中测试了它，其中的GLTF文件是用GLTFLoader加载的，并由本地服务器提供服务。

在单独的非react项目中，THREE.js和GLTFLoader是从

  <script src="https://unpkg.com/three@0.102.0/build/three.min.js"></script>
  <script src="https://unpkg.com/three@0.102.0/examples/js/loaders/GLTFLoader.js"></script>

而在React项目中，它们是从npm模块加载的："three“和"three-gltf-loader”。

下面是我的项目中与加载GLTF文件相关的代码。

import * as THREE from 'three';
import GLTFLoader from 'three-gltf-loader';
import Car from './models/Low-Poly-Racing-Car.gltf';

...

loader.load(
    Car,
    (gltf) => {
        this.customLayer.scene.add(gltf.scene);
    }, null, (err) => {
        console.log(err);
    }
);

...

同样，这会导致本地文件出现404错误，但是像https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf这样的外部链接可以很好地工作。

这是在webpack 1.15.0版本中。我尝试过修改和不修改webpack.config.json。我尝试的对webpack.config.json的修改是添加

      {
        test: /\.(gltf)$/,
        loader: "gltf-webpack-loader"
      },
      {
        test: /\.(bin)$/,
        loader: 'file-loader'
      }

添加到加载器数组。这允许

import Car from './models/Low-Poly-Racing-Car.gltf';

去工作。

对于GLTFLoader的路径参数，我尝试使用上面看到的名为Car的变量，以及包含我尝试过的不同目录的相对路径的字符串：

"../../../images/models/Low-Poly-Racing-Car.gltf"
"./models/Low-Poly-Racing-Car.gltf"
"../../../public/models/Low-Poly-Racing-Car.gltf"
"../../../public/models/Low-Poly-Racing-Car.gltf"

当我从上面的目录导入到名为Car的变量中时，我得到了值：

"/in-memorye5d217e7245bef6f258a6f535019c43e.gltf"

任何在本地将GLTF文件加载到此React项目中的帮助都将非常感谢！

Answer 1

如果从外部文件加载模型或纹理，由于浏览器的同源策略安全限制，从文件系统加载将失败，并出现安全异常。

在以下位置查看文档：

https://threejs.org/docs/#manual/en/introduction/How-to-run-things-locally

Answer 2

将模型放在公共文件夹中，并将路径写入模型*/public/models.gltf*。

Answer 3

下午好，也许这个下载方法能帮到你

import * as THREE from 'three'
import React, { useRef } from 'react'
import { useLoader } from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import urlAzs from '../../../../static/3d/azs.glb'
import urlTextureAzs from '../../../../static/img/flakes.png'

export default function Model ({
  activeRoom,
  setActiveRoom,
  heightRoom,
  deltaHeightRoom,
  ...props
}) {
  const texture = useLoader(THREE.TextureLoader, urlTextureAzs)
  const { nodes, materials } = useLoader(GLTFLoader, urlAzs)