I3d Creator 0.9 用户操作手册

    2025-05-30

    一、产品概述

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

    二、用户界面介绍

    （一）装配界面

    1. 装配零件库管理模块
      • 用户可以配置专属零件库，系统内置常用零件库和临时零件库，零件库有标识区分零件类型。
      • 提供友好的拖拽入场景交互效果，支持在未拖入场景时查看零件属性或预览零件，增加搜索功能。
    2. 装配界面交互模块
      • 用户通过鼠标的拖拉拽形式快速完成模型的组装。
      • 支持辅助对齐，提供辅助方法让用户能够用拖放的形式把模型放置到目标位置。
      • 支持平行相机下拖动对齐，每个平行视角有网格背景，能边界在三维视角和平行相机中切换。
      • 有开启地面吸附的菜单项和快捷键，开启后拖入的模型默认放置在地面上。
      • 支持通过参数快捷调整模型位置、旋转、缩放等属性。
      • 增加辅助视角效果优化体验，如：拖动模型时让中心点到地面形成一根虚线指示。
      • 支持拖动、移动快捷切换。
      • 模型锁，添加模型锁让模型无法被选中。

    （二）造型界面

    1. 造型基准面模块
      • 用户可以根据需要设置基准面，也可以调整除三个基类基准面外其他基准面的参数。
      • 根据面和鼠标位置生成平行面的基准面。
      • 基于模型包围盒四个面中的某一个面生成基准面。
      • 选择三个点建立基准面。
    2. 造型算法模块
      • 用户在造型界面对草图和模型通过算法进行造型，得到目标模型，所有算法都是 API 形式调用。
      • 平面拉伸：选择平面，设置拉伸正反方向，鼠标拉动完成平面拉伸，同时可以配置拉伸距离实现精准控制。
      • 旋转成型：选择一个面，设置选择角度，正反旋转两个参数，完成旋转造型。
      • 曲面拉伸：选择一个面和一条曲线，面源曲线路线生成立体模型。
      • 布尔运算：选择两个相交的模型，设置算法为取相加、取相减还是取并集，设置是否闭合计算的面，完成计算得到一个新的模型。
      • 模型倒角：选择模型，给模型切出倒角，并可精确设置倒角角度。
      • 模型镜像：可以通过某一点在场景中生成模型镜像。
      • 模型裁剪：可以对模型进行任意角度裁剪。

    （三）草图绘制界面

    1. 草图绘制模块
      • 用户通过绘制草图辅助三维造型。
      • 支持关键点吸附功能、框选功能、双击修改尺寸、点线的捕捉、单击按下选中图形并拖动。
      • 提供丰富的快捷键设计，包括文件管理快捷键、编辑操作快捷键、视图控制快捷键、绘制工具快捷键等。
    2. 草图约束求解模块
      • 为二维图像建立关联关系，使相等、使相切、使垂直、使重叠等约束条件，让绘图更精准。

    三、操作流程

    （一）工业零件设计流程

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

    （二）模型再编辑流程

    1. 环境准备

      • 前端环境
        • 环境一：Creator 在线服务，提供 Creator 模型再编辑功能。
        • 环境二：与 Creator 应用对接的父应用，Creator 应用需以 iframe 形式嵌入父应用中。
        • 环境三（非必须）：i3dGeo 容器环境，提供加载原模型、选中局部特征、预览工业属性、与 Creator 交互等功能。
      • 服务器配置
        • 如果是一个新环境的服务器，使用该功能需要在服务器上初始化一个 Git 程序。验证是否安装 Git 程序，运行命令： 
          git --version
          如果显示版本号（如 git version 2.25.1），说明已安装；如果报错 command not found，则需要安装。
        • 安装 Git： 
          sudo yum install git -y
      • 云简单配置
        • 必须配置前端请求地址与服务器文件的映射关系，否则会导致接口访问失败。
        • 在配置版本管理之前需要对项目进行路径配置（系统管理 -> 参数管理 -> 系统）。
        • 配置详情：
          • 编码：replacePath
          • 名称：服务器文件替换地址
          • 键值： 
            {
  "http://test1.i3yoo.cn/cims/upload/3dtiles/LHC": "/data/web/cims/upload/3dtiles/LHC"
}
          • 键值配置示例： 
            {
  "http://test1.i3yoo.cn/cims/upload/3dtiles/LHC": "/data/web/cims/upload/3dtiles/LHC"
}
          • 浏览器访问地址：http://test1.i3yoo.cn/cims/upload/3dtiles/LHC
          • 服务器根目录地址：/data/web/cims/upload/3dtiles/LHC

    2. 操作流程

      • 本功能的核心操作流程分为 加载模型、编辑模式、特征选择、模型编辑、版本控制 五大阶段，提供从模型编辑到版本管理的全流程操作支持，覆盖从打开模型到完成编辑的全链路操作，确保用户可高效完成迭代与追溯。以下为详细功能与交互说明：

      1. 加载模型

        • 打开界面，模型加载完成后，场景中将显示三维视图。

      2. 编辑模式

        • 功能：允许用户对模型的位置、属性等进行调整，并生成可追溯的版本记录。
        • 在首页点击 "编辑模式" 按钮，点击后展开操作菜单，按钮变为 “取消编辑”。

        菜单功能：

        • 框选：拖拽鼠标框选区域内的模型。
        • 重置：清空当前所有选中模型。
        • 开始编辑：进入编辑界面（需先选择模型）

        选择模型：

        • 单选/取消：单击模型可选中（高亮显示），再次单击取消选中。
        • 框选：点击框选按钮，拖拽鼠标框选多个模型。
        • 数量限制：最多选择 20 个模型，超限时弹出提示“最多选择 20 个模型”。
        • 重置选择：点击重置按钮清空当前选择。

        开始编辑

        • 点击 开始编辑 后，界面分为三部分：
          • 顶部提供辅助工具，类元库等辅助编辑功能。
          • 中部场景视图：聚焦显示已选模型
          • 右侧属性面板：分为基础属性、材质属性、工业属性三个标签页。

        基础编辑功能：位移/旋转/缩放

        材质属性编辑：

        • 切换至 材质属性 标签页，可对模型表面材质进行以下操作：
          • 材质类型：下拉菜单选择预设材质（金属、混凝土、玻璃等），或导入自定义材质贴图（支持 .jpg、.png）。
          • 基础参数：调节颜色（RGB 拾取器）、粗糙度、金属度、透明度。
          • 高级参数：绑定法线贴图、环境光遮蔽贴图（需启用高级材质模式）。

        工业属性扩展：

        • 切换至 工业属性 标签页，为模型添加工程元数据：
          • 几何参数：输入高度、半径、角度等数值。
          • 节点管理：添加连接点（坐标 XYZ），用于后续装配对齐。
          • 关联文件：点击 “添加附件” 上传图纸（.dwg）、文档（.pdf）或图片（.png），文件以图标形式显示在模型旁，双击可下载查看。

        模型库：快速调用与三维实体生成

        • 访问零件库：点击顶部菜单栏类元库，展开分类库面板，包含以下预制资源：
          • 基础零件：螺栓、螺母、支架等标准紧固件与结构件。
          • 矢量模型：通过几何参数（如直径、长度）定义的二维矢量图形（直线、多边形、曲线），支持一键拉伸、旋转生成三维实体。
          • 管道连接件：弯头、三通、法兰等工业管道组件，支持自动匹配管径与角度。
          • 临时零件：可自定义参数的占位模型（如临时支撑架、标记块），用于快速搭建场景原型。
        • 实时生成三维实体：
          • 把零件缩略图拖拽至场景中，工具将根据预设参数（如尺寸、材质）自动生成对应的三维模型，并吸附到当前编辑模型的节点。
          • 修改参数：选中生成的模型后，在右侧属性面板中调整参数（如螺栓长度、管道半径），模型形态实时更新。

        保存更新

        • 点击 “保存更新”，系统将弹出备注填写窗口
          • 填写修改说明（必填）：简要描述本次变更内容（如“调整 A 区域模型高度”）
          • 确认后，系统将自动生成修改记录，包含时间、操作人及备注信息。用于追溯历史变更，快速定位问题或回滚版本。

        退出编辑：操作终止

        • 点击 返回 按钮，弹出确认对话框：
          • “返回操作不会保存此次的模型改动，是否返回？” 选择 确定 将清除编辑记录并返回主场景；选择 取消 可继续编辑。

      3. 版本记录

        • 功能：提供完整的版本历史查看与版本切换功能，支持快速回滚到指定状态。
        • 点击 “版本记录” 按钮。弹框显示版本记录详细信息

        版本记录：

        • 显示所有版本记录
        • 完整保存每个大版本的模型状态
        • 点击任意操作，即可 一键切换 至该版本
        • 当前激活版本会高亮显示

        批次记录：

        • 显示当前版本下的所有模型修改记录（按时间倒序排列）

        还原操作

        • 点击记录行的 "还原" 按钮
        • 系统将自动：
          • 撤销该记录之后的所有修改（即回滚至该记录时的模型状态）
          • 仅保留该记录之前的修改内容
          • 该记录之后的所有变更将被清除
          • 应用到当前工作版本

      4. 升级版本

        • 功能：创建新版本分支，支持多版本并行管理与迭代。
        • 点击 "升级版本" 按钮，填写以下信息：
          • 版本名称（必填）
        • 点击 "提交"，系统将自动：
          • 生成新版本，并切换到该版本状态
          • 在 版本记录 中显示此次更新

        版本切换

        • 在版本记录列表中，可自由 点击切换 至任意历史版本
        • 当前活跃版本会进行 高亮标识

        注意事项

        • 版本名称建议遵循语义化版本规范（如主版本.次版本.修订号）
        • 新建版本后，所有操作将基于新版本进行

    3. Creator 事件对接

      • 使用者需将 Creator 容器以 iframe 形式嵌入到页面中，与 Creator 双向通信以调用 Creator 应用功能。

      1. Creator 发送事件

        | 事件名称 | 事件描述 | 数据示例 | 数据解释 |
        | -------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
        | mounting-ready | 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 | 请求视图参数 | { type : 'getViewConfig', data: {useCreatorDialog: true} } | + useCreatorDialog: 是否使用 creator 内部的弹窗 |
        | getIndustryConfig | 请求工业属性配置文件 | { type : 'getIndustryConfig'} } | |
        | getIndustryData | 请求工业属性数据 | { type : 'getIndustryData', data: {uuid: "dfd42343ds"} } | + uuid: 当前操作的特征 id |
        | updateIndustryData | 更新工业属性数据 | {type: 'updateIndustryData', data: {uuid: "dfd42343ds", list: [{"configId": 1,"value": "设备编号V-202"},{"configId": 2,"value": 1000}], configCode: '管道Code' }} | + uuid：当前操作的特征 id
        + list：工业属性数据
        + configCode：工业属性类型 |
        | uploadIndustryFile | 用户点击上传附件时触发，需用户实现文件上传功能 | {type: 'uploadIndustryFile', data: {uuid: "dfd42343ds", "configId": 1, type: '04' }} | + uuid：当前操作的特征 id
        + configId：当前属性字段 id
        + type：当前属性字段类型 |
        | previewIndustryData | 用户点击新增/编辑某特征工业属性时触发，需用户实现更新功能 | {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'} | |

    4. 工业属性

      1. 功能概述

        • 工业属性可与模型特征进行绑定，绑定后可在 Creator 页面查看、编辑。

      2. 配置方式

        • 工业属性字段的配置需要通过外部定义的一组数组传入，并且需要提供查询和更新接口。

      3. 依赖资源

        • 工业属性字段配置：用于定义模型特征的多种类型以及每种类型下的字段列表。配置格式如下： 
        [
  {
   // 属性的类型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
          • 字段类型为字符串时
          • 字段类型为数字时
          • 字段类型为图片时
          • 字段类型为文件时

        • 用户自定义的查询工业属性数据方法：

          • 触发时机：Creator 页面查看特征工业属性数据时。
          • 实现要求：
            • 方式一：监听 Creator 发送的 getIndustryData 事件，请求到数据后发送 sendIndustryData 事件至 Creator。
            • 方式二：具备 I3d 容器环境时，在 I3dCreatorPost 对象的 getIndustryData 方法中实现。
          • 数据格式（与上文配置数据相对应）：
          [
  {
    // 需与字段配置的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 编辑窗口提交数据时触发。
          • 实现要求：
            • 方式一：监听 Creator 发送的 updateIndustryData 事件，更新完成后发送 sendIndustryData 事件至 Creator 完成数据视图更新。
            • 方式二：具备 I3d 容器环境时，在 I3dCreatorPost 对象的 updateIndustryData 方法中实现。
          • 特殊配置：如需关闭 Creator 内置编辑窗口，可在初始化 I3dCreatorPost 对象时将参数 useCreatorDialog 指定为 false。

        • 用户自定义的更新工业属性附件方法：

          • 触发时机：Creator 提供了在线编辑工业属性的窗口，在 Creator 编辑窗口点击上传附件时触发（包括图片类型、文件类型）。
          • 实现要求：
            • 方式一：监听 Creator 发送的 uploadIndustryFile 事件，上传完成后发送 sendIndustryFileData 事件至 Creator 完成数据视图更新。
            • 方式二：具备 I3d 容器环境时，在 I3dCreatorPost 对象的 uploadIndustryFile 方法中实现。

    5. 类元库对接

      1. 功能概述

        • 用户定义并提供一组类元库模型，Creator 页面读取后会添加至 类元库 顶部工具栏中，同时提供类元库预览窗口，支持拖动某个元件至编辑视图进行编辑保存操作。

      2. 配置方式

        • 方式一：发送 createconfig 事件，将类元库文件 URL 发送至 Creator。
        • 方式二：具备 I3d 容器环境时，在初始化 I3dCreatorPost 对象时将参数 classElementLibrary 指定为类元库文件 URL。

      3. 依赖资源

        • 类元库文件：格式要求为 .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 }
          1. uuid: 特征 id
          2. type: 'add' | | 'edit'
          3. configCode: 工业属性类型
          2. callback：完成操作后调用，Creator 内部将重新请求该特征数据 | 无 |
          | getIndustryConfig: () => res | Creator 内部需要使用到工业属性配置数据时触发 | 无 | res：工业属性配置数据 |
          | getIndustryData: async (data) => res | Creator 内部需要请求某特征工业属性值时触发 | 1. data: { uuid}
          1. uuid: 特征 id | res: 工业属性值 |
          | updateIndustryData: async (data) => void | Creator 内部新增/编辑某特征工业属性值时触发 | 1. data: { uuid, type, configCode }
          1. uuid: 特征 id
          2. list: 工业属性值
          3. configCode: 工业属性类型 | 无 |
          | uploadIndustryFile: (data,callback ) => void | Creator 内部在点击上传某特征工业属性附件时触发 | 1. data: { uuid, type, configCode }
          1. uuid: 特征 id
          2. configId: 工业属性字段的 configId
          3. type: 工业属性字段的 type
          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. 完整流程代码示例

        // ==================== 变量声明 ====================
// 地图实例
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)

    7. 版本控制

      • 核心目标：通过接口实现前后端协同，支持动态查询、切换与版本管理操作。

      • 后端实现方法：

        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
}

    （三）草图绘制流程

    1. 鼠标交互与快捷键操作
      • 支持关键点吸附功能、框选功能、双击修改尺寸、点线的捕捉、单击按下选中图形并拖动。
      • 使用快捷键进行文件管理、编辑操作、视图控制、绘制工具等操作。
    2. 草图面板交互设计
      • 快捷菜单跟随鼠标出现，当系统识别到当前操作存在快捷操作时展示在鼠标上方。
      • 智能对齐功能，鼠标拖动模型或绘制图形时，当模型关键点或者某个点和鼠标点平行时出现一根对齐线（虚线）。
      • 约束条件，使相等、使相切、使垂直、使重叠等约束条件，让绘图更精准。

    四、桌面端开发需求

    1. 文件系统
      • 实现对电脑文件的操作能力，可以新建、编辑、扫描本地模型文件。
    2. 性能优化
      • 调用电脑性能，实现比 web 端更流畅的建模效果。
      • 研究 nwjs v8 引擎渲染加速能力，突破浏览器的内存限制。
    3. 扩展插值
      • 基于桌面端的文件读取能力和 nodejs 支持能力，开发扩展插件。
      • 研究 fbx 转 3dtiles 插件、模型转二维图纸插件、二维图纸识别等。
    4. 桌面端安装包
      • 制作 windows 安装包和 linux 安装包。
      • 开发授权管理证书制作和控制模块。
      • 进行国产平台适配。
    5. 模型格式兼容
      • 与 i3d Act 的互通，实现建模和组装后能在 Act 中加载，可考虑矢量格式或 3dtiles 格式实现，后期集成编辑能力进入 i3d Act 桌面端。
      • 扩展支持导出的格式，如 fbx、obj、dae、stl 等。
      • 导入的格式包括 fbx、obj、dae、stl、ply、usd 等。

    五、常见问题解答

    1. 如何解决零件库中零件缺失的问题？
      • 点击新建零件按钮，弹窗新建零件对话框填写零件名称、存储零件库位置等信息后进入造型界面进行零件设计。
    2. 如何进行模型的局部再编辑？
      • 在用户的三维场景中，用户触发编辑功能，通过框选选中一块区域，区域内被选中模型高亮，再通过左键点击模型可单独添加或删除高亮模型，点击编辑按钮调用集成的 Creator 模块，在 Creator 装配场景中加载选中的高亮区域模型，可以对模型进行删除、移动、材质修改等操作。
    3. 如何优化建模性能？
      • 调用电脑性能，实现比 web 端更流畅的建模效果。研究 nwjs v8 引擎渲染加速能力，突破浏览器的内存限制。
    4. 如何进行模型格式转换？
      • 研究 fbx 转 3dtiles 插件、模型转二维图纸插件、二维图纸识别等扩展插件，实现模型格式的转换和兼容。

    六、技术支持与反馈

    1. 技术支持
      • 用户在使用过程中遇到任何技术问题，可以联系我们的技术支持团队，我们将竭诚为您服务。
    2. 反馈建议
      • 如果您对我们的产品有任何建议或意见，欢迎随时向我们反馈，我们将不断改进和完善产品，为您提供更好的使用体验。

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