add: model viewer for glb support

NaturalSelectionLabs · Sep 7, 2021 · 01dc20c · 01dc20c
1 parent be10439
commit 01dc20c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     },
     "homepage": "https://github.com/NaturalSelectionLabs/RSS3-Page#readme",
     "dependencies": {
+        "@google/model-viewer": "1.8.0",
         "@sentry/tracing": "6.11.0",
         "@sentry/vue": "6.11.0",
         "@walletconnect/web3-provider": "1.6.5",

diff --git a/src/components/NFT/NFTItem.vue b/src/components/NFT/NFTItem.vue
@@ -1,35 +1,53 @@
 <template>
-    <img
-        v-if="!(imageUrl?.endsWith('mp4') || imageUrl?.endsWith('mov'))"
+    <video
+        v-if="imageUrl?.endsWith('mp4') || imageUrl?.endsWith('mov')"
         :style="{
             width: size + 'px',
             height: size + 'px',
         }"
         :src="imageUrl"
         class="nft-item"
+        autoplay
+        loop
+        muted
     />
-    <video
+    <model-viewer
+        v-else-if="imageUrl?.endsWith('glb')"
+        :style="{
+            width: size + 'px',
+            height: size + 'px',
+        }"
+        :src="imageUrl"
+        class="nft-item"
+        ar
+        ar-modes="webxr scene-viewer quick-look"
+        environment-image="neutral"
+        auto-rotate
+        camera-controls
+    />
+    <img
         v-else
         :style="{
             width: size + 'px',
             height: size + 'px',
         }"
         :src="imageUrl"
         class="nft-item"
-        autoplay
-        loop
-        muted
     />
 </template>
 
 <script lang="ts">
 import { Vue, Options } from 'vue-class-component';
+import * as viewer from '@google/model-viewer';
 
 @Options({
     props: {
         size: Number,
         imageUrl: String,
     },
+    components: {
+        viewer,
+    },
 })
 export default class NFTItem extends Vue {
     size!: Number;

diff --git a/src/types/model-viewer.d.ts b/src/types/model-viewer.d.ts
@@ -0,0 +1,4 @@
+declare module '@google/model-viewer' {
+    const viewer: any;
+    export default viewer;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1410,6 +1410,11 @@
     "@ethersproject/properties" "^5.4.0"
     "@ethersproject/strings" "^5.4.0"
 
+"@google/model-viewer@1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@google/model-viewer/-/model-viewer-1.8.0.tgz#398c0d9bbd3281933a3a4e6ed8f02da6789df768"
+  integrity sha512-qUwlu4q+sEFs2XOztZpaT5sGdv9G76jyLzEOdttcfAFb0/ZE0HnXU1KPN3Pq5gvdg+jW7fDUUHhsMxM1OBnpUQ==
+
 "@metamask/safe-event-emitter@^2.0.0":
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/@metamask/safe-event-emitter/download/@metamask/safe-event-emitter-2.0.0.tgz#af577b477c683fad17c619a78208cede06f9605c"