From 1e6b192c910b3723001d58c7e13af6f1cacd7dc9 Mon Sep 17 00:00:00 2001
From: Taehyeong Kim <kth@pspace.ai>
Date: Wed, 6 Jul 2022 13:18:19 +0900
Subject: [PATCH] add model-viewer on NextJS

---
 components/models/mv-knight.tsx | 66 +++++++++++++++++++++++++++++++++
 pages/compare/model.tsx         |  9 +++++
 pages/compare/threejs.tsx       |  2 +-
 pages/index.tsx                 |  5 +++
 4 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 components/models/mv-knight.tsx
 create mode 100644 pages/compare/model.tsx

diff --git a/components/models/mv-knight.tsx b/components/models/mv-knight.tsx
new file mode 100644
index 0000000..ab333b5
--- /dev/null
+++ b/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;
diff --git a/pages/compare/model.tsx b/pages/compare/model.tsx
new file mode 100644
index 0000000..34f26d6
--- /dev/null
+++ b/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 />;
+}
diff --git a/pages/compare/threejs.tsx b/pages/compare/threejs.tsx
index 35aa430..afbb525 100644
--- a/pages/compare/threejs.tsx
+++ b/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 />
diff --git a/pages/index.tsx b/pages/index.tsx
index aa65dec..0f26870 100644
--- a/pages/index.tsx
+++ b/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>