/// BASKET A: SPATIAL LOGIC
Galactic
Galactic
Station.
THREE.JS
VIRTUAL MALL
PROTOTYPING
The Hypothesis: Browsing vs. Searching (逛街 vs. 搜尋)
目前的電商平台是「效率導向」的 2D 列表,適合目的性購物。但我思考的是:能否在網頁中還原實體「逛街 (Strolling)」的樂趣?這不是要取代 Amazon,而是為「策展型銷售」尋找一種具備「空間敘事能力」的新 UI 邏輯。
The Tech Stack: Mobile-First Control (行動優先的控制邏輯)
開發 Web 3D 最大的挑戰不在渲染,而在於「互動」。 傳統的 WASD 鍵盤操作將手機用戶拒之門外。為此,我在此原型中實作了一套 「虛擬觸控搖桿 (Virtual Joystick)」 演算法:
- 左手拇指:控制物理位移 (前後左右)。
- 右手拇指:控制鏡頭視角 (Pan/Tilt)。 這讓網頁也能擁有原生 App 般的操控手感。

The Prototype: Galactic Station (銀河漂浮站)
這是一個漂浮於銀河系的實驗站點。
- Logic: Pointer Lock API (指標鎖定)
- Engine: Three.js (WebGL Standard)
- Assets: GLTF/GLB 輕量化模型
🚀 Ready to Launch?
點擊下方按鈕,開啟獨立視窗進入 Web 3D 虛擬商場。
(建議使用 Chrome / Safari 瀏覽器體驗最佳效能)
「Galactic Station」目前仍處於非常初期的階段,但已經實現了幾個重要的 Web 3D 基礎功能:
- 3D 場景渲染: 利用 Three.js 的 WebGL 技術,確保場景在主流瀏覽器上能載入和運行。
- 使用者漫遊體驗: 透過鍵盤或滑鼠的簡單操作,在虛擬的商場建築中移動、轉視角,體驗類似第一人稱遊戲的沉浸感。
- 未來的無限可能: 目前展示的是基礎結構,但已為未來加入更多的互動元素和光影效果打下了基礎。
相信未來電商的新形態有潛力成為「3D 版商城」:
- 招商進駐: 真實品牌未來可以在虛擬商場中擁有自己的 3D 店面。
- 真實逛街體驗: 用戶可以像在現實中一樣走進店裡,近距離觀看 3D 商品模型。
- 元宇宙入口: 作為未來元宇宙中的一個專屬「購物區域」,串接虛擬世界的社交與交易。
這是一場正在進行中的實驗,邀請您現在就踏入「Galactic Station」,親自體驗網頁 3D 互動的可能性!

