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.",          "",          ""        );      });
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！