1. iTwin Viewer 入门

本节入门介绍旨在帮助您开始使用 iTwin 平台可视化组件。在本文档中,将向您介绍 iTwin Viewer,这是一个可自定义的查看器,提供用于查看基础架构数字孪生的基本工具和小部件,并可以使用 iTwin.js 扩展进一步扩展。

在介绍完成后,您将能够构建并运行用于查看基础结构数字孪生 (iTwin) 的 Web 应用。

1.1. 环境准备

1.2. 下载代码

iTwin Viewer 仓库可在 GitHub 上找到。要下载 iTwin Viewer 代码,请执行以下操作:

  1. 打开终端或命令提示符
  2. npx create-react-app your-app-name --template @itwin/web-viewer --scripts-version @bentley/react-scripts
    • 这将生成一个基于iTwin Viewer React 组件的新应用程序
    • 默认情况下,Viewer 将存储在名为 your-app-name 的目录中。

1.3. 注册应用程序

您需要在我的应用注册一个单页面应用程序(SPA)才能使用 iTwin 平台 API,也可以点击Get Started页面中的 Register 按钮自动创建,创建应用后得到的配置与接下来生成的iModel将和iTwin Viewer一起使用。

SPA注册成功后,将配置拷贝下来填到上一步下载的代码的.env文件中。

  • IMJS_AUTH_CLIENT_CLIENT_ID - 这是应用SPA的唯一标识符。在应用详细信息页面上显示为客户端 ID。
  • IMJS_AUTH_CLIENT_REDIRECT_URI - 指定用户在选择是否对应用进行身份验证后重定向到的位置。在应用详细信息页面上显示为重定向 URI 之一。
  • IMJS_AUTH_CLIENT_LOGOUT_URI - 指定注销后用户可以返回到的位置。在应用进程详细信息页面上显示为注销后重定向 URI 之一。
  • IMJS_AUTH_CLIENT_SCOPES - 授予应用的访问权限列表。在应用详细信息页面上显示为“范围”。

1.4. 创建iModel

查看工程设计图之前,需要将设计文件同步到iModel中,iModel是一个分布式关系数据库,其中包含有关在通用架构中定义的基础架构资产的信息。要了解更多信息,请单击此处。

点击 Get Started 页面中的 Create 按钮自动创建用于本快速入门的 iModel,创建完成后在 My iModels 页面中找到创建的 iModel。

同样,您也可以用自己的工程设计文件(DGN, RVT, SP3D等)手动创建 iModel:

  1. 跳转到 https://developer.bentley.com
  2. 单击登录按钮并使用您的 Bentley 帐户凭据登录(如果您尚未注册,请单击立即注册并完成注册过程)
  3. 单击您的用户图标并导航到 My iTwins 页面
  4. 点击 “+ New” 按创建按钮
  5. 为您的 itwin 命名
  6. 创建完成后,点击所创建的 iTwin 进入
  7. 点击 “+ New” 创建按钮
  8. 为您的 imodel 命名
  9. 选择 “Empty iModel ” ,需要在 Synchronizer 用自己的文件进行本地转换 , 如果您没有自己的工程设计文件,则可以选择 “Bentley Sample” 从 Bentley 示例创建 iModel,然后选择零售建筑示例模板
  10. 点按 “Save” 按钮并等待您的 iModel 创建完成

    iModel创建成功后,可以选择iModel卡片菜单的 “Copy IDs”,弹出IMJS_ITWIN_ID 和 IMJS_IMODEL_ID,将它们复制到从下载代码的.env文件中。

1.5. 运行代码

成功下载代码后,您就可以运行示例了。运行示例:

启动 Visual Studio 打开在上一步中创建的 your-app-name 目录。 接下来,您需要使用您在前面的步骤中创建的客户端和 iModel 信息或您帐户中的任何其他 SPA 应用进程和 iModel 配置应用进程。

打开 .env 文档 输入适当的值: IMJS_AUTH_CLIENT_CLIENT_ID:输入您在注册客户端步骤中注册的客户端的 ClientID IMJS_AUTH_CLIENT_REDIRECT_URI:输入您在注册客户端步骤中注册的客户端的重定向 URI IMJS_AUTH_CLIENT_LOGOUT_URI:输入您在注册客户端步骤中注册的客户端的注销后重定向 URI IMJS_AUTH_CLIENT_SCOPES:输入您在注册客户端步骤中注册的客户端的范围 IMJS_ITWIN_ID:输入在“创建 iModel”步骤中生成的 iTwinId IMJS_IMODEL_ID:输入在“创建 iModel”步骤中生成的 iModelID

从菜单栏“视图”>“终端”打开终端。

在终端窗口中,输入 npm start,就可以在浏览器对您创建的模型进行浏览。

results matching ""

    No results matching ""