教程 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 场景。

书签

书签将直接导出到 Web 场景。 所有书签都将显示在 Web 查看器的书签菜单 书签 中。

当前视图

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

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

视图设置

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

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

场景光线和全景

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

注:

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

导出 .3ws

请确保所有图层均处于可见状态,然后拖动以选择场景中的所有模型。

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

    CityEngine 导出模型格式

常规导出选项

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

常规导出选项

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

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

注:

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

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

每个图层导出选项

下图显示了用于导出 Web 场景的每个图层选项:

CityEngine WebScene 每个图层导出选项

图层已启用

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

图层名称

将显示 CityEngine 场景中出现的图层的名称。

群组名称

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

状态

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 Web 场景中预览。 在系统文件浏览器(例如,File Explorer)中双击 .3ws 文件将不会启动 Web 查看器预览。

CityEngine Web 查看器

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

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

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

  • 将鼠标悬停在 Dev HQ 组上方,然后通过单击滑动按钮来启动滑动视图。

预览 Web 查看器中的 Esri 校园

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

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

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

您还可以执行以下操作:

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

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

发布到 ArcGIS Online

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

注:

此功能需要 ArcGIS Online 帐户。 可通过 arcgis.com 创建。

上传 Web 场景

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

ArcGIS Online 上的 Web 场景

上传完成后,Web 场景将在导航器中显示为您的门户中的项目。

已共享至 ArcGIS Online 的 Web 场景

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

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

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