我使用 React JS 加载从 sketchfab 下载的 GLTF 文件时遇到问题。当我尝试在不使用React(使用常规index.html和index.js)的情况下执行此操作时,它可以工作,但是当我将代码带入React应用程序时,它会在JSON.parse的位置0处抛出一个意外的令牌
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 文件位于正确的路径中。
如果有任何见解,我将非常感激。谢谢你!
UPDATE
Network tab when rendering component that includes the gltf file