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 21

[Day 貳拾壹] 來開發元宇宙中藥鋪吧9 - 修正載入時 3D 牌匾 與場景中牌匾衝突

fix Logo.js引入 drei 中的 clone 協助建立複製品 const { scene, materials } = useGLTF('/元藥堂.g...

2022-10-05 ‧ 由 DaYuan 分享
DAY 22

[Day 貳拾貳] 來開發元宇宙中藥鋪吧10 - 如何處理場景置中+旋轉

有了基本場景後 我們如何處理場景置中+旋轉呢? 利用 顯示視野旋轉範圍 <OrbitControls ref={ref_zero}...

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

[Day 貳拾貳] 來開發元宇宙中藥鋪吧10 - 蒸氣騰騰

import { Sky } from "@react-three/drei" <Suspense fallback={null...

2022-10-07 ‧ 由 DaYuan 分享
DAY 24

[Day 貳拾肆] 來開發元宇宙中藥鋪吧12 - 如何處理場景切換焦點與旋轉置焦點物間

我們這邊將改寫原本 本系列第10篇中使用的 <bounds/> 參考 https://github.com/pmndrs/drei#bounds...

2022-10-08 ‧ 由 DaYuan 分享
DAY 25

[Day 貳拾五] 來開發元宇宙中藥鋪吧14 - 建立測試空間

為了之後可以建立 中藥NFT盲盒 並且導入我們的 元宇宙中藥鋪所以開始建立一個 lab 動態讀取遠端 Gltf 素材 import { useLoader,...

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

[Day 貳拾陸] 來開發元宇宙中藥鋪吧14 - 中藥包NFT???

既然是元宇宙中藥鋪,中藥當然也是以 NFT 的方式販售啊XD 我們這次選擇的鏈為 polygon 使用 (MATIC 代幣) polygon 測試網為 (Mu...

2022-10-10 ‧ 由 DaYuan 分享
DAY 27

[Day 貳拾柒] 來開發元宇宙中藥鋪吧15 - 中藥包NFT?丟進去場景吧

想必家都做過 DoTO list 今天來做一個 3D 的 DoTO list 來作為場景模型管理器吧? import React from 'react'...

2022-10-11 ‧ 由 DaYuan 分享
DAY 28

DAY 28 [Day 貳拾捌] 來開發元宇宙中藥鋪吧16 - 中藥包NFT?場景編輯工具

利用 OrbitControlsTransformControls搭配zustand 跨階成組件 狀態管理lamina 控制面板 import React,...

2022-10-12 ‧ 由 DaYuan 分享
DAY 29

DAY 29 [Day 貳拾玖] 來開發元宇宙中藥鋪吧17 - 虛擬座標系統

利用調整座標系統可以讓我們做到物件放在固定的格線上面或者是格子裡面的效果 <Canvas> <場景>...

2022-10-13 ‧ 由 DaYuan 分享
DAY 30

DAY 30 [Day 貳拾玖] 來開發元宇宙中藥鋪吧18 - 後續發展

18 天過去,我們的元宇宙中藥鋪 依然在裝修中,後需預計推出,中藥 NFT 系統來完善 藥材 藥帖 藥包 藥舖 的世界觀 網路上常見的 3D 展場是如和處理物件...

2022-10-14 ‧ 由 DaYuan 分享