最近做了这个无人机实时视频投射的功能,其中介入了实时无人机的坐标数据、姿态以及视频流。
说下思路:

其中锥体用了自定义的geometry,视频面用的是polygon给的video材质,坐标用了samplepositionproperty进行储存,姿态用了sampleproperty。
以下是部分代码:
构建自定义geometry:

getGeometry(dis, fov, aspect) {
        let positions = new Float64Array(5 * 3);
        fov = Cesium.Math.toRadians(fov / 2);
        const tanfov = Math.tan(fov);
        const halfw = tanfov * dis;
        debugger
        const halfh = halfw / aspect;

        // 点0 坐标
        positions[0] = 0.0;
        positions[1] = 0.0;
        positions[2] = 0.0;

        // 点1 坐标
        positions[3] = 1.0 * halfw;
        positions[4] = 1.0 * dis;
        positions[5] = 1.0 * halfh;

        // 点2 坐标
        positions[6] = -1.0 * halfw;
        positions[7] = 1.0 * dis;
        positions[8] = 1.0 * halfh;

        // 点3 坐标
        positions[9] = -1.0 * halfw;
        positions[10] = 1.0 * dis;
        positions[11] = -1.0 * halfh;

        // 点4 坐标
        positions[12] = 1.0 * halfw;
        positions[13] = 1.0 * dis;
        positions[14] = -1.0 * halfh;


        // 创建顶点属性中的坐标
        const attributes = new Cesium.GeometryAttributes({
            position: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.DOUBLE,
                componentsPerAttribute: 3,
                values: positions
            })
        });

        // 点的索引
        const indices = new Uint16Array(18);

        indices[0] = 0;
        indices[1] = 4;

        indices[2] = 0;
        indices[3] = 1;

        indices[4] = 0;
        indices[5] = 2;

        indices[6] = 0;
        indices[7] = 3;

        indices[8] = 1;
        indices[9] = 4;

        indices[10] = 4;
        indices[11] = 1;

        indices[12] = 1;
        indices[13] = 2;

        indices[14] = 2;
        indices[15] = 3;

        indices[16] = 3;
        indices[17] = 4;


        let geometry = new Cesium.Geometry({
            attributes: attributes,
            indices: indices,
            primitiveType: Cesium.PrimitiveType.LINES,
            boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
        });

        return geometry;
    }

构建property:
 

reateProperty(positions, times) {
    times = times || 120; // 不设置事件和速度 则默认120s播放完成
    var distance = 0;// 总距离
    var speed;
    for (var i = 0; i < positions.length - 1; i++) {
      var oneP = positions[i];
      var secP = positions[i + 1];
      var dis = Cesium.Cartesian3.distance(oneP, secP);
      distance += dis;
    }
    speed = distance / times; // (米/秒)
    this.allDistance = distance;

    this.startTime = this.viewer.clock.currentTime;
    this.endTime = Cesium.JulianDate.addSeconds(this.startTime, times, new Cesium.JulianDate());
    var property = new Cesium.SampledPositionProperty(); // 模型的property
    let hprProperty = new Cesium.SampledProperty(Cesium.Quaternion); // 姿态property

    var oldTimes = 0;
    for (var i = 1; i < positions.length; i++) {
      var nowP = positions[i];
      var lastP = positions[i - 1];
      const hpr = this.headingPitchs[i];
      if (i == 1) { // 下标从1开始 此处加上第一个点
        property.addSample(this.startTime, positions[0]);

        const firstHpr = this.headingPitchs[0];
        let firstHeadingPitchRoll = new Cesium.HeadingPitchRoll(
          Cesium.Math.toRadians(firstHpr.heading),
          Cesium.Math.toRadians(firstHpr.pitch),
          Cesium.Math.toRadians(0)
        )
        let firstQua = Cesium.Transforms.headingPitchRollQuaternion(positions[0], firstHeadingPitchRoll);
        hprProperty.addSample(this.startTime, firstQua);
      }

      oldTimes += Cesium.Cartesian3.distance(nowP, lastP) / speed;
      var nowTime = Cesium.JulianDate.addSeconds(this.startTime, oldTimes, new Cesium.JulianDate());
      property.addSample(nowTime, nowP);

      let headingPitchRoll = new Cesium.HeadingPitchRoll(
        Cesium.Math.toRadians(hpr.heading),
        Cesium.Math.toRadians(hpr.pitch),
        Cesium.Math.toRadians(0)
      )
      let qua = Cesium.Transforms.headingPitchRollQuaternion(positions[0], headingPitchRoll);
      hprProperty.addSample(nowTime, qua);
    }

    return {
      property, hprProperty
    }
  }

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐