Example using react-three fiber to load a GLTF

model.js

import { Canvas } from "@react-three/fiber";
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 "./InteractiveModel.css";

const Model = () => {
  //const gltf = useLoader(GLTFLoader, "https://nftstorage.link/ipfs/bafkreifsq5xrnld5pzv2mnn52hdmdclodx5p6r5vqiw3blk7nhsdxxtz3i");
  const gltf = useLoader(GLTFLoader, "./758_NFT_AWARDS_SCREEN_BIN.glb");
  return (
    <>
      <primitive object={gltf.scene} scale={1.2} />
    </>
  );
};

export default function InteractiveModel() {
  return (
    <div className="interactive-model-container">
      <Canvas camera={{ position: [500, 20, 230], fov: 10 }}>
        <Suspense fallback={null}>
          <group>
            <Model />
          </group>
          <OrbitControls />
          <Environment preset="night" background />
        </Suspense>
      </Canvas>
    </div>
  );
}

Screen.Recording.2022-06-07.at.1.33.49.PM.mov

Screen.Recording.2022-06-14.at.12.55.46.PM.mov