使用手冊取消

虛擬實境編寫和發佈

搜尋

上次更新時間 2022年2月10日

Animate 引進 VR 360 和 VR 全景文件類型，可協助您輕鬆地建立吸引人的內容。此外，您也可以使用新的虛擬實境文件類型，將 3D 模型 (例如 .glb 檔案) 匯入您的 Animate 專案並在 3D 內容上建立動畫。

若要預覽以 VR 文件類型建立的內容，您可以使用新引進的「VR 檢視」面板。您可以在「VR 檢視」面板中按一下並移動 MovieClip 實體。當您按一下並四處移動物件時，Animate 會自動偵測物件。「VR 檢視」可讓您將物件放置在 3D 空間裡。對「VR 檢視」中物件 (影片片段) 放置的變更會自動反映回 2D 舞台。此外，您也可以在「時間軸」面板上，將圖層標記為紋理圖層，以便在圓柱體或圓球上彎曲，做為兩個不同的文件類型之用。

此外，Animate 還可讓您透過一組豐富的 API 的協助，在執行階段管理虛擬實境動畫。例如，您可以在使用者按一下按鈕時在虛擬實境環境中引入一些物件。

Animate 中的虛擬實境 (360) 和虛擬實境 (全景) 是 2018 年 10 月發行的 Beta 版本。

虛擬實境文件類型

虛擬實境 (VR) 有兩個文件類型：

VR 全景

使用這個文件類型可以為虛擬實境應用程式建立全景內容。
在這個文件類型中，直接在紋理圖層上繪製的內容會在圓柱體上彎曲。
您可以選擇讓紋理圖層具有全景影像，或是要繪製背景。
Animate 會將您建立的 2D 動畫轉換為全景內容及互動功能。

VR 360

使用這個文件類型可以為虛擬實境應用程式建立 360 度內容。
在這個文件類型中，直接在紋理圖層上繪製的內容會在圓球上彎曲。
您可以選擇具有等量矩形影像或是繪製內容。
Animate 會將您建立的 2D 動畫轉換為 360 度內容及互動功能。

編寫和發佈虛擬實境內容

請使用下列步驟，在 Animate 中建立虛擬實境內容：

在舞台上匯入 360 或全景影像，做為背景。
如果影像大小不小，您可以調整舞台檢視的大小。
- 若要設定大小，請選取「修改 > 文件」
- 按一下「符合內容」
選擇視窗右上角的「舞台置中」，將影像設定在畫面中央。
若要將圖層建立做為紋理圖層，請按一下時間軸面板中的「為所有圖層建立紋理換行」圖示，如下列螢幕快照所示：

為圖層建立紋理換行

紋理圖層會沿著圓柱體或圓球彎曲，視所選的文件類型而定。
在舞台增加物件，視您的資源而定，為物件增加傳統或移動補間動畫，然後建立您的動畫。

VR 360 舞台

上面的螢幕擷取畫面示範 Animate 的配置檢視，即 VR 360 文件類型中的等量矩形影像、小鳥與導引的移動路徑，以及時間軸中的傳統補間動畫。
使用「視窗 > VR 檢視」預覽內容。

使用「VR 檢視」預覽 VR 內容

按一下「VR 檢視」面板中的「啟動 VR 檢視」按鈕。

「VR 檢視」面板

在「VR 檢視」預覽模式中，若要將內容重設為初始狀態，請使用「重設」按鈕。「VR 檢視」不會自動反映編寫舞台上的任何變更。若要在配置環境檢視您的資源上套用的變更，請按一下「重新整理」。

「VR 檢視」的「重新整理」和「重設」選項

您可以在預覽面板中移動 MovieClip 實體。當您將滑鼠停留在物件上方時，Animate 會自動偵測物件。當您如下面螢幕快照所示，將滑鼠停留在物件上方時，游標形狀會變成橫線圖示。視選取的文件類型而定，您可以沿著圓柱體或圓球路徑移動物件。

若要圍繞「VR 檢視」視窗平移，請按一下預覽畫面並進行拖曳。

可移動物件的橫線圖示
使用「檔案 > 發佈」或 Ctrl + Enter，以發佈內容。發佈時，影像會在 Animate 的圓柱體或圓球網格上彎曲。您可以在那些圖層增加更多圖層和動畫內容。

範例 Virtual Reality 360 發佈的輸出如下面的動畫 GIF 所示。

VR 360 輸出範例

VR 全景輸出範例

當您發佈虛擬實境內容時，可以選擇使用裝載的 JavaScript 元件庫做為執行階段。根據預設，Animate 會針對發佈的內容使用裝載的元件庫中的執行階段。如果您希望將執行階段與所發佈的輸出一起封裝，可以在「發佈設定」中取消核取選項。

元件庫的發佈設定

使用虛擬實境將動畫現代化

虛擬實境是市場中的主要趨勢。想要為您的內容帶來虛擬實境嗎？請觀賞此範例結尾的教學課程並依照下列步驟執行。

在「首頁」索引標籤中，按一下「進階」。
選取「VR 全景」並按一下「建立」。

如何使用 Animate 建立全景內容

請觀看影片，以了解如何在全景檢視中加入更多效果，以提升虛擬體驗。

關於 WebGL-glTF 匯出 (標準和延伸) 的影片教學課程

影片示範如何使用 WebGL-glTF 匯出 (標準和延伸)

使用 3D 內容

您可以使用虛擬實境文件類型，將 3D 模型內容 (.glb 檔案) 匯入您的 Animate 專案並建立 3D 內容。

建立 VR (360) 預覽或 VR (全景) 類型的文件。
選擇「檔案 > 匯入」並瀏覽至 .glb 檔案，以匯入舞台或元件庫。

將 3D 內容匯入舞台
與影片片段物件相似，增加動畫和互動功能並進行發佈。

此外，您也可以在「VR 檢視」中預覽 3D 模型。

在執行階段使用虛擬實境

此外，Animate 還可讓您透過 API 的協助，在執行階段管理虛擬實境動畫。例如，您可以在使用者按一下按鈕時在 360 虛擬實境環境中引入一些物件。

虛擬實境執行階段 API 的清單如下所列：

套件：anWebgl

Properties

名稱	類型 / Class	存取	說明	範例
Stage	Stage	RW	取得/設定舞台屬性	anWebgl.stage
virtualCamera	VirtualCamera	RW	存取預設攝影機	anWebgl.virtualCamera
Root	MovieClip	RO	最常使用的顯示物件 (「目前場景」時間軸)。	anWebgl.root

方法

名稱	原型製作	說明	範例
addGLBFile	addGLBFile(filePath: string, successCallback : function, errorCallback : function):void	從指定的 GLB 檔案載入 3D 模型	anWebgl.addGLBFile("model.glb" , successCallbackFunction, errorCallbackFunction).
playAll	playAll() : void	播放包含根目錄在內所有影片片段的動畫	anWebgl.playAll();
stopAll	stopAll():void	停止包含根目錄在內所有影片片段的動畫	anWebgl.stopAll();

類別：MovieClip

繼承：DisplayObjectContainer

Properties

方法

名稱	原型製作	說明	範例
Play	play(): void	播放影片片段的動畫。	anWebgl.root.getChildByName("name").play(); (或) this.play();
Stop	stop(): void	停止影片片段的動畫。	anWebgl.root.getChildByName("name").stop();
playAll	playAll() : void	播放包含根目錄在內所有影片片段的動畫。	anWebgl.root.getChildAt(0).playAll();
stopAll	stopAll():void	停止包含根目錄在內所有影片片段的動畫。	anWebgl.root.getChildAt(0)).stopAll();

類別：DisplayObject

繼承：IEventDispatcher

名稱	原型製作	說明	範例
hitTestPoint	hitTestPoint(x, y, Boolean)	根據點擊物件的類型，傳回 displayObject/displayObjectContainer/movieClip。 x 和 y 是畫面上的點座標。	anWebgl.root.hitTestPoint(300, 200, true, false);

名稱	類型 / Class	存取	說明	範例
X	Number	RW	X 軸上的轉譯	var name =anWebgl.root.getChildByName("name"); name.x+=10;
Y	Number	RW	Y 軸上的轉譯	var name = anWebgl.root.getChildByName("name"); name.y+=10;
Z	Number	RW	Z 軸上的轉譯	var name = anWebgl.root.getChildByName("name"); name.z+=10;
scaleX	Number	RW	沿著 X 軸縮放	var root = anWebgl.root; var child = root.getChildAt(0); child.scaleX=2;
scaleY	Number	RW	沿著 Y 軸縮放	var root = anWebgl.root; var child = root.getChildAt(0); child.scaleY=10;
scaleZ	Number	RW	沿著 Z 軸縮放	var root = anWebgl.root; var child = root.getChildAt(0); child.scaleZ=10;
rotationX	Number	RW	沿著 X 軸旋轉	anWebgl.root.getChildByName("name").rotationX+=30; (或) anWebgl.root.movieClip_name.rotationX+=30;
rotationY	Number	RW	沿著 Y 軸旋轉	anWebgl.root.getChildByName("name").rotationY+=30;
rotationZ	Number	RW	沿著 Z 軸旋轉	anWebgl.root.getChildByName("name").rotationZ+=30;
Parent	DisplayObjectContainer	RO	父輩容器	var root = anWebgl.root; var child = root.getChildAt(0); console.log(child.parent)
Visible	Boolean	RW	物件可見度	var root = anWebgl.root; var child = root.getChildAt(0); console.log(child.visible);

類別：DisplayObjectContainer

繼承：DisplayObject

名稱	原型製作	說明	範例
numChildren	numChildren:num	傳回物件的子系數目	anWebgl.root.movieClipInstanceName.numChildren;
removeChild	removeChild(obj:DisplayObject):void	移除引數物件 (若有)	anWebgl.root.movieClipInstanceName.removeChild(childObj);
Contains	contains(obj:DisplayObject):boolean	如果引數物件為子系，則傳回 true，否則傳回 false	anWebgl.root.movieClipInstanceName.contains(childObj);
getChildAt	getChildAt(index:Number): DisplayObject	傳回位於引數索引的子系	anWebgl.root.movieClipInstanceName.getChildAt(2);
getChildByName	getChildByName(name:String):DisplayObject	傳回具有引數名稱的子系 (若存在)	anWebgl.root.movieClipInstanceName.getChildByName(childName);

類別：Stage

Properties

名稱	存取	說明	範例
stageWidth	RO	舞台的寬度	anWebgl.stage.stageWidth
stageHeight	RO	舞台的高度	anWebgl.stage.stageHeight
Color	RW	舞台背景的顏色	anWebgl.stage.color

類別：VirtualCamera

方法

名稱	原型製作	說明	範例
getCamera	getCamera()	取得攝影機物件。為了在執行階段取得或設定攝影機屬性。	let cam = anWebgl.virtualCamera.getCamera(); let pos = cam.getPosition(); console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);
getPosition	getPosition()	使用指定攝影機目前位置的 x、y、z 屬性回到物件。	let cam = anWebgl.virtualCamera.getCamera(); let pos = cam.getPosition(); console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);
setPosition	setPosition()	透過輸入參數的方式將攝影機移動至絕對位置。預設值 = 0。	let cameraPos = {x: 10, y:10, z:10}; anWebgl.virtualCamera.getCamera().setPosition(cameraPos);
moveBy	moveBy()	將攝影機移到相對於目前位置的位置。	let moveByPos = {x: 10, y:10, z:10}; anWebgl.virtualCamera.getCamera().moveBy(moveByPos);
resetPosition	resetPosition()	將攝影機重設至原始位置，即 (0,0,0)。	anWebgl.virtualCamera.getCamera().resetPosition();
SetRotation	SetRotation()	透過輸入參數的方式將攝影機旋轉至絕對角度。	let __rotation__ = {x: 10, y:10, z:10}; anWebgl.virtualCamera.getCamera().setRotation(__rotation__);
resetRotation	resetRotation()	將攝影機角度重設為零。	anWebgl.virtualCamera.getCamera().resetRotation();

更快、更輕鬆地獲得協助

新的使用者？

虛擬實境編寫和發佈

虛擬實境文件類型

VR 全景

VR 360

編寫和發佈虛擬實境內容

使用虛擬實境將動畫現代化

如何使用 Animate 建立全景內容

關於 WebGL-glTF 匯出 (標準和延伸) 的影片教學課程

使用 3D 內容

在執行階段使用虛擬實境

更多類似項目

更快、更輕鬆地獲得協助

詢問社群

聯絡我們