How do i go around with passing the link in gtlf loader

[suneelx]

Hello! I am trying to load the course.content(taken from database) in gtlfLoader but can't seem to fix it, no solution works. Please help.

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

import { Canvas } from "@react-three/fiber";

import * as THREE from "three";
import { useLoader } from "@react-three/fiber";

import { useGLTF, Environment, OrbitControls, Html} from "@react-three/drei";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { Suspense, useRef } from "react";

import {
  listCourseDetails
} from '../actions/courseActions'
import Meta from '../components/Meta'
import { Div, Col, Container, Row, ListGroup } from 'react-bootstrap';



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




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

  const keyword = match.params.keyword
  const [key, setKey] = useState('')
  const category = match.params.id ? match.params.id : '';

  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, keyword, category]
    
  )

  return (
    <>
      <div style={{width: '70vw', height: '70vh'}}>
        <Canvas>
          <Suspense>
            <Model content={content.course} />
            <OrbitControls />
            <Environment preset="sunset" background />
          </Suspense>
        </Canvas>
      </div> 
      <Meta title={course.name} />
      <h2>{course.name}</h2>
      <br />
      <br />
      <h3>Description:</h3>
      <h3>{course.description}</h3>   
    </>
    
  );
}

[drcmda]

GLTFLoader expects a valid url, if it doesn't work then it can't find that file under the path you're giving it. the file may also be draco compressed in which case you need to configure the loader or use drei's useGLTF. there are tons of gltf examples here:

https://docs.pmnd.rs/react-three-fiber/examples/showcase

https://docs.pmnd.rs/react-three-fiber/examples/basics

please don't open github issues for things like that though, it doesn't make it any easier for us when people do that.

[drcmda]

that url is fine, but this is what you server gltfloader: /https://s3.amazonaws.com/3dlearning.io/untitled.glb remove the /. there seems to be a CORS issue as well, but that has to do with your server configuration.

see https://stackoverflow.com/questions/58490553/three-js-gltfloader-cors-error-how-to-enable-cors

that is not related to threejs or react, if your server doesn't apply a correct cors header the file can't be fetched from within your app.

[suneelx]

No no buddy. I know about that issue. I use a bat file for that CROS.

The main thing here is passing and using course.content in Model function instead of using the link itself. You understand right? I went through each example you linked but not even a single one uses this method. Is it the limitation of threejs? Can't be right? I will soon sponser you. You are doing great work. Thanks!

[suneelx]

@drcmda mate where are ya. Is it the limitation of the threejs?

[drcmda]

No, three just users fetch requests or xhrrequests, I tried it and it has score issue see the screen cap above.

[suneelx]

So , what do i do now?

[dangrabcad]

Your function Model isn't a valid React component. It takes a single argument, but it needs to take an object containing all the props, like this:

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

and then lower down, you pass it <Model content={content.course} /> but there's nothing called content in that scope. You probably meant course.content like you say in the text of the question.