I'm currently having an issue with AWS. I have a simple react-three-fiber build, that renders a car model from a .gltf file. The model and build run fine locally but not on AWS. The error I get is
Could not load /tesla_model_3/scene.gltf: Unexpected token < in JSON at position 0
I can't figure out why AWS won't load the JSON object of the model and instead is passing in an HTML. here is the site deployed: https://master.d258lkzp17ij6b.amplifyapp.com/
It could be a pathing issue, but it runs fine on a local server.
the file scene.gltf is the /public folder
and here are the code blocks for the model and the call to the component. also here is the Github for the files if needed: https://github.com/SBrandon0432/tesla-car-shop/tree/Master/src
import React, {lazy, Suspense} from 'react';
import { useLoader } from '@react-three/fiber';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
const Model = props =>{
const model = useLoader(
GLTFLoader, props.path
)
return (
<Suspense>
<primitive object={model.scene} scale={'.50'} position={[0,0,0]}/>
</Suspense>
)
}
export default Model
import React, {useRef, useEffect, Suspense, lazy} from "react";
import { ReactThreeFiber, Canvas, useFrame, extend, useThree, useLoader } from 'react-three-fiber';
import * as THREE from 'three';
import Box from './Box';
import Background from "./Background";
import Bulb from "./Bulb";
import Controls from "./Controls";
import Floor from "./Floor";
const Model = lazy(() => import("./Model"));
const ThreeD = () => {
return (
<Canvas className="ThreeD"
shadows
camera={{position:[200,200,200]}}
>
<ambientLight intensity={1.5}/>
<Bulb position={[0, 3, 0]}/>
<Suspense fallback={null}>
<Model
path={'/tesla_model_3/scene.gltf'}
/>
</Suspense>
<Controls/>
<axesHelper args={[5]}/>
<Suspense fallback={null}>
<Box position={[4,2,0]}/>
</Suspense>
<Suspense fallback={null}>
<Background/>
</Suspense>
<Floor position={[0,-.5,0]}/>
</Canvas>
)
}
export default ThreeD;