NFC GDG 社團邀請卡網站

一、 摘要

本專案旨在打造一個結合 NFC 技術與 3D 動效的社團宣傳及邀請卡網站——NFC GDG 社團邀請卡網站，用於提升社團活動的宣傳效果與參與者的專屬體驗。透過 NFC 卡感應，使用者可觸發網頁中的 3D 虛擬卡片，展示個人化資訊（姓名、郵件地址）及獨特的邀請卡號，營造強烈的儀式感與視覺吸引力。

專案整合以下技術模組：

• Three.js：實現高品質的 3D 卡片渲染與動態效果。
• GSAP：打造流暢的動畫過渡，提升視覺衝擊力。
• Nuxt 3：提供高效的全端框架，支援動態渲染與伺服器端處理。
• NFC 整合：透過 NFC 感應實現快速身份驗證與個人化體驗。

二、 動機

原本只是社團活動與校園嘉年華的宣傳單，後來大家想到用 NFC 邀請卡來取代傳統紙本傳單。但我心想，怎麼能只是掃描進入 IG 社群那麼無聊呢？既然要用 NFC，那就必須要「帥」一點、儀式感十足！於是我決定設計一個會跳出炫酷 3D 卡片的網頁，還能顯示專屬的卡號與個人資訊，讓每位參加者都能倍感尊榮及顯得獨特。。同時，這也是我練習 3D 技術和前端動效的一個好機會。透過這個專案，我希望提升自己在 Three.js 3D 渲染與 GSAP 動效上的掌握度，並優化 UI/UX 設計，讓使用者能享受到流暢且視覺吸引力十足的互動體驗。

三、 方法及步驟

系統設計

我們設計了一個基於 Nuxt 3 的全端架構，結合前端動效與後端資料處理，流程如下：

1. NFC 感應與身份驗證

• NFC 整合：使用 Web NFC API，當使用者以支援 NFC 的設備（如手機）感應卡片時，觸發網頁載入。
• 個人化資料：NFC 卡內儲存唯一識別碼，後端透過此碼查詢或生成個人化資訊（姓名、郵件地址、邀請卡號）。
• 安全性：採用簡單的 token 驗證，確保 NFC 感應資料不被濫用。

2. 3D 虛擬卡片渲染

• Three.js 實現：建構 3D 卡片模型，包含紋理映射（顯示姓名與卡號）與光影效果。
• 動態渲染：根據使用者輸入（或 NFC 資料），即時更新卡片上的文字與樣式。
• 相容性：優化 WebGL 渲染，確保在行動裝置與桌面瀏覽器上流暢運行。

3D 卡片渲染效果

3. GSAP 動畫過渡

• 動畫設計：使用 GSAP 實現卡片的彈出、旋轉與縮放動畫，營造炫酷的視覺效果。
• 流暢體驗：透過 GSAP 的時間軸（Timeline）控制動畫序列，確保過渡自然且無縫。
• 性能優化：限制動畫幀率與複雜度，減少資源消耗。

4. 使用者介面與互動

• UI 設計：採用簡潔的 Material Design 風格，搭配 3D 卡片作為核心視覺元素。
• 即時輸入：提供表單讓使用者輸入姓名與郵件地址，動態更新 3D 卡片內容。
• 響應式設計：確保網頁在不同設備（手機、平板、桌面）上均有良好體驗。