8th Wall 教學

Author: Kelvin Huang

8th Wall 是一個 AR 遊戲開發的平台，可輕鬆製作真實世界 XR 與 3D 體驗。目前已有以下知名企業採用

Coca Cola / Dior / Ferrari / McDonald's / NETFLIX / NIKE / PRADA / Spotify / STARBUCKS / VOLVO / Walmart

Niantic Studio 是由 8th Wall 提供的線上開發工具，任何人都可以免費構建、原型化與部署個人 3D 和 XR 專案。

EVA AIR AR Sky Journey https://www.8thwall.com/g2studiosinc/evaair-ar [ ]

Garena Free Fire x McLaren https://www.8thwall.com/alivenow/freefire [ ]

The Hidden Shrine https://www.8thwall.com/designium/studio-japanese-shrine-visit [ ]

Face Drawing https://www.8thwall.com/designium/face-drawing [ ]

WigglesAR Snap https://www.8thwall.com/designium/wiggles-ar-snap [ ]

Alien Hunt AR https://www.8thwall.com/egorov/alien-hunt [ ]

Create Powerful XR

Create powerful Face Effects and World Effects with ease or access the code to make it your own.

Basic 基本版（免費）

Pro 專業版（每月 99 美元）

獨立遊戲、原型開發、教育訓練、個人專案

為您的公司或客戶開發商業專案

新！Niantic Studio 已內建 World Effects 與 Face Effects

VPS & Geospatial Browser

Backend Services

快速開發樣版與模組

專案於 8th Wall 網站代管

Projects published directly to your Public Profile

透過專案分享功能，將能與其他 Workspace 合作開發

顯示 8th Wall Splash Screen 畫面

除了基本版的項目，增加以下項目

商業授權

使用雲端編輯器建置，支援 3D 框架 ( AFrame, three.js )

Self hosting with local development

Connected domains

Optional Agency profile and feature projects in Discovery Hub

Private VPS

Image Target Management API

Project Library

點擊 Project Library 進入專案

您可以使用範例與模組來加速 WebAR 開發，每個專案可在 WebAR 預覽，

Modules 模組提供了可重覆使用的元件（程式碼資源）讓您的團隊可跨專案使用。

Empty Project 空白專案

Hotspots /

Call to Action /

Splash Screen /

Word Guesser [ https://www.8thwall.com/8thwall/word-guesser ]

Hello VPS [ https://www.8thwall.com/8thwall/hello-vps ]

VPS Bespoke [ https://www.8thwall.com/8thwall/studio-vps-bespoke ]

VPS Procedural [ https://www.8thwall.com/8thwall/studio-vps-procedural ]

Door Portal [ https://www.8thwall.com/8thwall/door-portal ]

Spatial Audio [ https://www.8thwall.com/8thwall/spatial-audio ]

This or That [ https://www.8thwall.com/playground/studio-this-or-that ]

External API [ https://www.8thwall.com/8thwall/external-api ]

Animated Shaders [ https://www.8thwall.com/8thwall/animated-shaders ]

Splat Playground / Vehicle Controller / Physics Playground /

Face Effects /

https://designcg.8thwall.app/demo-face-effects/

Camilo MEDINA 提供的互動範例

Studio: Gyroscope Controller [ https://www.8thwall.com/xradventure/gyroscope-controller ]

Studio: Player Controller [ https://www.8thwall.com/xradventure/player-controller ]

World Effects / Green Screen Video /

First Person Controller /

https://designcg.8thwall.app/demo-fps/

https://www.8thwall.com/designcg/demo-fps/studio 網址後面加進入工作室編輯模式

編輯完成後按下 Publish 點選 Publish 選項再按下 Publish 按鈕。

此時若進入網頁將出現以下錯誤訊息：

This experience is not available. It may have been removed or has not yet been published.

可自行更換圖片，尺寸 1200x630 px 以上

官方提供 3 個適用新手體驗的專案，包含：

1- "Hello, World" Niantic Studio

2- VPS Guided Tutorial

3- World Effects Guided Tutorial

發行設定

如果取消發行，訪客進入網址將無法顯示內容。

Set Staging Passcode 設定封測通行碼

8th Wall 功能展示

物件環繞

滾動的球 & 跟隨的攝影機

第一人稱角色 https://designcg.8thwall.app/kelvin-first-person-controller/

啟始畫面 https://www.8thwall.com/8thwall/splash-screen

下拉選單的 Entry Space 是預設的進入空間，執行 Create New Space 建立新空間（場景的概念）

此空間的 Splash Screen 物件套用的 splash-screen.ts 元件，參考以下設定：

Progress Text = Progress

Message Text = Message

Begin Message = Tap to begin

Starting Space Name = Default （輸入開啟的空間名稱）

播放影片 https://8thwall.8thwall.app/video-surface/

步驟 - 建立 Frame > Screen 物件，套用 video-surface.ts 腳本，指定播放的影片，可設定是否循環撥放、可否暫停、是否靜音。

點擊生成物件

按鈕開啟連結

Sha

8th Wall 教學

8th Wall 推薦遊戲

8th Wall 功能展示