Редактировать: Замена "gltf-webpack-loader" на "url-loader" в webpack.config.js, похоже, решает проблему.
Я пытаюсь визуализировать 3d-модель в приложении React с Three.js, однако я
возникли проблемы при загрузке файла GLTF из локального каталога. Когда я пытаюсь загрузить файл GLTF с помощью GLTF Loader, я получаю сообщение об ошибке 404 (не найдено). Это работает
правильно, когда я загружаю файл GLTF с внешнего URL.
Сам файл 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: «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, работает отлично.
Это с веб-пакетом версии 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 будет принята с благодарностью!