教程 15:发布 Web 场景

Web 查看器

要访问 CityEngine 中的教程,请单击帮助 > 下载教程和示例...。 在选择教程或示例后,系统会自动下载工程并将其添加到工作空间。

将 CityEngine 场景导出至 Web 场景 (.3ws)

  • 打开场景 Esri_Campus.cej
  • 生成模型

场景图层

请查看一下场景中的各个图层:

场景对话框

图层设置对我们将要创建的 Web 场景而言至关重要,因为图层将像在 CityEngine 场景中一样显示在 Web 查看器中。

  • 场景中包含 Dev HQ 建筑物的五个图层:Exterior Walls、No Walls 以及分别针对三个楼层的楼层平面图图层。 No Walls 图层基本上为空图层;稍后我们会将其用于启动 Web 场景中的滑动视图。
  • Campus Buildings 和 Buildings Environment 中包含周围作为没有内部细节的外壳的建筑物。
  • Rocks、Trees 和 Light Poles 中包含加载其各自 3D 资产的点数据。

其他场景详细信息

除了实际的 3D 内容外,其他场景详细信息也将被导出到 Web 场景。

书签

CityEngine 书签书签将被直接导出到 Web 场景。 所有书签都将显示在 Web 查看器的书签菜单中(左上方的星形图标)。

当前视图

导出过程中当前显示的照相机视图(照相机位置和视图方向)将为在 Web 查看器中加载 Web 场景时的初始视图。 因此,建议在启动 Web 场景导出器之前选择一个好的视点。

以下阴影设置将导出到 Web 场景:

视图设置

视图设置视图设置将导出以下内容:

  • 阴影开/关 - 设置直接阴影的初始状态。
  • 环境光遮蔽开/关 - 设置散射阴影的初始状态。

场景光线和全景

位于场景光线和全景场景光线和全景设置中的四个环境光遮蔽设置将被导出到 Web 场景,并将被用于散射阴影设置

注:

Web 场景中的光照高度角和方位角可能会有所不同,因为 Web 查看器会根据在光照窗格中设置的世界位置和时间信息来自动设置光线。

导出 3ws

请确保所有图层均处于可见状态,并使用拖动选择来选择场景中的所有模型。

  1. 启动导出器文件 > 导出模型
  2. 选择 CityEngine WebScene

    CityEngine 导出模型格式

常规导出选项

下图显示了基本的导出选项:

常规导出选项

请确保将位置设置为当前工程的模型文件夹。

有关其他常规导出选项的详细信息,请参阅 CityEngine 帮助中的导出模型

注:

请特别注意简化地形网格选项。 启用此选项有助于缩减 .3ws 文件的大小。 对于分辨率高于 512x512 的地形,简化过程可能需要花费一段时间。 通常,可尝试设置较低的地形分辨率并启用地形简化。

对象交互对象元数据纹理设置将定义所有图层的默认行为。

每个图层导出选项

CityEngine WebScene 每个图层导出选项

图层已启用

请检查第一列以验证是否将导出所有图层。 如果缺少一个复选框,则表示未选择该图层的对象进行导出(或该图层不可见)。

图层名称

与 CityEngine 场景中的名称相同的图层名称。

群组名称

请将 Exterior Walls 和 No Walls 图层的图层组名称设置为 Dev HQ。 此举将在 Web 查看器中为这两个图层启用滑动视图。

State

Panorama 和 Terrain 图层的图层状态将自动设置为背景。 这意味着这些图层将始终处于可见状态,且不会出现在图层列表中。 通过将 No Walls 设置为“隐藏”,我们可以确保 Dev HQ 组的初始可见性为显示 Exterior Walls 图层。

交互

系统不支持选择背景图层,并会自动将其设置为锁定。 所有其他图层都将默认使用“场景设置”(已在先前的对话框中设置为“可选取”)。

元数据

我们只想在 Campus buildings 上显示元数据,因此请为所有其他图层设置“无”。 在先前的对话框中,“场景设置”已被设置为“全部”。

纹理

系统专门为地形准备了 JPG 纹理,并将其设置为地形图层上的“纹理”。 因此,我们可以对地形图层使用“纹理质量”选项“原始纹理”。 其他图层将使用“场景设置”(已在先前的对话框中设置为“紧凑”)。

注:

仅可在具有专门准备的纹理的图层上使用“原始”纹理质量。 WebGL 仅支持 PNG 和 JPG 纹理;其他图像格式(例如 TIFF)将显示为黑色。 当使用未准备的纹理时,请将纹理质量选项设置为“高”、“中”、“低”、“大小的一半”或“紧凑”(推荐)。

单击完成开始导出过程。 导出器将在所选的输出目录中创建一个 Web 场景文件 (.3ws)。

本地预览 Web 场景

发布 Web 场景之前,建议先在本地对其进行预览。 这样,您就可以确保正确地执行导出和图层设置,并能够验证 Web 场景是否按照预期显示。

  • 导航器中定位导出的 Web 场景(.3ws 文件)。
  • 单击右键并选择打开

该操作将打开您的 Web 浏览器,并用新的 Web 场景来加载 CityEngine Web 查看器。 预览将在系统默认浏览器中加载。 如果您希望在其他浏览器中进行预览(如果默认浏览器不支持 WebGL),则可以更改系统默认浏览器,或复制和粘贴所需浏览器的 URL。

默认情况下,Web 场景预览将在本地加载 Web 查看器,但它可以从 ArcGIS Online 远程访问 Web 查看器应用程序。 或者,您可以在离线模式下启动 Web 场景预览,如下所示:

  • 导航器中,右键单击 Web 场景(.3ws 文件)。
  • 在快捷菜单中,选择“使用 3D Web 场景查看器(离线)打开”。
注:

Web 场景只能在 CityEngine 导航器的 CityEngine Web 场景中进行预览。 在系统文件浏览器(例如 Windows 资源管理器)中双击 .3ws 文件将不会启动 Web 查看器预览。

CityEngine Web 查看器

在预览 Web 查看器中显示的 Web 场景如下:

在预览 Web 查看器中显示的 Web 场景

请检查图层是否已按需要显示。 请注意图层组 Dev HQ 如何显示为单选组。

  • 将鼠标悬停在组 Dev HQ 上方,并通过单击滑动图标来启动滑动视图

预览 Web 查看器中的 Esri 校园

滑动视图将在左侧显示“外墙”,并在右侧显示“无墙”。

请确保在 CityEngine Web 查看器中按预期显示书签。 将鼠标悬停在 3D 视窗上方将显示书签栏。 使用播放按钮可播放对书签视图的浏览。

CityEngine Web 查看器播放按钮

其他操作:

3D 视窗可显示书签栏播放按钮

  • 选择其中一个校园建筑物,然后在信息窗格中找到其他元数据。
  • 在设置窗格中打开和关闭直接阴影和散射阴影。
  • 在图层窗格中,隐藏楼层 1 和 3 以查看楼层 2 的详细信息。
  • 在搜索窗格中,搜索 "restroom"。

可以在 ArcGIS Online 帮助中找到有关 CityEngine Web 查看器的更多详细信息。

发布到 ArcGIS Online

可以将 CityEngine Web 场景上传到 ArcGIS Online,在这里您可以轻松将其与所选用户或公众进行共享。

注:

此功能需要 ArcGIS Online 帐户。 请在此处进行创建。

上传

  1. 导航器中找到 .3ws 文件。
  2. 右键单击该文件,然后选择共享为
    该操作将显示 CityEngine Web 场景包向导。
    CityEngine Web 场景包向导
  3. 选中将包上传到我的 ArcGIS Online 帐户。
  4. 为 Web 场景命名,或使用建议名称。
  5. 选择项目描述选项卡。
    Web 场景包向导“项目描述”选项卡
  6. 为 Web 场景项目输入摘要。
  7. 选择或输入 Web 场景项目的标签。
  8. 单击共享
    如果您尚未登录,CityEngine 将显示 ArcGIS Online 的登录对话框。ArcGIS Onlne 登录
  9. 输入您的凭据并登录。
  10. CityEngine 会将您的 Web 场景上传到 ArcGIS Online 帐户。

ArcGIS Online 上的 Web 场景

上传完成后,Web 场景将作为一个项目显示在导航器中的“门户-我的内容”中。

已共享至 Online 的 Webscene

  1. 右键单击该项目,然后选择在浏览器中打开
    ArcGIS Online 项目描述页面
  2. 单击编辑缩略图,然后设置缩略图(例如从工程图像文件夹中)。
  3. 单击共享,以便为所选群组或公众设置访问权限。
  4. 单击查看应用程序,以便在 ArcGIS Online 上使用 Esri 校园 Web 场景来启动 Web 查看器

如果您的项目为公开项目,则可以使用 CityEngine Web 查看器标题中的共享按钮在 Facebook 上共享此 Web 场景、在 Twitter 上发布、作为电子邮件发送、共享链接本身或将其嵌入到 Web 页面中。

CityEngine Web 查看器中的“共享”窗格