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 ""