SuperMap iClient3D for WebGL模型编辑类介绍（ModelEditor）

kele

前言

在城市规划方案中，向系统添加模型是常用的方法，SuperMap iClient3D for WebGL在线范例中提供了编辑模型参数的方法（范例地址：http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#addSymbols），这种方式的交互性不是很好，下面我向大家介绍另一种编辑小品的方式：ModelEditor

---

一、接口介绍

model：编辑模型对象，支持的模型格式有entity（gltf、glb）,S3MInstance（s3m、s3mb）

scene：场景对象

offset：编辑控件偏移量，如果模型原点不在模型中心点，需要合理设置偏移量

scale：编辑控件大小比例

axesShow：{

        rotation：true         //旋转控件

        scale：true           //缩放控件

        translation：true         //平移控件

}

changeEvt：编辑模型时触发返回模型变换矩阵，获取偏移量和旋转量

lineWidthScale：控件线宽

二、使用方法

1.添加模型（entity或者s3mInstance）

    //gltf模型
    var url = "./SampleData/gltf/客机模型/客机模型.gltf";
    var gltf = viewer.entities.add({
      name: "gltf",
      position: new Cesium.Cartesian3.fromDegrees(116.4717575064941,39.92171235599680, 5),
      model: {
        uri: url
      }
    });
    viewer.zoomTo(gltf);
    //s3mInstance添加s3m模型
    var s3mInstanceColc = new Cesium.S3MInstanceCollection(scene._context);
    scene.primitives.add(s3mInstanceColc);
    s3mInstanceColc.add('./data/car/qiche10.s3m', {
      id: 1,
      position: new Cesium.Cartesian3.fromDegrees(116.4717575064941,39.92171235599680, 20),
      hpr: new Cesium.HeadingPitchRoll(0, 0, 0),
      scale: new Cesium.Cartesian3(1, 1, 1),
      color: Cesium.Color.WHITE
    });
    var s3m = s3mInstanceColc.getInstance('./data/car/qiche10.s3m',1);

2.模型编辑类

    var modeeditor = new Cesium.ModelEditor({
      model: s3m,      //或者 gltf
      scene: scene,
      scale: 1,
      offset: new Cesium.Cartesian3(0,0,0),
      lineWidthScale: 3,
      axesShow: {
        rotation: true,
        scale: true,
        translation: true
      },
    });
    modeeditor.activate()

3.添加监听

    var scratchPosition = new Cesium.Cartesian3(0,0,0);
    var scratchPositionMat = new Cesium.Cartesian3(0,0,0);
    var scratchQuaternion = new Cesium.Cartesian3(0,0,0);
    var headingPitchRoll = new Cesium.Cartesian3(0,0,0);

    modeeditor.changedEvt.addEventListener((param)=>{
      var modelMatrix = param.modelMatrix;
      Cesium.Matrix4.getTranslation(modelMatrix,scratchPosition);
      console.log("模型位置：" + scratchPosition.x,scratchPosition.y,scratchPosition.z);
      Cesium.Matrix4.getRotation(modelMatrix,scratchPositionMat);
      Cesium.Quaternion.fromRotationMatrix(scratchPositionMat,scratchQuaternion);
      Cesium.HeadingPitchRoll.fromQuaternion(scratchQuaternion,headingPitchRoll);
      console.log("模型旋转：heading:" + headingPitchRoll.heading + "pitch:" + headingPitchRoll.pitch + "roll:" + headingPitchRoll.roll);
    });

 

4.运行效果