用户指南 取消(C)

虚拟现实创作和发布

 

Animate 推出 VR 360 和 VR Panorama 文档类型,可帮助您轻松创建引人入胜的内容。此外,您还可以使用新的虚拟现实文档类型将 3D 模型(作为 .glb 文件)导入到 Animate 项目中并创建基于 3D 内容的动画。 

要预览以 VR 文档类型创建的内容,可以使用新引入的 VR View 面板。可以在 VR View 面板中单击并移动 MovieClip 实例。Animate 可以在您单击并移动对象时自动检测到它们。  可通过 VR 视图将对象置于 3D 空间之中。将对象(影片剪辑)置于 VR 视图时所产生的变化将会自动反映回 2D 舞台。您还可以在“时间轴”面板上将图层标记为纹理图层,以覆盖两种相应文档类型的圆柱体或球体。

通过 Animate,您还可以借助大量 API 在运行时管理虚拟现实动画。例如,可以在用户单击按钮时在虚拟现实环境中引入一些对象。 

Animate 中的虚拟现实 (360) 和虚拟现实(全景图)是 2018 年 10 月发行版的测试版内容。

虚拟现实文档类型

虚拟现实 (VR) 有两种文档类型:

VR Panorama

  • 使用此文档类型可为虚拟现实应用程序创建全景图内容。 
  • 在本文档类型中,直接在纹理图层上绘制的内容将覆盖在圆柱形上。
  • 您可以选择在纹理图层上使用全景图像,或者绘制背景。 
  • Animate 会将您创建的 2D 动画以及交互性转换为全景图内容。 

VR 360

  • 使用此文档类型可为虚拟现实应用程序创建 360 度内容。  
  • 在本文档类型中,直接在纹理图层上绘制的内容将会覆盖在球形上。
  • 可以选择使用矩形球面投影图像或绘制内容。 
  • Animate 会将您创建的 2D 动画以及交互性转换为 360 度内容。
启动屏幕中的 Virtual Reality 360 和全景图
启动屏幕中的 Virtual Reality 360 和全景图

创作和发布虚拟现实内容

使用以下步骤创建虚拟逼真Animate内容:

  1. 在舞台上导入 360 或全景图像作为背景。

    如果图像非常大,您可以调整舞台视图的大小。

    • 要设置大小,请选择“修改”>“文档”
    • 单击“匹配内容”

    选择位于窗口右上角的“舞台位于中央”图标,以将图像设置到屏幕的中心。

  2. 要将图层创建为纹理图层,请在时间轴面板中单击“为所有图层创建纹理环绕”图标,如下方屏幕截图所示:

    为图层创建纹理环绕
    为图层创建纹理环绕

    根据所选的文档类型,纹理图层会环绕圆柱形或球形。

  3. 将对象添加到舞台,根据您的资源向对象添加经典或补间动画,并创建动画。 

    VR 360 舞台
    VR 360 舞台

    上面的屏幕截图显示了 Animate 舞台视图,其中具有采用 VR 360 文档类型的矩形球面投影图像、沿引导运动路径飞翔的鸟和时间轴传统补间。 

  4. 使用“Windows”>“VR 视图”预览内容。

    使用“VR 视图”预览 VR 内容
    使用“VR 视图”预览 VR 内容

    单击“VR 视图”面板中的“启动 VR 视图”按钮。

    VR 视图面板
    VR 视图面板

    在 VR 视图预览模式下,要将内容重置为初始状态,请使用“重置”按钮。VR View 不会自动反映创作阶段的任何更改。要在舞台环境中查看已为资源应用的更改,请单击“刷新”

    VR 视图的“刷新并重置”选项
    VR 视图的“刷新并重置”选项

    可以在“预览”模式中移动 MovieClip 实例。当鼠标悬停在对象上时,Animate 会自动检测该对象。如下方屏幕截图所示,将鼠标悬停在对象上时,光标形状将变为十字图标。可以根据选定的文档类型,将对象沿圆柱形或球形路径移动。

    要在 VR View 周围平移,请单击预览屏幕并拖动。 

    用于移动对象的十字图标
    用于移动对象的十字图标

  5. 使用“文件”>“发布” Ctrl + Enter 发布内容。发布时,图像将覆盖在 Animate 中的圆柱形或球形网格上。您可以在这些图层上添加更多图层和动画内容。

    Virtual Reality 360 发布的输出示例如下面的动画 GIF 所示。 

    VR 360 输出样例
    VR 360 输出样例

    VR Panorama 输出样例
    VR Panorama 输出样例

    发布虚拟现实内容时,可以选择使用托管 JavaScript 库作为运行时。默认情况下,Animate 将运行时用于托管库中的已发布内容。如果要使用已发布的输出打包运行时,可以取消选中“发布设置”中的选项。 

    发布设置
    库的发布设置

通过虚拟现实将动画现代化

虚拟现实是市场上的主导趋势。想要创作虚拟现实内容? 在本示例结尾观看教程并按照这些步骤操作。

  1. 主页选项卡中,单击高级

  2. 选择“VR 全景图”,然后单击“创建”

如何使用 Animate 创建全景内容

观看视频以了解如何在全景图视图中添加更多效果,以提高虚拟体验。

WebGL-glTF 导出(标准和扩展)视频教程

视频显示了如何使用 WebGL-glTF 导出(标准和扩展)

使用 3D 内容

您可以使用虚拟现实文档类型将 3D 模型(.glb 文件)导入到 Animate 项目中并创建 3D 内容。

  1. 创建 VR (360) 预览或 VR(全景图)类型的文档。

  2. 选择“文件”>“导入”,然后浏览到 .glb 文件以导入到舞台或库。

    将 3D 内容导入到舞台
    将 3D 内容导入到舞台

  3. 添加与影片剪辑对象类似的动画和交互性,然后发布。

    您还可以在 VR View 中预览 3D 模型。

在运行时使用虚拟现实

通过 Animate,您还可以借助 API 在运行时管理虚拟现实动画。例如,可以在用户单击按钮时在 360 虚拟现实环境中引入一些对象。 

虚拟现实运行时 API 列表如下所示:

软件包:anWebgl

Properties

名称

类型 / 源文件

访问

描述

示例

Stage

Stage

读写

获取/设置舞台属性

anWebgl.stage

virtualCamera

VirtualCamera

读写

访问默认摄像头

anWebgl.virtualCamera

Root

MovieClip

只读

最上面显示对象(当前场景时间轴)。

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);

名称

类型 / 源文件

访问

描述

示例

X

Number

读写

在 X 轴上转换

var name =anWebgl.root.getChildByName("name");
name.x+=10;

 

Y

Number

读写

在 Y 轴上转换

var name = anWebgl.root.getChildByName("name");
name.y+=10;

 

Z

Number

读写

在 Z 轴上转换

var name = anWebgl.root.getChildByName("name");
name.z+=10;

 

scaleX

Number

读写

沿 X 轴缩放

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleX=2;

 

scaleY

Number

读写

沿 Y 轴缩放

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleY=10;

 

scaleZ

Number

读写

沿 Z 轴缩放

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleZ=10;

 

rotationX

Number

读写

绕 X 轴旋转

anWebgl.root.getChildByName("name").rotationX+=30;

(或者)

anWebgl.root.movieClip_name.rotationX+=30;

rotationY

Number

读写

绕 Y 轴旋转

anWebgl.root.getChildByName("name").rotationY+=30;

 

rotationZ

Number

读写

绕 Z 轴旋转

anWebgl.root.getChildByName("name").rotationZ+=30;

 

父级

DisplayObjectContainer

只读

父容器

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.parent)

 

可见

布尔值

读写

对象可见性

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

只读

舞台的宽度

anWebgl.stage.stageWidth

stageHeight

只读

舞台的高度

anWebgl.stage.stageHeight

颜色

读写

舞台的背景颜色

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();

 

更快、更轻松地获得帮助

新用户?