Skip to content

Instantly share code, notes, and snippets.

@Swhite215
Last active Jun 14, 2022
Embed
What would you like to do?
Example using react-three fiber to load a GLTF
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>
);
}
@Swhite215
Copy link
Author

Swhite215 commented Jun 7, 2022

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

@Swhite215
Copy link
Author

Swhite215 commented Jun 14, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment