Загрузка модели GLTF с помощью Three JS и React JS

У меня проблемы с загрузкой файла GLTF, который я скачал с sketchfab с помощью React JS. Когда я пытаюсь сделать это без использования React (с обычными index.html и index.js), он работает, но когда я помещаю код в свое приложение React, он выдает Unexpected token ‹в JSON в позиции 0 в JSON.parse ошибка. Вот мой код:

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 находится на правильном пути.

Если есть какие-то идеи, я был бы очень признателен. Спасибо!

ОБНОВЛЕНИЕ

Вкладка Network при визуализации компонента, который включает файл gltf введите описание изображения здесь


reactjs gltf three.js
person ninja_nugget    schedule 26.02.2020    source источник
comment
Как вы размещаете свое приложение React? Эта ошибка обычно указывает на то, что ваш веб-сервер обслуживает не ресурс glTF, а файл HTML. Убедитесь, что вы проверяете HTTP-ответ на свой запрос и убедитесь, что содержимое glTF действительное.   -  person Mugen87    schedule 26.02.2020
comment
@ Mugen87 Я проверил вкладку Networks и там написано, что загружается scene.gtlf и выдается ответ 200. Я обновил свой вопрос и включил вкладку сети   -  person ninja_nugget    schedule 26.02.2020
comment
Но можете ли вы также проверить другие заголовки ответа HTTP? Какой тип контента вы получаете?   -  person Mugen87    schedule 26.02.2020
comment
@ Mugen87 Ах, ты прав. Он получает текстовый файл, как видно из типа содержимого.   -  person ninja_nugget    schedule 26.02.2020
comment
@ Mugen87 Я не понимаю, почему мой загрузчик GLTF интерпретирует его как текстовый файл, несмотря на то, что я передаю свой файл как JSON? Я впервые использую загрузчики GLTF, поэтому я не совсем уверен.   -  person ninja_nugget    schedule 26.02.2020
comment
Эта проблема не связана с _1 _ / _ 2_. Тип ответа должен быть model/gltf+json. а не text/html. Итак, проблема в том, как ваш бэкэнд обслуживает контент. К сожалению, я не знаю, почему это происходит с вашим приложением React.   -  person Mugen87    schedule 26.02.2020

Ответы (2)


arrow_upward
2
arrow_downward

Итак, я нашел решение!

Вместо того, чтобы использовать путь к gltf, я сжал gltf в файл glb и поместил его в свою папку src. Затем я импортировал файл, используя синтаксис импорта:

import filePath from "filepath_of_your_glb_file"

Затем я просто заменил путь загрузки внутри функции загрузчика на filePath, и он заработал!


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

И если вы хотите сделать его динамическим (у вас есть несколько glbs, которые вы хотите загрузить), просто console.log импортированный filePath и используйте зарегистрированный URL в качестве пути.

person ninja_nugget    schedule 27.02.2020

arrow_upward
0
arrow_downward

Я решил эту проблему, поместив 3d-модель в общую папку (где находятся index.html и favicon.ico) и позвонив

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

Если загрузчику не удалось найти файл, вы должны увидеть, что в массиве нет ошибки элемента, в противном случае, по крайней мере, загрузчик сможет найти файл. Но у вас могут быть другие проблемы. Например, в моем случае у меня недопустимый символ в позиции x, ошибка из-за повреждения файла и отсутствие DRACOLoader, вероятно, из-за формата файла .glb.

person PhoenixPan    schedule 22.05.2021