Question

编辑：在webpack.config.js中将“ gltf-webpack-loader”替换为“ url-loader”似乎可以解决问题。

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

从本地目录加载GLTF文件时遇到问题。当我尝试使用GLTF Loader加载GLTF文件时，出现404（未找到）错误。确实有效从外部网址加载GLTF文件时正确显示了

GLTF文件本身可以工作。我在一个单独的非反应项目（只是一个html文件）中对其进行了测试，其中GLTF文件已由GLTFLoader加载并由本地服务器提供服务。

在单独的非反应项目中，从中加载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模块中加载的：“三个”和“三个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的path参数，我尝试使用如上所示的名为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)

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

3 个答案: