impl google model viewer page

components/models/knight.tsx

@@ -1,3 +1,4 @@
+import "@google/model-viewer";
 import { useHelper } from "@react-three/drei";
 import { useLoader } from "@react-three/fiber";
 import { useRef } from "react";
@@ -10,3 +11,19 @@ export const ThreeKnight = () => {
   const gltf = useLoader(GLTFLoader, "/knight_gltf/scene.gltf");
   return <primitive ref={mesh} object={gltf.scene} position={[0, 0, 0]} />;
 };
+
+export const GoogleKnight = () => {
+  return (
+    <model-viewer
+      style={{ height: "1200px", width: "1200px" }}
+      src="/knight_gltf/scene.gltf"
+      ios-src=""
+      poster="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b%2Fposter-astronaut.png?v=1599079951717"
+      alt="A 3D model of an astronaut"
+      shadow-intensity="1"
+      camera-controls
+      auto-rotate
+      ar
+    ></model-viewer>
+  );
+};

pages/compare/model-viewer.tsx

@@ -0,0 +1,11 @@
+import { GoogleKnight } from "@components/models/knight";
+import type { NextPage } from "next";
+
+const Google_Demo: NextPage = () => {
+  return (
+    <div className="h-screen w-screen flex justify-center">
+      {<GoogleKnight /> ?? null}
+    </div>
+  );
+};
+export default Google_Demo;