Trying to load the gltf link from the mongodb database in react three fiber

Questions
,
1

i have been trying to load my gltf file from the database but its not working. I tried creating separate page for model.js but still no result. Searching for the solution online alot but no sucess. Do note course.content is the link of the model from amazon s3 .
Please help. the code is below:

import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux'

import { Canvas } from "@react-three/fiber";
import { useGLTF } from '@react-three/drei'
import { useLoader } from "@react-three/fiber";
import { Environment, OrbitControls } from "@react-three/drei";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { Suspense } from "react";

import {
  listCourseDetails
} from '../actions/courseActions'


  const Model = ({ bro }) => {
    const gltf = useLoader(GLTFLoader, `/${bro}`);
    return <primitive object={gltf} scale={0.005} />;
  }


export default function ModelScreen({ history, match }) {

const dispatch = useDispatch()

const courseDetails = useSelector((state) => state.courseDetails)
const { error, course } = courseDetails


useEffect(() => {

  if (!course._id || course._id !== match.params.id) {
    dispatch(listCourseDetails(match.params.id))
    
  }
}, [dispatch, match])

  return (
    <>
      <div style={{width: '70vw', height: '70vh'}}>
        <Canvas>
          <Suspense>
            <Model bro={course.content}/>
            <OrbitControls />
            <Environment preset="sunset" background />
          </Suspense>
        </Canvas>
      </div>  
    </>
  );
}
2

i answered that one on our github.

this is wrong:

you will end up with a url like this: /https://foo.com/bar. you can only use / for local files, not remote.

if you remove the /, the file is actually present somewhere and it still doesn’t work, then it’s a CORS issue on your server. the real amazon url you posted on the github had a cors issue, that means the web browser itself cannot fetch it - no matter if threejs or anything else tries it.

3

mate yep i understand that. For the amazon, i had installed another tool in my browser which prevent CORS from affecting( anyway i have already updated the CORS policy in aws for the object). I changed the /${bro} to {bro} but it still didn’t work.

4

i don’t think you understand. the url you gave me was: https://s3.amazonaws.com/3dlearning.io/untitled.glb

try fetching it, in your browser console:

fetch('https://s3.amazonaws.com/3dlearning.io/untitled.glb')
  .then(console.log)
  .catch(console.error)

Screenshot 2021-04-25 at 14.59.42
Screenshot 2021-04-25 at 14.59.421088×550 117 KB

i don’t think this is a threejs issue. you need to figure out how to set up CORS correctly. if you go with that url to stackoverflow you’ll have an answer in minutes. but it’ll be harder here.

5

but the same link is working fine in my environment : (

6

You can check out the code sandbox : GLTFLoader - Loading (forked) - CodeSandbox

7

Thank you! I tried fetching and it showed error. I have raised question in stackoverflow