在舞台上导入 360 或全景图像作为背景。
上次更新日期：
2023年5月24日
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 度内容。
创作和发布虚拟现实内容
使用以下步骤创建虚拟逼真Animate内容：
如果图像非常大，您可以调整舞台视图的大小。
- 要设置大小，请选择“修改”>“文档”
- 单击“匹配内容”
选择位于窗口右上角的“舞台位于中央”图标，以将图像设置到屏幕的中心。
要将图层创建为纹理图层，请在时间轴面板中单击“为所有图层创建纹理环绕”图标，如下方屏幕截图所示：
根据所选的文档类型，纹理图层会环绕圆柱形或球形。
将对象添加到舞台，根据您的资源向对象添加经典或补间动画，并创建动画。
上面的屏幕截图显示了 Animate 舞台视图，其中具有采用 VR 360 文档类型的矩形球面投影图像、沿引导运动路径飞翔的鸟和时间轴传统补间。
使用“Windows”>“VR 视图”预览内容。
单击“VR 视图”面板中的“启动 VR 视图”按钮。
在 VR 视图预览模式下，要将内容重置为初始状态，请使用“重置”按钮。 VR View 不会自动反映创作阶段的任何更改。 要在舞台环境中查看已为资源应用的更改，请单击“刷新”。
可以在“预览”模式中移动 MovieClip 实例。 当鼠标悬停在对象上时，Animate 会自动检测该对象。 如下方屏幕截图所示，将鼠标悬停在对象上时，光标形状将变为十字图标。可以根据选定的文档类型，将对象沿圆柱形或球形路径移动。
要在 VR View 周围平移，请单击预览屏幕并拖动。
使用“文件”>“发布”或 Ctrl + Enter 发布内容。 发布时，图像将覆盖在 Animate 中的圆柱形或球形网格上。 您可以在这些图层上添加更多图层和动画内容。
Virtual Reality 360 发布的输出示例如下面的动画 GIF 所示。
发布虚拟现实内容时，可以选择使用托管 JavaScript 库作为运行时。 默认情况下，Animate 将运行时用于托管库中的已发布内容。 如果要使用已发布的输出打包运行时，可以取消选中“发布设置”中的选项。
通过虚拟现实将动画现代化
虚拟现实是市场上的主导趋势。 想要创作虚拟现实内容？ 在本示例结尾观看教程并按照这些步骤操作。
在主页选项卡中，单击高级。
选择“VR 全景图”，然后单击“创建”。
如何使用 Animate 创建全景内容
观看视频以了解如何在全景图视图中添加更多效果，以提高虚拟体验。
WebGL-glTF 导出（标准和扩展）视频教程
视频显示了如何使用 WebGL-glTF 导出（标准和扩展）
使用 3D 内容
您可以使用虚拟现实文档类型将 3D 模型（.glb 文件）导入到 Animate 项目中并创建 3D 内容。
创建 VR (360) 预览或 VR（全景图）类型的文档。
选择“文件”>“导入”，然后浏览到 .glb 文件以导入到舞台或库。
添加与影片剪辑对象类似的动画和交互性，然后发布。
也可以在VR视图中预览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); |
Name |
类型/类 |
访问 |
说明 |
示例 |
|---|---|---|---|---|
X |
Number |
读写 |
在 X 轴上转换 |
var name =anWebgl.root.getChildByName("name");
|
Y |
Number |
读写 |
在 Y 轴上转换 |
var name = anWebgl.root.getChildByName("name");
|
Z |
Number |
读写 |
在 Z 轴上转换 |
var name = anWebgl.root.getChildByName("name");
|
scaleX |
Number |
读写 |
沿 X 轴缩放 |
var root = anWebgl.root;
|
scaleY |
Number |
读写 |
沿 Y 轴缩放 |
var root = anWebgl.root;
|
scaleZ |
Number |
读写 |
沿 Z 轴缩放 |
var root = anWebgl.root;
|
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;
|
可见 |
Boolean |
读写 |
对象可见性 |
var root = anWebgl.root; |
类：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();
|
|
getPosition |
getPosition() |
使用指定摄像头当前位置的 x、y、z 属性返回对象。 |
let cam = anWebgl.virtualCamera.getCamera();
|
|
setPosition |
setPosition() |
将摄像头移动到输入参数指定的绝对位置。 默认值 = 0。 |
let cameraPos = {x: 10, y:10, z:10};
|
|
moveBy |
moveBy() |
相对于当前位置移动摄像头。 |
let moveByPos = {x: 10, y:10, z:10};
|
|
resetPosition |
resetPosition() |
将摄像头位置重置为原始位置，即 (0,0,0)。 |
|
|
SetRotation |
SetRotation() |
将摄像头按输入参数指定的绝对角度进行旋转。 |
let __rotation__ = {x: 10, y:10, z:10};
|
|
resetRotation |
resetRotation() |
将摄像头角度重置为零。 |
anWebgl.virtualCamera.getCamera().resetRotation();
|
