EasyTwin Engine

引擎代码

• engine 核心
• 测试页面
• 增加组件
• 引擎绘制模块

使用引擎的 draw 模块

// 设置对应的绘制模式
world.drawUtils.mode = 'multi-rect';
// 设置为那个组件做绘制, 这里会触发与前端的交互,通知前端xxx组件的绘制状态
world.drawUtils.setActiveComponent(this);
// 设置绘制组件需要的 绘制点的根节点
world.drawUtils.showDrawPoint(this.group);
// 同上
world.drawUtils.showDrawMoveRect(this.group);

world.drawUtils.startDraw();

在引擎中新增组件(Component)

• 通过复制组件模板创建代码块
• 修改组件类型

// 在改文件中全局替换Template 为你想要的组件名字
export const TemplateComponentType = 'Template';

• 在 EasyTwinComponentType 中增加你新增的组件类型
• 在 EasyTwinStateConfigOptionsMap 中增加你新增的组件状态配置类型
• 在 EasyTwinDataOptionsMap 中增加你新增的组件数据类型
• 在 EasyTwinComponentTypeMap 中增加你新增的组件编号
  • EasyTwinComponentTypeMap 说明
• 在 EntityManager 函数 getEntityArchetype 中增加对应类型的返回
  • getEntityArchetype 函数说明
  • isEntityDigital 函数说明
• 实现组件内容的删除
• 组件可以被依附拖动控制器
• 组件点击传出自定义属性
• 组件选中
• 组件设置显隐
• 组件拖动完成
• 关于 css2dObject 的选中
• 关于 css2dObject 的显示隐藏

EasyTwinComponentTypeMap

• 这个 map 是用于判断所属组件是属于哪一种类型
• 前 8 代表某种类型， 后 8 单边具体对应
• 可以出现控制辅助器的类型为 1

getEntityArchetype

// 函数的返回是有顺序的, 按照你期望的顺序加入函数的返回序列中
if (entity.getComponentByType('Model')) return 'Model';

isEntityDigital

// 函数用于判断该实体是否属于数字要素的一种
if (entity.isEntityDigital(entity: EngineEntity)) return boolean;

组件可以被控制器依附

• getCanAttach

switch (this.type) {
  case 'XXX':
}
// 在switch 中加入你新增的组件类型

getObjectById

  getObjectById(id: string) {
    // 返回你想要返回给选中模块的物体, 一般选中会通过子mesh 的id,来寻找你需要返回出的组件子实体
    return this.group;
  }

组件拖动完成

onDragEnd(): void
// 在选中模块中, 拖动组件会触发组件的 onDragEnd 函数,在这里你可以更新 组件中的位置等属性

setVisible

// 如果没有特别的实现, 通用实现就是控制 组件下的group 的children 的某一个子的显示隐藏, 如果uuid 为空就直接设置group的显隐
setVisible(visible: boolean, uuid?: string): void

在引擎中实现对于 dom 元素的选中

// 在可以被选中的dom对象添加数据元素 它自身的id, 所属实体的id, 所属组件的id
clickDom.dataset.id = id;
clickDom.dataset.entityId = entityId;
clickDom.dataset.componentId = componentId;

// 在选中模块中, 将通过ev.target 来直接获取组件id, 来判断是否点中
const componentId = target.getAttribute('data-component-id');
const objectId = target.getAttribute('data-id');

custom attribute

为了能在数字要素传出自定义属性 如果数字要素含有多个子,就在子的 data 数据中加上 customAttribute 字段 不然就放在最外层

removeObjectById

  public removeObjectById(id: string): void {
    const object = this.getObjectById(id);
    if (object) {
      const child = this.childMap.get(object.uuid);
      this.childMap.delete(object.uuid);
      child && child.dispose();
      child && this.group.remove(child);

      this.needDataUpdateServer = true;
    }
  }

setVisible

  // 以poi panel v2为例
  public setVisible(visible: boolean): PoiPanelV2Component {
    const getExtendVisible = (object: Object3D, visible: boolean): boolean => {
      if (object.parent) {
        return getExtendVisible(object.parent, object.parent.visible && visible);
      } else {
        return visible;
      }
    };

    const extendVisible = getExtendVisible(this.group, this.group.visible);

    this.childMap.forEach((child) => {
      child.setVisible(visible && extendVisible);
    });

    return this;
  }
  //在新增的组件中实现 设置显隐的方法, 并在load 该组件的函数中增加对于它显隐的控制调用
    public loadPoiPanelV2Component(
    world: World,
    entity: EngineEntity,
    options: ComponentOptions,
    isAdded: boolean = false,
  ): PoiPanelV2Component {
    const { type, id, name, states } = options;
    const component = entity.addComponent<PoiPanelV2Component>(
      id,
      name ?? '',
      PoiPanelV2Component,
      isAdded,
    );

    ......

    component.setVisible(entity.visible);

    .....

    return component;
  }