add Model idea, put example in multiplayer world

Author: alex-shortt

examples/worlds/Multiplayer/index.tsx

@@ -1,4 +1,4 @@
-import { StandardReality, Background } from "spacesvr";
+import { StandardReality, Background, Model } from "spacesvr";
 import LightSwitch from "./ideas/LightSwitch";
 
 export default function Multiplayer() {
@@ -15,6 +15,7 @@ export default function Multiplayer() {
         <planeBufferGeometry args={[200, 200]} />
         <meshBasicMaterial color={"purple"} />
       </mesh>
+      <Model src="https://d27rt3a60hh1lx.cloudfront.net/models/Camera-1652915410/camera_02_cleaned.glb.gz" />
     </StandardReality>
   );
 }

src/ideas/index.ts

@@ -14,4 +14,5 @@ export * from "./physical/Fog";
 export * from "./physical/Frame";
 export * from "./physical/HDRI";
 export * from "./physical/InfinitePlane";
+export * from "./physical/Model";
 export * from "./physical/Video";

src/ideas/physical/Model.tsx

@@ -0,0 +1,32 @@
+import { Fragment, Suspense } from "react";
+import { GroupProps } from "@react-three/fiber";
+import { Center } from "@react-three/drei";
+import { useModel } from "../../logic";
+
+type ModelProps = {
+  src: string;
+  center?: boolean;
+} & GroupProps;
+
+function UnsuspensedModel(props: ModelProps) {
+  const { src, center, ...rest } = props;
+  const gltf = useModel(src);
+
+  const Parent = center ? Center : Fragment;
+
+  return (
+    <group name="spacesvr-model" {...rest}>
+      <Parent>
+        <primitive object={gltf.scene} />
+      </Parent>
+    </group>
+  );
+}
+
+export function Model(props: ModelProps) {
+  return (
+    <Suspense fallback={null}>
+      <UnsuspensedModel {...props} />
+    </Suspense>
+  );
+}