Merge branch 'feature/glb-support' into develop

NaturalSelectionLabs · Sep 7, 2021 · 50ea158 · 50ea158
2 parents 01fa350 + 0ce9ef5
commit 50ea158
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 17 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,60 @@
 <template>
-    <img
-        v-if="!(imageUrl?.endsWith('mp4') || imageUrl?.endsWith('mov'))"
+    <div
         :style="{
             width: size + 'px',
             height: size + 'px',
         }"
-        :src="imageUrl"
-        class="nft-item"
-    />
-    <video
-        v-else
-        :style="{
-            width: size + 'px',
-            height: size + 'px',
-        }"
-        :src="imageUrl"
-        class="nft-item"
-        autoplay
-        loop
-        muted
-    />
+    >
+        <video
+            v-if="imageUrl?.endsWith('mp4') || imageUrl?.endsWith('mov')"
+            :src="imageUrl"
+            class="nft-item"
+            :style="{
+                width: size + 'px',
+                height: size + 'px',
+            }"
+            autoplay
+            loop
+            muted
+        />
+        <model-viewer
+            v-else-if="imageUrl?.endsWith('glb')"
+            :src="imageUrl"
+            class="nft-item"
+            :style="{
+                width: size + 'px',
+                height: size + 'px',
+            }"
+            ar
+            ar-modes="webxr scene-viewer quick-look"
+            environment-image="neutral"
+            auto-rotate
+            camera-controls
+        />
+        <img
+            v-else
+            :src="imageUrl"
+            class="nft-item"
+            :style="{
+                width: size + 'px',
+                height: size + 'px',
+            }"
+        />
+    </div>
 </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/[email protected]":
+  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"