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.",
"",
""
);
});
