3D model renders local but not on AWS

Viewed 43

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;
0 Answers
Related