iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Web 3

當 APP develop 遇上 web3 與 Metaverse 浪潮 系列

React + web3 + 3D + 2D + APP (? 能玩些什麼呢?

利用 30 天的時間,分享在 NFT 圈看到到的新玩法
以及 前端/APP 開發者 在 Metaverse 浪潮下可以了解的有趣技術組合

這 30 天會分享很多小玩具,最終可能會做出個成果,也可能都是 code lab

Modern Web 組人好多,只好來蹭 web3 熱度

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day 零] ?:我想要在 Metaverse 做點東西,該怎麼辦?

來,讓我們先了解一下: Metaverse 是什麼?(wiki) 元宇宙(英語:Metaverse)[註 2][註 3],或稱為後設宇宙[4]、形上宇宙、元界...

2022-09-15 ‧ 由 DaYuan 分享
DAY 2

# [Day 壹] Metaverse 素材? NFT 不就是 PNG ?

NFT 的種類繁多,可以是數碼畫作、圖像、影音、短片、動畫、遊戲的虛擬角色及裝備、虛擬時裝、手袋等,甚至是實物。---cryptowesearch 在 20...

2022-09-16 ‧ 由 DaYuan 分享
DAY 3

# [Day 貳] 阿所以那個素材在哪? 先拿歐噴sea擋一下

既然昨天提到了各種不同的素材格式,那最重要的是我們的素材要從哪邊找到,就以一個錢包或者是收藏庫來說我們可以先借用 Opensea 的 API ,來協助我們取得...

2022-09-17 ‧ 由 DaYuan 分享
DAY 4

# [Day 參] 拿到資料了~來想想怎麼顯示各式各樣素材吧~

既然昨天拿到 Opensea 的資料了,那最接下來的是規劃顯示細節,就以一個錢包或者是收藏庫來說我們可以在 assets 列表點擊 assets 縮圖後,進入...

2022-09-18 ‧ 由 DaYuan 分享
DAY 5

# [Day 肆] 看得到圖檔了,遇到 音樂,影片 或是 3D 怎麼辦啊QQ

既然昨天拿到 Opensea 的資料了,那最接下來的是規劃顯示細節,就以一個錢包或者是收藏庫來說我們可以在 assets 列表點擊 assets 縮圖後,進入...

2022-09-19 ‧ 由 DaYuan 分享
DAY 6

[Day 伍] 來完善功能,串接上 MetaMask 顯示自己的收藏吧

首先 安裝 metamask https://metamask.io/download/ 如何跟 metamask 互動? 我們使用 usedapp npm i...

2022-09-20 ‧ 由 DaYuan 分享
DAY 7

[Day 陸] 加上好友切換功能之 User Avatar

讓我們製作 Avatar 來區分自己與朋友的帳號吧 這邊要先安裝 @metamask/jazzico npm i @metamask/jazzico // I...

2022-09-21 ‧ 由 DaYuan 分享
DAY 9

[Day 捌] 做完錢包了,接下來玩點酷酷的東西

在過去幾天我們用 React 做了一個簡單的 NFT 錢包來展示收藏品, 但, 到了2020年如果還只用 2D 的網頁來呈現收藏品,感覺就不夠 Metavers...

2022-09-23 ‧ 由 DaYuan 分享
DAY 10

[Day 拾] 快速入門 3D 互動網頁

https://docs.pmnd.rs/react-three-fiber/getting-started/examples https://codesan...

2022-09-24 ‧ 由 DaYuan 分享