Cesium 案例(四) Video

   Sandcastle-header.js存储在Cesium中Apps/Sandcastle/Sandcastle-header.js的位置,该js文件时用于创建下拉框和带选中框的按钮,引入该文件后,就会有一个Sandcastle全局对象,包含着很多方法。
 
 // videoElement = document.getElementById("trailer");
videoElement = "../images/_DSC0718-239.jpg";(视频导入有问题,尝试用图片替代,完成替代)
      Cesium.Ion.defaultAccessToken =
        "token";
      const viewer = new Cesium.Viewer("cesiumContainer", {
        showRenderLoopErrors: false,
        //如果为 true,如果出现渲染循环错误,
        //此小部件将自动向用户显示包含错误的 HTML 面板。
        shouldAnimate: true,
      });
      const sphere = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(
          104,
          31.75,
          1000 //高度 可选 米为单位
        ),
        //从以度为单位的经度和纬度值返回 Cartesian3 位置。
        ellipsoid: {
          radii: new Cesium.Cartesian3(1000, 1000, 1000),
          //指定椭球半径的 Cartesian3 属性。
          material: videoElement,
        },
      });
      viewer.trackedEntity = sphere;
      //获取或设置相机当前正在跟踪的实体实例。

      let synchronizer;

      Sandcastle.addToggleButton(
        //外部文件引入用于进行ui设计
        "Clock synchronization",
        false,
        function (checked) {
          if (Cesium.defined(synchronizer)) {
            synchronizer = synchronizer.destroy();
            videoElement.playbackRate = 1.0;
            return;
          }
          synchronizer = new Cesium.VideoSynchronizer({
            clock: viewer.clock,
            element: videoElement,
          });
        }
      );
      let isRepeating = true;
      Sandcastle.addToggleButton(
        "Image Repeat",
        isRepeating,
        function (checked) {
          isRepeating = checked;
        }
      );

      sphere.ellipsoid.material.repeat = new Cesium.CallbackProperty(function (
        time,
        result
      ) {
        if (!Cesium.defined(result)) {
          result = new Cesium.Cartesian2();
        }
        if (isRepeating) {
          result.x = 8;
          result.y = 2;
        } else {
          result.x = 1;
          result.y = 1;
        }
        return result;
      },
      false);

      // Like Image, the video element doesn't have to be part of the DOM or
      // otherwise on the screen to be used as a texture.
      Sandcastle.addToggleButton("Video Overlay", true, function (checked) {
        if (checked) {
          videoElement.style.display = "";
        } else {
          videoElement.style.display = "none";
        }
      });

      // Older browsers do not support WebGL video textures,
      // put up a friendly error message indicating such.
      viewer.scene.renderError.addEventListener(function () {
        if (!videoElement.paused) {
          videoElement.pause();
        }
        viewer.cesiumWidget.showErrorPanel(
          "This browser does not support cross-origin WebGL video textures.",
          "",
          ""
        );
      });

热门相关:帝少的专属:小甜心,太缠人