i3D Creator 用户操作手册

    目录


    产品概述

    i3D Creator 是一款专业级三维造型内核与编辑引擎,聚焦于工业设计全流程,为工程师提供从草图到三维装配的一站式零件设计工具,同时支持对交付后的工业模型进行轻量化局部增量更新和再编辑,实现设计方与客户端的无缝协作迭代。

    用户界面介绍

    i3D Creator 包含三个用户交互界面,分别为草图、造型和装配。

    草图

    用户可通过草图绘制模块辅助三维造型,支持多种基础图元(直线、圆弧、曲线等)及丰富的交互操作。

    草图入口

    系统默认进入造型界面,您可以通过以下两种方式切换至草图绘制界面:

    1. 在层级管理面板中,右键点击基准面,选择“绘制草图”菜单进入;
    2. 在三维视图中,右键点击基准面,选择“绘制草图”菜单进入;

    草图绘制界面介绍


    ① 草图工具栏
    ② 画布区域
    ③ 属性面板
    ④AI 绘图工具
    ⑤ 状态显示区域

    绘制工具介绍

    绘制流程说明:

    1. 选择所需绘图工具。
    2. 鼠标左键点击画布,依次选取关键点开始绘制。
    3. 当满足该图形的绘制条件时,系统会自动结束绘制;部分图形可通过鼠标右键手动结束。

    各工具说明:

    1. 直线(快捷键 L):点击两个点绘制一条直线。若第二点为左键点击,则自动进入连续绘制模式,可连续绘制多条直线,右键点击结束连续绘制。
    2. 多段线:可连续点击多个点绘制折线,右键点击结束。支持拟合和可选闭合功能。
    3. 圆弧:依次点击两个点,分别作为圆弧的起点和终点,自动生成圆弧。
    4. 多边形:点击两个及以上的点,自动生成闭合多边形,右键点击结束。
    5. 平滑曲线:点击多个点绘制平滑曲线,右键点击结束。
    6. 二次贝塞尔曲线:依次点击三个点,分别为起点、控制点、终点,自动结束绘制。
    7. 三次贝塞尔曲线:依次点击四个点,分别为起点、控制点 1、控制点 2、终点,自动结束绘制。
    8. 正方形:点击第一个点作为左下角,第二个点作为右上角,自动绘制并结束。
    9. 长方形:(快捷键 R)点击第一个点作为左下角,第二个点确定宽度(此时锁定水平),第三个点确定高度(此时锁定垂直),自动绘制并结束。
    10. 圆形:(快捷键 C)点击第一个点作为圆心,第二个点确定半径,自动绘制并结束。
    11. 椭圆:点击第一个点作为椭圆中心,第二个点确定 x 轴半径,第三个点确定 y 轴半径,自动绘制并结束。
    12. 胶囊:点击第一个点为左侧中心,第二个点为右侧中心,第三个点确定半径,自动绘制并结束。

    温馨提示:部分图形(如直线、多段线、平滑曲线、多边形)支持连续绘制,右键点击可随时结束当前绘制操作。

    辅助工具介绍

    目前支持两种辅助工具,分别是辅助线和标注。

    • 辅助线:(快捷键 P)用于在草图中绘制参考线,辅助定位和对齐其他图形元素,不参与最终建模。辅助线可任意绘制,支持吸附,便于实现精确的几何关系。
    • 标注:(快捷键 E)用于在草图中添加尺寸标注,显示两点之间的距离。标注可帮助用户直观了解图形的尺寸信息,并可作为后续参数化建模的依据。添加标注时,依次点击需要标注的两个点,系统会自动生成标注线和尺寸数值。

    温馨提示:辅助工具不会影响最终三维模型,仅作为绘图和设计过程中的参考与约束依据。

    几何约束

    几何约束用于精确控制草图中图形元素之间的几何关系,提升绘图的准确性和参数化能力。支持的约束类型如下:

    1. 水平约束(快捷键 H):绘制时激活后,当前选取的点将自动锁定在水平方向移动,便于绘制水平线段或对齐元素。
    2. 垂直约束(快捷键 V):绘制时激活后,当前选取的点将自动锁定在垂直方向移动,便于绘制垂直线段或对齐元素。
    3. 端点重合:将两个图形的端点约束为重合,常用于连接线段或封闭多边形。
    4. 同心约束:使两个具有圆心的图形(如圆、圆弧、椭圆)圆心重合,确保它们共用同一个中心点。
    5. 垂直约束:约束两条直线互相垂直,常用于绘制正交结构。
    6. 平行约束:约束两条直线保持平行关系,适用于需要等距或方向一致的结构。
    7. 相等约束:约束两个相同类型的图形(如两条线段、两个圆)在长度、半径等属性上保持一致。
    8. 设为孔:选择一个闭合图形,设置为孔;

    温馨提示:添加约束后,相关图形会自动调整以满足约束条件,便于后续参数化修改和精确建模。

    高级功能

    1. 闭合线转面(快捷键 I):选择一个或多个闭合的线条(可包含内部的孔),自动生成对应的平面模型。适用于将草图中的封闭区域快速转换为面片,便于后续三维建模操作。
    2. 线交点切割(快捷键 T):选择两条或多条相交的线段,系统会根据所有交点自动将线段切割成多个小段。适用于复杂草图中需要分割线段以便进一步编辑的场景。
    3. 线合并(快捷键 M):选择多条连续且端点相连的线段,自动合并为一条完整的线。适用于将多段线或被切割后的线段重新合并,便于后续操作和约束。

    温馨提示:高级功能可通过工具栏按钮或对应快捷键快速调用,提升草图编辑效率。如遇无法操作,请检查所选对象是否满足功能要求(如线段需闭合、端点需相连等)。

    属性编辑

    双击任意图形,即可弹出属性面板。您可以在面板中直接修改参数,实时更新图形属性。

    草图界面与键盘交互说明

    1. 拖动画布元素:按住鼠标左键选中图形并拖动,实现图形的移动,松开鼠标即可释放。
    2. 平移画布:按住Space键,同时拖动鼠标左键,可整体平移画布,方便浏览不同区域。
    3. 多选图形:按住Ctrl键,点击或框选多个图形,实现批量选择,便于统一编辑。
    4. 取消选择:按住Shift键,点击或框选已选中的图形,可取消对这些图形的选择。
    5. 快捷菜单:选中图形后,右键点击画布,弹出快捷菜单,快速访问常用操作(如添加约束、删除等)。
    6. 复制粘贴:选中图形后,按Ctrl+C复制,按Ctrl+V粘贴,实现图形的快速复制。

    温馨提示:灵活运用键盘与鼠标的组合操作,可大幅提升草图绘制与编辑的效率。

    案例演示

    案例一:绘制带孔法兰盘(外径 20,内径 10,4 个固定孔,孔半径 2)

    1. 在坐标原点 [0,0] 处绘制一个半径为 20 的圆。
    2. 在同一圆心位置绘制一个半径为 10 的内圆,并将其设置为孔。
    3. 分别在 [-15,0]、[15,0]、[0,15]、[0,-15] 位置绘制四个半径为 2 的圆,并设置为孔。
    4. 框选所有图形,按下快捷键 I 或点击“高级功能”中的“闭合线转面”,自动生成平面。
    5. 点击左上角保存按钮,进入造型界面,选中面片,使用“平面拉伸”算法生成三维模型。

    案例二:绘制简单苹果模型

    1. 使用多段线工具描绘苹果的半边轮廓,并在属性面板中将其设置为“拟合”曲线。
    2. 保存草图至造型界面,选中轮廓线,使用“线造型”中的“旋转成型”功能,快速生成苹果三维模型。

    草图 AI 智能绘图

    只需输入自然语言描述,即可自动生成草图图形。例如:“画一个半径为 20 的圆,旁边加一个长方形”。支持连续对话,随时补充、修改或撤销图形内容,极大提升建模效率。

    • 点击“完成”按钮,确认并保留本次 AI 绘制的所有图形。
    • 点击“关闭”按钮,放弃本轮 AI 绘制,画布将自动清除本次生成的图形。

    温馨提示:AI 绘图支持多轮对话,适合快速搭建草图初稿或进行参数化修改。AI 也可能会犯错,请注意核查参数信息。

    装配界面

    装配界面用于组装零件和查看装配体,支持对装配体进行旋转、缩放、平移等操作,支持对装配体进行约束操作,支持对装配体进行局部更新操作。

    装配导入零件

    1. 点击左上角文件菜单按钮,选择导入,根据类型导入外部零件。
    2. 选择工具类中的类元库,点击导入到装配场景中。
    3. 点击工具栏添加按钮,添加基本几何体。

    设置游标位置

    按下鼠标中键,可以设置当前游标位置,导入的零件默认在游标位置出现。

    类元库

    • 类元库为工业矢量参数零件库,支持多种格式零件,可以根据行业定制。

    • 在桌面端中,类元库直接打包在应用中,可以根据不同需求发布不同版本。

    • 云版本使用云端类元库,类元库会不断扩展补充各行业标准矢量模型。

    • 支持在未拖入场景时查看零件属性或预览零件,支持搜索零件。

    • 临时零件库
      在造型和装配中都可以通过模型树的右键菜单,或其他右键选中模型菜单,将零件加入到临时零件库,供装配使用。

    模型多选操作

    按住 Ctrl 键,鼠标移入模型,会高亮当前模型和鼠标移入的面,点击即可选择当前模型和对应的面,重复操作可多选模型,进行批量操作。当重复点击已选中的模型会更新当前模型的排序和面。点击空白区域清除全部选择。

    装配约束模块

    装配约束功能用于定义零部件在装配体中的相对位置运动关系,确保组件按设计意图正确组装并保持特定几何关系。

    约束类型列表
    • 轴向对齐:使两个圆柱体/旋转体的中心轴重合,需要选中以下模型类型中的任意两个:直管、焊缝、变径管、几何模型并选中带圆形的面。
    • 端点贴合:将两个模型的顶点或端点或中心点重合,需要选中以下模型类型中的任意两个:直管、弯管、焊缝、变径管、带面的几何模型。
    • 面平行:使两个平面保持平行关系,需要选中以下模型类型中的任意两个:带面的几何模型。
    • 面垂直:使两个平面形成 90° 夹角,需要选中以下模型类型中的任意两个:带面的几何模型。
    • 共面:使两个平面位于同一无限延伸平面上,需要选中以下模型类型中的任意两个:带面的几何模型。
    • 面同心:使两个面中心点重合,需要选中以下模型类型中的任意两个:带面的几何模型。
    装配约束操作步骤
    1. 选择模型

      • 按住 Ctrl 键并分别点击需要约束的两个模型
      • 支持选择面、和实体模型
    2. 应用约束

      • 在顶部工具栏选选择"装配约束" > 指定约束类型
    3. 约束生效

      • 模型将根据约束类型自动调整位置
      • 约束关系显示在约束面板中
    约束操作提示

    当出现以下情况时系统将弹出提示:
    ⚠️ 未选择两个模型:需同时选择两个组件
    ⚠️ 约束冲突:新约束与现有约束发生冲突
    ⚠️ 超过选择上限:一次只能选择两个模型进行约束
    约束成功:显示绿色标识及约束类型名称

    删除约束操作
    1. 在装配体中单击目标模型
    2. 右侧打开属性面板
    3. 切换到「约束」标签页
    4. 在约束列表中找到目标约束项
    5. 点击(🗑️ 图标)按钮
    6. 确认删除后模型恢复自由状态
    约束限制
    1. 已被锁定的模型不能进行约束
    2. 同类型在两个模型身上只能添加一次

    装配辅助工具模块

    管道绘制
    1. 辅助工具中选择管道绘制工具
    2. 选择类型,设置半径等参数,点击开始进行绘制
    3. 绘制完成后,点击右键结束
    4. 绘制完成后会得到一个对应类型的管道和相关控制点
    5. 通过移动控制点可以对管道位置进行调整
    6. 通过约束对管道进行拼接,完成管道系统的组装
    管道切割
    1. 辅助工具中选择管道切割工具
    2. 点击一根绘制的管道,在点击位置对管道进行切割成三个独立对象
    3. 分布为两端管道和用于连接的焊缝
    模型合并
    1. 按住 Ctrl 键,点击选择多个模型,进行合并
    2. 辅助工具中选择模型合并工具完成合并
    模型拆分
    1. 点击选择一个等待拆分的模型
    2. 辅助工具中选择模型拆分工具完成拆分
    3. 在层级管理中可查看拆分后的模型列表
    冻结变换
    1. 点击选择一个模型
    2. 辅助工具中选择冻结变换工具完成冻结
    3. 冻结后模型的位移、旋转、缩放等变换数据将写入顶点中,参数面板中位移、旋转、缩放数据重置归零
    地面距离约束
    1. 点击选择一个模型
    2. 空间约束中选择地面距离约束,设置约束距离,点击完成
    3. 约束完成后,模型的 Y 轴会被锁定,固定在设定的地面距离上
    地面模式
    1. 启用地面模式,模型添加入场景后会默认放置在地面上,地面模式为默认开启
    中心跟随游标
    1. 启用中心跟随游标,场景旋转时以游标为中心点,否则以原点为中心点
    装配模型导出

    完整模型导出:选择菜单栏文件菜单,点击导出选项根据需要选择导出类型,i3db 格式为 Creator 应用内部格式,可导出矢量数据全部模型关系,直接在 Creator 应用中打开,其他格式为兼容通用模型格式,导出会丢失部分结构和约束等关联数据。

    局部导出:在右侧场景树中可以右键菜单栏选择导出 glb 模型或 i3db 格式模型(仅全部由 creator 构建的模型),此时为单体模型导出,非全部模型导出。

    造型界面

    造型界面是 i3D Creator 中进行三维几何建模与编辑的核心区域,主要用于对几何体进行多样化的造型操作。用户可以在此界面通过选择基准面,进入草图绘制模式,绘制二维草图作为三维建模的基础。完成草图后,系统支持多种造型算法,包括平面拉伸、旋转成型、曲面拉伸、布尔运算、倒角、镜像、裁剪等,帮助用户将草图快速转换为复杂的三维模型。造型界面还支持对已有模型进行编辑、参数调整和特征修改,满足工业设计中对零件精细化建模和再编辑的需求。通过直观的操作流程和丰富的工具栏,用户能够高效完成从草图到三维模型的全流程造型工作。

    造型基准面模块

    基准面介绍

    • 基准面是用于绘制和定位二维草图的基础参考平面,是三维造型的起点和依据。
    • 系统默认提供前视、上视、右视三个基准面,方便用户快速开始建模。
    • 用户也可以根据实际需求新增自定义基准面,满足复杂造型场景。

    新建基准面

    • 可以在层级管理中点击新建基准面,通过参数调整位置和方向,灵活设置基准面的位置。
    • 也可以在已有面上右键,通过鼠标点和当前面快速生成与之平行的新基准面。
    • 支持基于已有面和鼠标点创建基准面,便于在任意位置生成参考平面。

    基准面使用

    • 支持调整基准面的参数,实现平移和旋转操作,灵活定位到所需位置。
    • 在场景树中点击基准面,可自动切换至该基准面的正视图视角,方便绘制草图。
    • 通过右键菜单选择“绘制草图”,可直接进入对应基准面的草图编辑模式,开始二维草图绘制。
    • 在场景中,右键单击基准面出现绘制草图菜单,点击进入草图绘制模式。

    造型算法模块

    造型算法是将二维草图或已有模型,通过特定的几何变换和运算,生成复杂三维模型的核心手段。常用算法包括平面拉伸、旋转成型、曲面拉伸、布尔运算、倒角、镜像、裁剪等。每种算法均可通过造型算法菜单进行选择和参数设置,支持参数化编辑和再调整。


    线造型算法模型

    直线

    • 交互说明:在场景中依次点击两个点,系统自动生成一条直线。可在属性面板中调整起点和终点坐标,实现精确建模。

    多段线

    • 交互说明:连续点击多个点,系统依次连接生成多段线。完成后双击或点击“完成”按钮结束绘制。支持在属性面板中设置是否拟合为平滑曲线,调整各节点坐标。

    样条曲线

    • 交互说明:依次点击多个点,系统根据点位自动生成平滑的样条曲线。可在属性面板中调整控制点位置,实现曲线形状的精细调整。

    四边曲线

    • 交互说明:选择场景中相连的四条线段,系统自动生成一条四边曲线。支持在属性面板中微调各线段参数,优化曲线形态。

    拉伸曲面

    • 交互说明:先选择一条线作为基准,再选择拉伸方向(可通过点击或输入向量),系统自动生成拉伸曲面。可在属性面板中设置拉伸长度和方向参数。

    旋转曲面

    • 交互说明:选择一条线作为轮廓线,设置旋转轴和旋转角度(可通过输入或拖拽设置),系统自动生成旋转曲面。属性面板支持调整旋转度数和轴向参数,实时预览效果。

    面造型算法模块

    • 平面拉伸

      • 功能说明:将选定的二维草图平面沿法线方向拉伸,生成具有厚度的三维实体。
      • 操作步骤:
        1. 在造型算法菜单中选择“平面拉伸”。
        2. 选择一个草图平面,输入拉伸厚度。
        3. 点击“完成”生成拉伸模型。
        4. 选中模型后,可在右侧属性面板编辑矢量参数,实时调整模型尺寸。
      • 示例图:
    • 旋转成型

      • 功能说明:将草图面绕指定轴(X 轴或 Y 轴,默认为 Y 轴)旋转一定角度,生成旋转体。
      • 操作步骤:
        1. 在造型算法菜单中选择“旋转成型”。
        2. 选择草图面,设置旋转轴(X/Y)及旋转角度(-360°~360°)。
        3. 点击“完成”生成旋转模型。旋转时仅使用一侧边线,建议草图为对称图形。
        4. 选中模型后,可在右侧属性面板编辑矢量参数。
      • 示例图:
    • 曲面拉伸

      • 功能说明:将选定的面沿指定曲线路径进行拉伸,生成复杂曲面实体。
      • 操作步骤:
        1. 在造型算法菜单中选择“曲面拉伸”。
        2. 选择一个面和一条曲线,系统根据曲线生成三维模型。
        3. 选中模型后,可在右侧属性面板编辑矢量参数。
        • 示例图:
    • 布尔运算

      • 功能说明:对两个相交模型进行并集、差集、交集等布尔运算,生成新的组合模型。
      • 操作步骤:
        1. 选择两个相交的模型。
        2. 在算法设置中选择“相加”、“相减”或“并集”,可设置是否闭合计算的面。
        3. 点击“完成”生成新模型。
      • 注意:若参与运算的模型均为矢量模型,结果也为矢量模型;若包含非矢量模型,矢量参数将丢失。
    • 模型倒角

      • 功能说明:对模型边缘进行倒角处理,可设置倒角角度和尺寸,优化模型边界。
      • 操作步骤:选择模型,设置倒角参数,点击完成。
    • 模型镜像

      • 功能说明:以场景中某一点为基准,对模型进行镜像操作,快速生成对称结构。
      • 操作步骤:选择模型和镜像点,执行镜像。
    • 模型裁剪

      • 功能说明:对模型进行任意角度的裁剪,保留或去除指定部分。
      • 操作步骤:选择模型,设置裁剪平面和角度,执行裁剪。

    注意事项

    • 各算法生成的模型均可在右侧属性面板中进行参数化编辑,便于后续修改和优化。
    • 参与布尔运算的模型类型需注意,混合类型可能导致部分参数丢失。
    • 建议草图绘制时尽量保持对称和封闭,以获得更好的造型效果。
    • 操作过程中如遇异常,可撤销操作或重新选择参数。

    操作流程

    工业零件设计流程

    1. 启动软件与进入装配界面
      • 用户打开软件后,默认进入装配界面,装配界面菜单栏加载常用零件库和辅助工具。
    2. 零件库管理与模型组装
      • 用户可以通过拖拉的形式将零件库拖入场景组装模型。
      • 当发现零件缺失时,点击新建零件按钮,弹窗新建零件对话框填写零件名称、存储零件库位置等信息后进入造型界面。
    3. 草图绘制与造型转换
      • 在造型界面选择某基准面可进入草图绘制,草图绘制完成后点击退出草图返回造型界面并将草图带回到基准面。
      • 通过造型算法将草图转换为三维模型,点击保存按钮新模型进入装配零件库。
    4. 模型组装与导出
      • 用户返回装配界面选择零件完成模型组装,再导出模型到本地完成整个设计工作。

    模型再编辑流程

    环境准备

    • 前端环境

      • 环境一:Creator 在线服务,提供 Creator 模型再编辑功能。
      • 环境二:与 Creator 应用对接的父应用,Creator 应用需以 iframe 形式嵌入父应用中。
      • 环境三(非必须):i3dGeo 容器环境,提供加载原模型、选中局部特征、预览工业属性、与 Creator 交互等功能。
    • 服务器配置

                   - 如果是一个新环境的服务器,使用该功能需要在服务器上初始化一个 Git 程序。验证是否安装 Git 程序,运行命令:
      
                     ```sh
                     git --version
                     ```
      
                     如果显示版本号(如 `git version 2.25.1`),说明已安装;如果报错 `command not found`,则需要安装。
      
                   - 安装 Git:
                     ```sh
                     sudo yum install git -y
                     ```
      
                 - **云简单配置**
                   - 必须配置前端请求地址与服务器文件的映射关系,否则会导致接口访问失败。
                   - 在配置版本管理之前需要对项目进行路径配置(系统管理 -> 参数管理 -> 系统)。
                   - **配置详情:** - **编码**:replacePath - **名称**:服务器文件替换地址 - **键值**:
                     `json
      
            {"http://test1.i3yoo.cn/cims/upload/3dtiles/LHC": "/data/web/cims/upload/3dtiles/LHC"}
            `- **键值配置示例**:
      
        `json
      
      

      {"http://test1.i3yoo.cn/cims/upload/3dtiles/LHC": "/data/web/cims/upload/3dtiles/LHC"}
      - 浏览器访问地址:[http://test1.i3yoo.cn/cims/upload/3dtiles/LHC](http://test1.i3yoo.cn/cims/upload/3dtiles/LHC) - 服务器根目录地址:/data/web/cims/upload/3dtiles/LHC`

    操作流程

    - 本功能的核心操作流程分为 **加载模型、编辑模式、特征选择、模型编辑、版本控制** 五大阶段,提供从模型编辑到版本管理的全流程操作支持,覆盖从打开模型到完成编辑的全链路操作,确保用户可高效完成迭代与追溯。以下为详细功能与交互说明:
    1.  **加载模型** - 打开界面,模型加载完成后,场景中将显示三维视图。
        ![](./assets/2.png)
    2.  **编辑模式** - **功能**:允许用户对模型的位置、属性等进行调整,并生成可追溯的版本记录。- 在首页点击 **"编辑模式"** 按钮,点击后展开操作菜单,按钮变为 **“取消编辑”**。
        ![](./assets/3.png)
        **菜单功能:** - **框选**:拖拽鼠标框选区域内的模型。- **重置**:清空当前所有选中模型。- **开始编辑**:进入编辑界面(需先选择模型)
        ![](./assets/4.png)
        **选择模型:** - **单选/取消**:单击模型可选中(高亮显示),再次单击取消选中。- **框选**:点击框选按钮,拖拽鼠标框选多个模型。- **数量限制**:最多选择20个模型,超限时弹出提示“最多选择20个模型”。- **重置选择**:点击重置按钮清空当前选择。
        ![](./assets/5.png)
        **开始编辑** - 点击 **开始编辑** 后,界面分为三部分:- 顶部提供辅助工具,类元库等辅助编辑功能。- 中部场景视图:聚焦显示已选模型 - 右侧属性面板:分为基础属性、材质属性、工业属性三个标签页。
    
             **基础编辑功能:位移/旋转/缩放**
    
        ![](./assets/6.png)
        **材质属性编辑:** - 切换至 **材质属性** 标签页,可对模型表面材质进行以下操作:- **材质类型**:下拉菜单选择预设材质(金属、混凝土、玻璃等),或导入自定义材质贴图(支持 .jpg、.png)。- **基础参数**:调节颜色(RGB拾取器)、粗糙度、金属度、透明度。- **高级参数**:绑定法线贴图、环境光遮蔽贴图(需启用高级材质模式)。
        ![](./assets/7.png)
        **工业属性扩展:** - 切换至 **工业属性** 标签页,为模型添加工程元数据:- **几何参数**:输入高度、半径、角度等数值。- **节点管理**:添加连接点(坐标XYZ),用于后续装配对齐。- **关联文件**:点击 **“添加附件”** 上传图纸(.dwg)、文档(.pdf)或图片(.png),文件以图标形式显示在模型旁,双击可下载查看。
        ![](./assets/8.png)
        **模型库:快速调用与三维实体生成** - **访问零件库**:点击顶部菜单栏类元库,展开分类库面板,包含以下预制资源:- **基础零件**:螺栓、螺母、支架等标准紧固件与结构件。- **矢量模型**:通过几何参数(如直径、长度)定义的二维矢量图形(直线、多边形、曲线),支持一键拉伸、旋转生成三维实体。- **管道连接件**:弯头、三通、法兰等工业管道组件,支持自动匹配管径与角度。- **临时零件**:可自定义参数的占位模型(如临时支撑架、标记块),用于快速搭建场景原型。- **实时生成三维实体:** - 把零件缩略图拖拽至场景中,工具将根据预设参数(如尺寸、材质)自动生成对应的三维模型,并吸附到当前编辑模型的节点。- 修改参数:选中生成的模型后,在右侧属性面板中调整参数(如螺栓长度、管道半径),模型形态实时更新。
        ![](./assets/9.png)
        **保存更新** - 点击 **“保存更新”**,系统将弹出备注填写窗口 - 填写修改说明(必填):简要描述本次变更内容(如“调整A区域模型高度”)- 确认后,系统将自动生成修改记录,包含时间、操作人及备注信息。用于追溯历史变更,快速定位问题或回滚版本。
        ![](./assets/10.png)
        **退出编辑:操作终止** - 点击 **返回** 按钮,弹出确认对话框:- “返回操作不会保存此次的模型改动,是否返回?” 选择 **确定** 将清除编辑记录并返回主场景;选择 **取消** 可继续编辑。
        ![](./assets/11.png)
    
    3.  **版本记录** - **功能**:提供完整的版本历史查看与版本切换功能,支持快速回滚到指定状态。- 点击 **“版本记录”** 按钮。弹框显示版本记录详细信息
        ![](./assets/12.png)
        **版本记录:** - 显示所有版本记录 - 完整保存每个大版本的模型状态 - 点击任意操作,即可 **一键切换** 至该版本 - 当前激活版本会高亮显示
        ![](./assets/13.png)
        **批次记录:** - 显示当前版本下的所有模型修改记录(按时间倒序排列)
    
             **还原操作**
             - 点击记录行的 **"还原"** 按钮
             - 系统将自动:
               - 撤销该记录之后的所有修改(即回滚至该记录时的模型状态)
               - 仅保留该记录之前的修改内容
               - 该记录之后的所有变更将被清除
               - 应用到当前工作版本
    
        ![](./assets/14.png)
    
    4.  **升级版本** - **功能**:创建新版本分支,支持多版本并行管理与迭代。- 点击 **"升级版本"** 按钮,填写以下信息:- **版本名称**(必填)- 点击 **"提交"**,系统将自动:- 生成新版本,并切换到该版本状态 - 在 **版本记录** 中显示此次更新
        ![](./assets/15.png)
        ![](./assets/16.png)
        **版本切换** - 在版本记录列表中,可自由 **点击切换** 至任意历史版本 - 当前活跃版本会进行 **高亮标识**
    
             **注意事项**
             - 版本名称建议遵循语义化版本规范(如主版本.次版本.修订号)
             - 新建版本后,所有操作将基于新版本进行
    
        ![](./assets/17.png)
    
    
    1. Creator 事件对接
      • 使用者需将 Creator 容器以 iframe 形式嵌入到页面中,与 Creator 双向通信以调用 Creator 应用功能。
      1. Creator 发送事件
        | 事件名称 | 事件描述 | 数据示例 | 数据解释 |
        | -------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
        | mounting-ready | Creator 应用渲染完毕,可以启动加载流程,可发送 mounting-submit、createconfig 事件至 Creator | { type : 'mounting-ready' } | |
        | mounting-B3DMLoadError | Creator 应用加载模型失败 | { type : 'mounting-B3DMLoadError', message: '模型加载失败' } | + message:错误信息 |
        | mounting-load-percentage | Creator 应用加载模型进度 | { type : 'mounting-load-percentage', data: 50 } | + data:加载进度,0-100 |
        | mounting-back | Creator 应用返回操作(用户手动点击返回、Creator 加载模型出错、用户编辑完成时) | { type : 'mounting-back'} | |
        | mounting-update | 模型编辑完成,用户点击保存操作开始更新时 | { type : 'mounting-update'} | |
        | mounting-export-percentage | 模型更新进度 | { type : 'mounting-export-percentage', data: {percentage: 50}} | + percentage:加载进度,0-100 |
        | mounting-updated | 已经更新完成的 b3dm 文件路径 | { type : 'mounting-updated', data: "http://test1.i3yoo.cn/cims/upload/3dtiles/LFC/NoLod_25.b3dm" } | + data: b3dm 文件路径 |
        | getViewConfig | 请求视图参数,处理完成后,需发送 sendViewConfig 事件给 Creator | { type : 'getViewConfig', data: {useCreatorDialog: true} } | + useCreatorDialog: 是否使用 creator 内部的弹窗 |
        | getIndustryConfig | 请求工业属性配置文件,处理完成后,需发送 sendIndustryConfig 事件给 Creator | { type : 'getIndustryConfig'} } | |
        | getIndustryData | 请求工业属性数据,处理完成后,需发送 sendIndustryData 事件给 Creator | { type : 'getIndustryData', data: {uuid: "dfd42343ds"} } | + uuid: 当前操作的特征 id |
        | updateIndustryData | 更新工业属性数据,处理完成后,需发送 sendIndustryData 事件给 Creator | {type: 'updateIndustryData', data: {uuid: "dfd42343ds", list: [{"configId": 1,"value": "设备编号V-202"},{"configId": 2,"value": 1000}], configCode: '管道Code' }} | + uuid:当前操作的特征 id
        + list:工业属性数据
        + configCode:工业属性类型 |
        | deleteIndustryData | 删除工业属性数据,处理完成后,需发送 sendIndustryData 事件给 Creator | { type : 'deleteIndustryData', data: {uuid: "dfd42343ds"} } | + uuid: 当前操作的特征 id |
        | uploadIndustryFile | 用户点击上传附件时触发,需用户实现文件上传功能,处理完成后,需发送 sendIndustryFileData 事件给 Creator | {type: 'uploadIndustryFile', data: {uuid: "dfd42343ds", "configId": 1, type: '04' }} | + uuid:当前操作的特征 id
        + configId:当前属性字段 id
        + type:当前属性字段类型 |
        | previewIndustryData | 用户点击新增/编辑某特征工业属性时触发,需用户实现更新功能,处理完成后,需发送 previewIndustryDataCompleted 事件给 Creator | {type: 'previewIndustryData', data: {uuid: "dfd42343ds", "configCode": '管道Code' , type: 'edit' }} | + uuid:当前操作的特征 id
        + configCode:工业属性类型
        + type:add-新增,edit-编辑 |
      2. Creator 接收事件
        | 事件名称 | 事件描述 | 数据示例 | 数据解释 |
        | ---------------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
        | mounting-submit | 提供需要编辑的模型数据 | {type: 'mounting-submit', data: {"models":[{"url":"http://test1.i3yoo.cn/cims/upload/3dtiles/LFC/NoLod_25.b3dm","batchIds":["1"]}],"config":{"camera":{"distance":247.2631486857678,"height":174.83670292331826,"heading":9.4209880890368,"defaultHeading":3.9}}}} | + models:需要加载的模型数据
        - url:b3dm 文件路径
        - batchIds:被选中特征的 batchId 集合
        + config:额外参数
        - camera:相机参数 |
        | createconfig | 提供类元库数据 | {type: 'createconfig', url: 'xxxx.json'} | + url: 类元库路径 |
        | sendIndustryData | 提供工业属性数据 | {type: 'sendIndustryData', data: {uuid: "dfd42343ds", list: [{"configId": 1,"value": "设备编号V-202"},{"configId": 2,"value": 1000}], configCode: '管道Code' }} | + uuid:当前操作的特征 id
        + list:工业属性数据
        + configCode:工业属性类型 |
        | sendIndustryFileData | 提供工业属性附件数据 | {type: 'sendIndustryFileData', data: {uuid: "dfd42343ds", "configId": 1, fileUrl: 'http://xxxxxx.pdf', fileName: 'xxxx.pdf' }} | + uuid:当前操作的特征 id
        + configId:当前属性字段 id
        + fileUrl:当前附件的 url
        + fileName:当前附件的文件名称 |
        | previewIndustryDataCompleted | 表示用户更新工业属性完成,Creator 内部会重新请求当前特征工业属性 | {type: 'previewIndustryDataCompleted'} | |
    2. 工业属性 1. 功能概述 - 工业属性可与模型特征进行绑定,绑定后可在 Creator 页面查看、编辑。2. 配置方式 - 工业属性字段的配置需要通过外部定义的一组数组传入,并且需要提供查询和更新接口。3. 依赖资源 - 工业属性字段配置:用于定义模型特征的多种类型以及每种类型下的字段列表。配置格式如下:
      `json

    [
    {
    // 属性的类型code,保证唯一
    "code": "罐001",
    // 属性的类型名称,将会回显至视图
    "name": "罐",
    // 字段配置数组
    "config": [
    {
    // 字段ID,保证在地区字段配置数组下唯一
    "configId": 1,
    // 字段名称,将会回显至视图
    "label": "设备编号",
    // 字段值类型:01-字符串,02-数字,03-图片,04-文件
    "type": "01",
    // 禁用该字段,在视图中将不显示
    "disabled": false
    },
    {
    "configId": 2,
    "label": "容积",
    "type": "02",
    "disabled": false
    },
    {
    "configId": 5,
    "label": "设计图纸",
    "type": "03",
    "disabled": false
    },
    {
    "configId": 11,
    "label": "关联附件",
    "type": "04",
    "disabled": false
    }
    ]
    },
    {
    "code": "管道001",
    "name": "管道",
    "config": [...]
    },
    ...
    ]
    - Creator 编辑弹窗示例图:- 工业类型-name ![](./assets/18.png) - 字段类型为字符串时 ![](./assets/19.png) - 字段类型为数字时 ![](./assets/20.png) - 字段类型为图片时 ![](./assets/21.png) - 字段类型为文件时 ![](./assets/22.png) - 用户自定义的查询工业属性数据方法:- 触发时机:Creator 页面查看特征工业属性数据时。 ![](./assets/23.png) - 实现要求:- 方式一:监听 Creator 发送的getIndustryData事件,请求到数据后发送sendIndustryData事件至 Creator。- 方式二:具备 i3D 容器环境时,在I3dCreatorPost对象的getIndustryData方法中实现。- 数据格式(与上文配置数据相对应):json
    [
    {
    // 需与字段配置的configId对应
    "configId": 1,
    "value": "设备编号V-202"
    },
    {
    "configId": 2,
    "value": 1000
    },
    {
    "configId": 3,
    // 文件名称
    "value": "设计图纸V-202.png",
    // 文件地址
    "fileUrl": "http://xxx/设计图纸V-202.png"
    },
    {
    "configId": 4,
    // 文件名称
    "value": "文件006-db85e.pdf",
    // 文件地址
    "fileUrl": "http://xxx/文件006-db85e.pdf"
    }
    ]
    - 用户自定义的更新工业属性数据方法:- 触发时机:Creator 提供了在线编辑工业属性的窗口,在 Creator 编辑窗口提交数据时触发。 ![](./assets/24.png) - 实现要求:- 方式一:监听 Creator 发送的updateIndustryData事件,更新完成后发送sendIndustryData事件至 Creator 完成数据视图更新。- 方式二:具备 i3D 容器环境时,在I3dCreatorPost对象的updateIndustryData方法中实现。- 特殊配置:如需关闭 Creator 内置编辑窗口,可在初始化I3dCreatorPost对象时将参数useCreatorDialog指定为false。- 用户自定义的更新工业属性附件方法:- 触发时机:Creator 提供了在线编辑工业属性的窗口,在 Creator 编辑窗口点击上传附件时触发(包括图片类型、文件类型)。 ![](./assets/25.png) - 实现要求:- 方式一:监听 Creator 发送的uploadIndustryFile事件,上传完成后发送sendIndustryFileData事件至 Creator 完成数据视图更新。- 方式二:具备 i3D 容器环境时,在I3dCreatorPost对象的uploadIndustryFile方法中实现。 5. **类元库对接** 1. **功能概述** - 用户定义并提供一组类元库模型,Creator 页面读取后会添加至 **类元库** 顶部工具栏中,同时提供类元库预览窗口,支持拖动某个元件至编辑视图进行编辑保存操作。 2. **配置方式** - 方式一:发送createconfig事件,将类元库文件 URL 发送至 Creator。 - 方式二:具备 i3D 容器环境时,在初始化I3dCreatorPost对象时将参数classElementLibrary指定为类元库文件 URL。 3. **依赖资源** - 类元库文件:格式要求为.json`。内部数据格式如下:
    json { // 库id "_$_Pipe_connection1": { // 库名称 "name": "管道连接零件库1", // 库id "index": "_$_Pipe_connection1", // 是否初始时显示 "isshow": false, // 库内元件集合 "children": [ { // 元件名称 "name": "管道泵", // 元件预览图 "image": "./assets/imgs/管道泵.png", // glb文件地址 "glbfile": "./glb/MODE/Beng/guandaobeng.glb", // 元件id "id": "Pipe_connection_2" }, { "name": "DN80手动蝶阀", "image": "./assets/imgs/DN150手动蝶阀.png", "glbfile": "./glb/MODE/Diefa/DN80_1.glb", "id": "Pipe_connection_3" } ] }, "_$_Pipe_connection2": { "name": "蝶阀零件库", "index": "_$_Pipe_connection2", "isshow": false, "children": [ { "name": "DN150手动蝶阀", "image": "./assets/imgs/DN150手动蝶阀.png", "glbfile": "./glb/MODE/Diefa/DN150_1.glb", "id": "Pipe_connection_5" }, { "name": "DN300气动蝶阀", "image": "./assets/imgs/DN400手动蝶阀.png", "glbfile": "./glb/MODE/Diefa/DN300_1.glb", "id": "Pipe_connection_6" } ] } }
    - 示例图如下



    6. i3dGeo 容器工具类

    1.  **功能描述**
        - 提供核心方法,在 i3dGeo 容器中快速实现整个模型再编辑的功能流程。
    2.  **特征选择器类** - `i3dGeo.FeatureSelector` 类用于在地图上通过矩形选择框选择特定的 3D 模型特征,并支持对选中的特征进行样式更改和管理。- 构造函数 `i3dGeo.FeatureSelector(options)`
        | options 参数 | 说明 | 格式 | 是否必填 | 默认值 |
        | :-------------: | :---------------------------------------------------------- | :--------------------- | :------: | :--------------------: |
        | map | 地图实例,用于操作地图场景 | Object | 是 | 无 |
        | tileset | 3D 瓦片集实例,用于操作 3D 模型 | Cesium.Cesium3DTileset | 是 | 无 |
        | parentDomName | 父 DOM 元素的选择器,将在该父父 DOM 元素下创建框选 DOM 盒子 | String | 是 | 无 |
        | samplingDensity | 矩形采样密度,密度越大,所选模型越精确,但耗时越长 | Number | 否 | 10 |
        | modelMaxLen | 最大模型选择数量 | Number | 否 | 20 |
        | changeColor | 选中特征的样式颜色 | String | 否 | `color("yellow", 0.9)` |
        | idName | 特征的 ID 属性名称,将使用 getProperty 提取特征值 | String | 否 | `'id'` |
        | screenSelector | 是否启用屏幕选择器,即是否启用矩形框选功能 | Boolean | 否 | `true` | - 对象实例方法 - `updateTileset(tileset)`  
        更新 3D 瓦片集实例,在重新加载 3D 瓦片集实例后调用。
        | 参数 | 说明 | 格式 | 是否必填 |
        | :-----: | :----------------- | :--------------------- | :------: |
        | tileset | 新的 3D 瓦片集实例 | Cesium.Cesium3DTileset | 是 | - `updateMap(map)`  
        更新地图实例,在重新加载地图实例后调用。
        | 参数 | 说明 | 格式 | 是否必填 |
        | :---: | :----------- | :----- | :------: |
        | map | 新的地图实例 | Object | 是 | - `startDrawing()`  
        开始绘制矩形。- `handleFeatureSelection(feature, remove = false)`  
        处理特征选择,添加或移除选中的特征。
        | 参数 | 说明 | 格式 | 是否必填 | 默认值 |
        | :-----: | :------------------------------------- | :------------------------- | :------: | :-----: |
        | feature | 选中的特征对象 | Cesium.Cesium3DTileFeature | 是 | 无 |
        | remove | 如果当前特征已经被选中,是否移除该特征 | Boolean | 否 | `false` | - `removeFeatureSelection(feature)`  
        移除选中的特征。
        | 参数 | 说明 | 格式 | 是否必填 |
        | :-----: | :--------------- | :------------------------- | :------: |
        | feature | 要移除的特征对象 | Cesium.Cesium3DTileFeature | 是 | - `getSelectedFeatures()`  
        获取所有选中的特征信息。  
        返回值
        | 属性名 | 类型 | 说明 |
        | :----: | :-------------------------------------- | :----------------------------------------------------------- |
        | uuids | Array | 选中的特征 UUID 列表 |
        | models | Array<{ url: String, batchIds: Array }> | 选中的模型信息。url:B3DM 文件的 URL,batchIds:批次 id 数组 | - `drawByUuids(uuids)`  
        根据给定的 UUID 列表渲染选中的特征。
        | 参数 | 说明 | 格式 | 是否必填 |
        | :---: | :--------------- | :---- | :------: |
        | uuids | 特征的 UUID 列表 | Array | 是 | - `resetHandler()`  
        重置绘制器,清除所有状态并更新样式。- `destroy()`  
        销毁绘制器,移除事件监听和 DOM 元素,并重置状态。
    3.  **工业属性管理器类** - `i3dGeo.PropertyManager` 类用于管理属性的渲染和显示,包括读取配置文件数据、渲染属性视图等功能。- 构造函数 `i3dGeo.PropertyManager({ config })`  
        初始化属性管理器实例。
        | 参数 | 说明 | 格式 | 是否必填 | 默认值 |
        | :----: | :--------------------------- | :------------------------ | :------: | :----: |
        | config | 配置数组,包含属性的配置信息 | Array(见上文工业属性篇) | 否 | `[]` | - 对象实例方法 - `renderView({ parentDomName = 'body', featureId, featureName, configCode, data })`  
        渲染属性视图。
        | 参数 | 说明 | 格式 | 是否必填 | 默认值 |
        | :-----------: | :--------------------------- | :------------------------ | :------: | :------: |
        | parentDomName | 父 DOM 元素的选择器 | String | 否 | `'body'` |
        | featureId | 特征的唯一标识符 | String | 是 | 无 |
        | featureName | 特征的名称 | String | 是 | 无 |
        | configCode | 配置代码,用于查找对应的配置 | String | 是 | 无 |
        | data | 属性数据数组 | Array(见上文工业属性篇) | 是 | 无 |
        返回值
        | 属性名 | 类型 | 说明 |
        | :-----: | :------- | :----------------- |
        | destroy | Function | 销毁属性视图的方法 | - `destroyView()`
        销毁当前的属性视图。
    4.  **Creator 交互类** - `i3dGeo.I3dCreatorPost` 类用于处理与 Creator 交互的相关逻辑,包括管理加载状态、处理相机视角以及模型编辑保存等功能。- 构造函数 `i3dGeo.I3dCreatorPost(options)`  
        初始化类的属性并添加消息事件监听器。
        | 参数 | 说明 | 格式 | 是否必填 | 默认值 |
        | :---------------------------------: | :-------------------------------------------------------------------------------------------------------------------------- | :--------------------- | :------: | :--------------------------: |
        | options | 配置选项对象 | Object | 是 | 无 |
        | options.map | 地图实例,用于操作地图场景 | Object | 是 | 无 |
        | options.tileset | 图块集实例,用于操作 3D 模型 | Cesium.Cesium3DTileset | 是 | 无 |
        | options.parentDomName | 父 DOM 元素的选择器,Creator 盒子将挂载与父 DOM 元素下 | String | 是 | 无 |
        | options.creatorBaseUrl | 需要对接的 Creator 的 URL 地址 | String | 是 | 无 |
        | options.viewConfig | 视图配置 | Object | 否 | `{ useCreatorDialog: true }` |
        | options.viewConfig.useCreatorDialog | 是否启用 Creator 的内置编辑工业属性弹窗 | Boolean | 否 | true |
        | options.classElementLibrary | 类元库 URL | String | 否 | 无 |
        | options.mountingBackCallback | 从 Creator 返回时的回调函数(用户手动点击返回、Creator 加载模型出错、用户编辑完成时) | Function | 否 | `null` |
        | options.previewIndustryDataCallback | 预览工业数据的回调函数。`options.viewConfig.useCreatorDialog` 为 false 时,用户在 Creator 中点击新增/编辑模型工业属性时触发 | Function | 否 | `null` |
        | options.getIndustryConfig | Creator 获取工业配置的函数 | Function | 是 | 无 |
        | options.getIndustryData | Creator 获取工业数据的函数 | Function | 是 | 无 |
        | options.updateIndustryData | Creator 更新工业数据的函数 | Function | 是 | 无 |
        | options.uploadIndustryFile | Creator 上传工业附件数据的函数 | Function | 是 | 无 |
        回调函数详细说明:
        | 参数名称 | 触发时机 | 入参 | 返回值 |
        | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
        | mountingBackCallback: () => void | 在 Creator 内部,用户手动点击返回、Creator 加载模型出错、用户编辑完成时触发 | 无 | 无 |
        | previewIndustryDataCallback:(data,callback ) => void | `viewConfig.useCreatorDialog` 为 false 时,Creator 内部将不开启编辑窗口,当用户点击编辑该特征工业属性时触发 | 1. data: { uuid, type, configCode } <br/> 1. uuid: 特征 id<br/> 2. type: 'add' | |
        | getIndustryConfig: () => res | Creator 内部需要使用到工业属性配置数据时触发 | 无 | res:工业属性配置数据 |
        | getIndustryData: async (data) => res | Creator 内部需要请求某特征工业属性值时触发 | 1. data: { uuid} <br/> 1. uuid: 特征 id | res: 工业属性值 |
        | updateIndustryData: async (data) => void | Creator 内部新增/编辑某特征工业属性值时触发 | 1. data: { uuid, type, configCode } <br/> 1. uuid: 特征 id<br/> 2. list: 工业属性值<br/> 3. configCode: 工业属性类型 | 无 |
        | uploadIndustryFile: (data,callback ) => void | Creator 内部在点击上传某特征工业属性附件时触发 | 1. data: { uuid, type, configCode } <br/> 1. uuid: 特征 id<br/> 2. configId: 工业属性字段的 configId<br/> 3. type: 工业属性字段的 type<br/>2. callback:完成操作后调用,Creator 内部将更新附件显示信息 | 无 | - 对象实例方法 - `updateTileset(tileset)`
        更新 3D 瓦片集实例,在重新加载 3D 瓦片集实例后调用。
        | 参数 | 说明 | 格式 | 是否必填 |
        | :-----: | :----------------- | :--------------------- | :------: |
        | tileset | 新的 3D 瓦片集实例 | Cesium.Cesium3DTileset | 是 | - `updateMap(map)`  
        更新地图实例,在重新加载地图实例后调用。
        | 参数 | 说明 | 格式 | 是否必填 |
        | :---: | :----------- | :----- | :------: |
        | map | 新的地图实例 | Object | 是 | - `submitHandler(models, options = {})`  
        提交处理方法,保存相机视角,创建 Creator 容器,设置加载状态和数据。
        | 参数 | 说明 | 格式 | 是否必填 | 默认值 |
        | :--------------------: | :----------- | :----- | :------: | :------------------: |
        | models | 模型数组 | Array | 是 | 无 |
        | options | 配置选项对象 | Object | 否 | `{defaultHeading:0}` |
        | options.defaultHeading | 初始旋转角度 | Number | 否 | 0 | - `restoreModel()`  
        还原版本时,需要手动调用该方法,以便对模型进行无缓存式重新加载。- `destroy()`  
        销毁类的实例,移除消息事件监听器,销毁 iframe、加载状态提示框和错误提示框。- 属性
        | 属性 | 说明 | 格式 |
        | :--------: | :----------------------------------------------------------------------------- | :----- |
        | cameraView | 在进入 Creator 时,地图的相机视角数据,可使用 `map.flyTo(cameraView)` 进行跳转 | Object |
    5.  **完整流程代码示例**
    
        ```javascript
        // ==================== 变量声明 ====================
        // 地图实例
        window.map = null
        // 特征选择器实例
        window.featureSelector = null
        // 3D 创建器实例
        window.i3dCreatorPost = null
        // 3D 瓦片模型实例
        window.tileset = null
        // 当前是否为编辑模式
        window.isSelect = false
        // 属性管理器实例
        window.propertyManager = new i3dGeo.PropertyManager({
          config: window.conifgJsonData
        })
        // 当前选中的特征 ID
        let selectFeatureId = null
        // 当前选中的特征名称
        let selectFeatureName = null
    
        // ==================== 地图初始化相关函数 ====================
        /**
         * 初始化地图
         */
        async function initMap() {
          // 创建地图实例
          map = new i3dGeo.Map('map', {
            maps: [
              {
                type: 'gaode',
                show: true,
                layer: 'imagery'
              }
            ],
            camera: {
              maxHeight: 1000,
              minHeight: 0,
              area: { minLon: 112, maxLon: 120, minLat: 28, maxLat: 35 }
            }
          })
    
          // 设置地图场景参数
          map.viewer.scene.globe.depthTestAgainstTerrain = true
          map.viewer.scene.globe.show = false // 隐藏地球
          map.viewer.scene.skyAtmosphere.show = false // 隐藏大气层
          map.viewer.scene.skyBox.show = false // 隐藏星空
          map.viewer.scene.moon.show = false // 隐藏月亮
          map.viewer.scene.sun.show = false // 隐藏太阳
          map.viewer.scene.backgroundColor = new Cesium.Color(
            0.0,
            0.0,
            0.0,
            0.0
          )
          map.viewer.scene.postProcessStages.fxaa.enabled = true // 开启抗锯齿
          map.brightness = 1.2 // 控制场景亮度
    
          // 加载 3D 瓦片模型
          await loadAndPositionModel()
    
          // 设置事件监听
          setupEventListeners()
    
          // 初始化或更新特征选择器
          if (featureSelector) {
            featureSelector.updateMap(map)
          } else {
            featureSelector = new i3dGeo.FeatureSelector({
              map,
              tileset,
              parentDomName: '#code-mb63mm'
            })
          }
    
          // 初始化或更新 3D 创建器
          if (i3dCreatorPost) {
            i3dCreatorPost.updateMap(map)
          } else {
            i3dCreatorPost = new i3dGeo.I3dCreatorPost({
              map,
              tileset,
              viewConfig: { useCreatorDialog: true },
              parentDomName: '#code-mb63mm',
              creatorBaseUrl: 'http://test1.i3yoo.cn/creator/#/',
              classElementLibrary:
                'http://test1.i3yoo.cn/creator/i3db/create_config.i3db',
              mountingBackCallback,
              previewIndustryDataCallback: (data, callback) => {
                const { uuid, type, configCode } = data
                // 这里可以自定义弹窗编辑,编辑完成后调用 successCallback
                console.log(
                  '这里可以自定义外部的弹窗编辑,编辑完成后调用 successCallback',
                  uuid,
                  type,
                  configCode
                )
                ElMessageBox.alert('---这里是编辑内容---', '编辑工业属性', {
                  confirmButtonText: '完成',
                  callback: (action) => {
                    callback()
                  }
                })
              },
              getIndustryConfig: () => {
                return propertyManager.config
              },
              getIndustryData: async (data) => {
                const { uuid } = data
                const res = await fetchProperty(
                  uuid,
                  Array.from(featureSelector.selectuuids)
                )
                return res
              },
              updateIndustryData: async (data) => {
                const { uuid, configCode, list } = data
                await fetchUpdateProperty(uuid, configCode, list)
              },
              uploadIndustryFile: (data, callback) => {
                const { uuid, configId, type } = data || {}
    
                // 创建文件选择器
                const input = document.createElement('input')
                input.type = 'file'
                input.accept = type == '03' ? 'image/*' : '*'
                input.onchange = (event) => {
                  const file = event.target.files[0]
                  if (!file) return
                  callback({
                    uuid,
                    configId,
                    fileUrl: 'xxxx',
                    fileName: file.name
                  })
                }
                input.click()
              }
            })
          }
    
          // 飞向视图
          if (i3dCreatorPost.cameraView) {
            map.flyTo(i3dCreatorPost.cameraView)
          } else {
            map.flyTo(tileset)
          }
        }
    
        /**
         * 加载并定位 3D 模型
         */
        async function loadAndPositionModel() {
          tileset = await i3dGeo.Model.load3DTiles({
            url: `${window.directoryPath}/tileset.json`
          })
          tileset.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.REPLACE
          tileset.maximumScreenSpaceError = 1 // 提高选取精度
          tileset.dynamicScreenSpaceError = true
          tileset.dynamicScreenSpaceErrorDensity = 0.5
    
          map.addModel(tileset)
    
          // 更新选择器和创建器的模型引用
          if (i3dCreatorPost) i3dCreatorPost.updateTileset(tileset)
          if (featureSelector) featureSelector.updateTileset(tileset)
    
          return tileset
        }
    
        // ==================== 事件处理相关函数 ====================
        /**
         * 设置事件监听
         */
        function setupEventListeners() {
          const viewer = map.viewer
    
          // 点击事件处理
          map.event.on('click', (event) => {
            const pickedObject = viewer.scene.pick(event.position)
            if (pickedObject instanceof Cesium.Cesium3DTileFeature) {
              if (isSelect) {
                // 框选模式下的处理
                featureSelector.handleFeatureSelection(pickedObject, true)
              } else {
                // 普通点击模式下的处理
                selectFeatureId = pickedObject.getProperty('id')
                selectFeatureName = pickedObject.getProperty('name')
    
                // 请求并渲染属性数据
                fetchProperty(selectFeatureId, true).then((res) => {
                  const data = res?.data || []
                  propertyManager.renderView({
                    parentDomName: '#code-mb63mm',
                    featureId: selectFeatureId,
                    configCode: res.configCode,
                    featureName: selectFeatureName,
                    data
                  })
                })
              }
            } else {
              // 点击空白处清除选择
              selectFeatureId = null
              selectFeatureName = null
              propertyManager.destroyView()
            }
          })
        }
    
        /**
         * creator 返回时的回调函数
         */
        function mountingBackCallback() {
          isSelect = false
          setTimeout(() => {
            initMap()
          }, 1000)
        }
    
        // ==================== 操作函数 ====================
        /**
         * 开始框选
         */
        window.startDrawing = () => {
          if (isSelect) featureSelector.startDrawing()
        }
    
        /**
         * 重置框选
         */
        window.resetDrawing = () => {
          featureSelector.resetHandler()
        }
    
        /**
         * 提交编辑
         */
        window.submitHandler = () => {
          const { uuids, models } = featureSelector.getSelectedFeatures()
          if (!uuids.length) {
            cusNotion('请先选中需要编辑的模型', 'warning')
            return false
          }
    
          window.resetDrawing()
          i3dCreatorPost.submitHandler(models, {
            defaultHeading: window.defaultHeading || 1.12
          })
          return true
        }
    
        /**
         * 还原版本
         */
        window.restore = function restoreHandle() {
          i3dCreatorPost.restoreModel()
          map.viewer.scene.primitives.remove(tileset)
          setTimeout(() => {
            loadAndPositionModel()
          }, 1000)
        }
    
        // ==================== 初始化执行 ====================
        setTimeout(() => {
          initMap()
        }, 500)
        ```
    
    
    1. 版本控制
      • 核心目标:通过接口实现前后端协同,支持动态查询、切换与版本管理操作。
      • 后端实现方法:
        1. 查询分支(查询版本记录)
          • 接口地址/cims/b3dmV3/getGitBranch
          • 参数filePath:文件地址(瓦片集合地址)(必填)
          • 返回值
            | 字段名 | 类型 | 说明 | 备注 |
            | -------------- | ------ | ------------ | ------------------------ |
            | name | String | 分支名称 | 提交的分支名称 |
            | isCurrent | String | 是否当前分支 | 是否当前分支 |
            | lastCommitTime | String | 提交时间 | 当前分支最近一次提交时间 |
          • 请求示例
            // 请求版本记录列表
            window.fetchVersionList = async function fetchVersionList() {
              const data = {
                filePath: window.directoryPath
              }
              const queryString = new URLSearchParams(data).toString()
              const res = await api.get(
                `http://test1.i3yoo.cn/cims/b3dmV3/getGitBranch?${queryString}`
              )
              return res.data
            }
            
        2. 查询文件修改列表
          • 接口地址/cims/b3dmV3/getGitCommits
          • 参数filePath:文件地址(瓦片集合地址)(必填)
          • 返回字段
            | 字段名 | 类型 | 说明 | 备注 |
            | ------------ | ------- | ------------ | ------------------------------- |
            | id | String | 提交唯一 ID | Git commit 的 SHA-1 哈希值 |
            | authorName | String | 作者姓名 | 提交者的全名 |
            | authorEmail | String | 作者邮箱 | 提交者的联系邮箱 |
            | commitDate | Date | 提交时间 | 格式为 UTC 时间戳(毫秒级) |
            | message | String | 完整提交信息 | 包含换行符的多行描述文本 |
            | shortMessage | String | 简短提交信息 | 首行摘要(通常不超过 50 字符) |
            | parentCount | Integer | 父提交数量 | 0 表示初始提交,2+ 表示合并提交 |
          • 请求示例
            // 请求更新批次记录列表
            window.fetchBatchList = async function fetchBatchList() {
              const data = {
                filePath: window.directoryPath
              }
              const queryString = new URLSearchParams(data).toString()
              const res = await api.get(
                `http://test1.i3yoo.cn/cims/b3dmV3/getGitCommits?${queryString}`
              )
              return res.data
            }
            
        3. 切换分支(切换版本)
          • 接口地址/cims/b3dmV3/switchBranch
          • 参数filePath:文件地址(瓦片集合地址)(必填)
            branchName:分支名称(必填)
          • 返回值
            | 字段名 | 类型 | 说明 | 备注 |
            | ------ | ------ | -------- | ------------ |
            | err | Int | 数量 | 0 代表成功 |
            | errmsg | String | 返回信息 | 返回详细信息 |
          • 请求示例
            // 切换版本
            window.fetchResetVersion = async function fetchResetVersion({
              branchName
            }) {
              const res = await api.post(
                'http://test1.i3yoo.cn/cims/b3dmV3/switchBranch',
                {
                  filePath: window.directoryPath,
                  branchName
                }
              )
              return res
            }
            
        4. 模型还原操作
          • 接口地址/cims/b3dmV3/resetToCommit
          • 参数filePath:文件地址(瓦片集合地址)(必填)
            commitId:提交记录 id(必填)
            resetType:还原类型(默认传 HARD(必填)
          • 返回值
            | 字段名 | 类型 | 说明 | 备注 |
            | ------ | ------ | -------- | ------------ |
            | err | Int | 数量 | 0 代表成功 |
            | errmsg | String | 返回信息 | 返回详细信息 |
          • 请求示例
            // 还原更新批次
            window.fetchResetBatch = async function fetchResetBatch({ id }) {
              const data = {
                filePath: window.directoryPath,
                commitId: id,
                resetType: 'HARD'
              }
              const queryString = new URLSearchParams(data).toString()
              const res = await api.post(
                `http://test1.i3yoo.cn/cims/b3dmV3/resetToCommit?${queryString}`,
                data
              )
              return res
            }
            
        5. 创建文件分支(升级版本记录)
          • 接口地址/cims/b3dmV3/createBranch
          • 参数filePath:文件地址(瓦片集合地址)(必填)
            newBranchName:分支名称(必填)
          • 返回值
            | 字段名 | 类型 | 说明 | 备注 |
            | ------ | ------ | -------- | ------------ |
            | err | Int | 数量 | 0 代表成功 |
            | errmsg | String | 返回信息 | 返回详细信息 |
          • 请求示例
            // 升级版本
            window.fetchUpdateVersion = async function fetchUpdateVersion() {
              const res = await api.post(
                'http://test1.i3yoo.cn/cims/b3dmV3/createBranch',
                {
                  filePath: window.directoryPath,
                  newBranchName: '分支名称'
                }
              )
              return res
            }
            

    技术支持与反馈

    技术支持

    • 用户在使用过程中遇到任何技术问题,可以联系我们的技术支持团队,我们将竭诚为您服务。

    反馈建议

    • 如果您对我们的产品有任何建议或意见,欢迎随时向我们反馈,我们将不断改进和完善产品,为您提供更好的使用体验。

    感谢您选择 i3d Creator,希望本手册能帮助您更好地使用我们的产品。