@easytwin/engine v0.52.0

EasyTwin Engine

引擎代码

• engine 核心
• 蓝图的参数管理页面
• 测试页面
• 增加组件
• 引擎绘制模块
• 私有化版本的本地调试

蓝图的参数管理页面

  // 配置页
  http://twin.easyv.test/admin/handles

  // 配置页的文件存储地址
  oss://dt-easyv-test/easytwin/system/handles/

私有化版本的本地调试

api地址环境变量

  //当前私有化的地址
  http://172.16.203.127:717
  点击EasyTwin渲染引擎 跳转页面 复制该地址
  http://172.16.203.127:14000
  这个就是api地址环境变量

twin全局配置

  配置项中增加
  local: true

使用引擎的 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)

• 创建实体时, commonConfig 字段带上 该功能类型名 + 版本号

commonConfig: {
  id: 'PoiPanelV2_v1';
}

在引擎中新增组件(Component)

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

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

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

组件类名规则

• 组件的类型名 + Component 就是组件的class 名字, 这里涉及组件的版本号获取

EasyTwinComponentTypeMap

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

version

• 在组件类名前标明版本升级的原因, 及版本升级所对应的引擎版本

/**
 * @version 2.0 data  EasyTwin 1.6.0 配置项变更
 */
@EngineComponent(InstanceModelComponentType)
class xxxComponent

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;
  }

showHelper

  // 在组件中实现此函数, 函数会在选中时调用
  showHelper(): void {
    //to do
  }

  // 在组件中实现此函数, 函数会在清空选中时调用
  hideHelper(): void {
    //to do
  }

新增组件配置蓝图节点

// 以拆楼动画为例

// 1 在构造函数中判断是否是easyv中再初始化easyv 的监听事件
  constructor(
    public id: string,
    public name: string,
    // public type: EasyTwinComponentType,
    public readonly entity: EngineEntity,
  ) {
    super(id, name, entity);
    if (EasyTwinEngine.mode === 'Easyv') {
      this._initEasyvEventListener();
    }
  }

// 2 在组件中实现easyv 事件的监听函数
 _initEasyvEventListener() {
    const entityId = this.entity.uuid;

    addEasyvEventListener(
      BuildingsAnimationComponentType, // 组件的类型
      'selectFloor', // action 中的value
      entityId, // 组件对应的实体id
      this.easyvPlaySelectFloorAnimation, // 对应事件的执行函数
    );
  }

// 3 组件执行对应事件的发送函数
this._world.emitFunc('buildingsAnimationSpread', undefined, this.entity.uuid);

// 4 在蓝图的参数管理页面新增对应的组件
{
  "name": "拆楼动画",
  "events": [
    {
      "name": "展开楼层",
      "value": "buildingsAnimationSpread",
      "param": {}
    },
    {
      "name": "选中楼层",
      "value": "buildingsAnimationSelect",
      "param": {
        "data": 2,
        "fields": []
      }
    },
    {
      "name": "恢复初始",
      "value": "buildingsAnimationRestore",
      "param": {}
    }
  ],
  "actions": [
    {
      "name": "展开楼层",
      "value": "openFloor",
      "param": {}
    },
    {
      "name": "选中楼层",
      "value": "selectFloor",
      "param": {
        "data": 2,
        "fields": []
      }
    },
    {
      "name": "恢复初始",
      "value": "resetFloor",
      "param": {}
    }
  ]
}