-
-
Save Swhite215/fd81c78b12fca35a9afbcf0e8798ce66 to your computer and use it in GitHub Desktop.
Example using react-three fiber to load a GLTF
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Screen.Recording.2022-06-14.at.12.55.46.PM.mov