add model-viewer on NextJS

components/models/mv-knight.tsx

@@ -0,0 +1,66 @@
+import "@google/model-viewer";
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "model-viewer": ModelViewerJSX &
+        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+interface ModelViewerJSX {
+  src: string;
+  poster?: string;
+  // ... others
+}
+
+interface ModelViewerElement extends Element {
+  model: {
+    materials: Array<{
+      name: string;
+      pbrMetallicRoughness: {
+        setBaseColorFactor: (x: [number, number, number, number]) => void;
+        setMetallicFactor: (x: number) => void;
+        setRoughnessFactor: (x: number) => void;
+
+        baseColorTexture: null | {
+          texture: {
+            source: {
+              setURI: (x: string) => void;
+            };
+          };
+        };
+        metallicRoughnessTexture: null | {
+          texture: {
+            source: {
+              setURI: (x: string) => void;
+            };
+          };
+        };
+        // ... others
+      };
+    }>;
+  };
+}
+
+const Model = () => (
+  <div id="card" className="flex mx-auto h-screen">
+    <model-viewer
+      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
+      style={{
+        width: "100%",
+        height: "100%",
+      }}
+    ></model-viewer>
+  </div>
+);
+
+export default Model;

pages/compare/model.tsx

@@ -0,0 +1,9 @@
+import dynamic from "next/dynamic";
+
+const Model = dynamic(() => import("@components/models/mv-knight"), {
+  ssr: false,
+});
+
+export default function Home() {
+  return <Model />;
+}

pages/compare/threejs.tsx

@@ -6,7 +6,7 @@ import type { NextPage } from "next";
 const Threejs_Demo: NextPage = () => {
   return (
     <div className="h-screen w-screen">
-      <ARCanvas camera={{ position: [0, 0, 2] }}>
+      <ARCanvas camera={{ position: [0, 1, 2] }}>
         <ambientLight />
         <pointLight position={[5, 5, 5]} />
         <ThreeKnight />

pages/index.tsx

@@ -11,6 +11,11 @@ function Home() {
             <p className="text-slate-800 text-3xl">Threejs</p>
           </a>
         </Link>
+        <Link href={"/compare/model"}>
+          <a>
+            <p className="text-slate-800 text-3xl">Model-Viewer (NextJS)</p>
+          </a>
+        </Link>
         <Link href={"/compare/view3D"}>
           <a>
             <p className="text-slate-800 text-3xl">View3D (naver)</p>