1. iTwin Viewer 入门
本节入门介绍旨在帮助您开始使用 iTwin 平台可视化组件。在本文档中,将向您介绍 iTwin Viewer,这是一个可自定义的查看器,提供用于查看基础架构数字孪生的基本工具和小部件,并可以使用 iTwin.js 扩展进一步扩展。
在介绍完成后,您将能够构建并运行用于查看基础结构数字孪生 (iTwin) 的 Web 应用。
1.1. 环境准备
Node.js (v14.18.2)
Typescript (4.9.3)
Git
正版window环境
chrome 112.0.5615.138 或以上
IDE: 推荐Visual Studio Code
官网入门教程地址:https://developer.bentley.com/tutorials/web-application-quick-start/
1.2. 下载代码
iTwin Viewer 仓库可在 GitHub 上找到。要下载 iTwin Viewer 代码,请执行以下操作:
- 打开终端或命令提示符
- 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:
- 跳转到 https://developer.bentley.com
- 单击登录按钮并使用您的 Bentley 帐户凭据登录(如果您尚未注册,请单击立即注册并完成注册过程)
- 单击您的用户图标并导航到 My iTwins 页面
- 点击 “+ New” 按创建按钮
- 为您的 itwin 命名
- 创建完成后,点击所创建的 iTwin 进入
- 点击 “+ New” 创建按钮
- 为您的 imodel 命名
- 选择 “Empty iModel ” ,需要在 Synchronizer 用自己的文件进行本地转换 , 如果您没有自己的工程设计文件,则可以选择 “Bentley Sample” 从 Bentley 示例创建 iModel,然后选择零售建筑示例模板
点按 “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,就可以在浏览器对您创建的模型进行浏览。