Загрузка модели GLTF с Three JS и React JS - PullRequest
Новая
       9

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

1 голос
/ 26 февраля 2020

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

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();

  }

Я прочитал, что он отображает мой индекс. html, поэтому он выдает ошибку, но я не могу найти исправление, так как знаю, что файл GLTF на правильном пути.

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

ОБНОВЛЕНИЕ

Вкладка «Сеть» при рендеринге компонента, содержащего файл gltf enter image description here

1 Ответ

1 голос
/ 27 февраля 2020

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

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

import filePath from "filepath_of_your_glb_file"

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


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

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

...