<Cesium：如何创建视频显示窗口或实体>
<Cesium：如何创建视频显示窗口或实体>2023年4月12日
Html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#trailer {
position: absolute;
top: 75px;
left: 75px;
width: 320px;
height: 240px;
}
</style>
</head>
<body>
<videoid="trailer" controls loop>
<source src="https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
</body>
</html>
本帖最后由 tzbm123456 于 2023-4-12 11:18 编辑
JS文件：
const viewer = new Cesium.Viewer("cesiumContainer", {
showRenderLoopErrors: false,
shouldAnimate: true,
});
// 获取Id实体
const videoElement = document.getElementById("trailer");
// 创建球体
const sphere = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-79, 39, 1000),
ellipsoid: {
radii: new Cesium.Cartesian3(1000, 1000, 1000),
material: videoElement,
},
});
const sphere2 = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-79, 39, 5000),
ellipsoid: {
radii: new Cesium.Cartesian3(2000, 1000, 1000),
material: videoElement,
},
});
// Cesium.Viewer的成员变量trackedEntity功能为获取或设置相机当前正在跟踪的Entity实例
viewer.trackedEntity = sphere2;
let synchronizer;
Sandcastle.addToggleButton("Clock synchronization", false, function (
checked
) {
// By default, the video plays normally and simply shows
// whatever frame the video is currently on.
// We can synchronize the video with the scene clock
// using a VideoSynchronizer.
if (Cesium.defined(synchronizer)) {
synchronizer = synchronizer.destroy();
videoElement.playbackRate = 1.0;
return;
}
synchronizer = new Cesium.VideoSynchronizer({
clock: viewer.clock,
element: videoElement,
});
});
// Since it's just an image material, we can modify the number
// of times the video repeats in each direction..
let isRepeating = true;
Sandcastle.addToggleButton("Image Repeat", isRepeating, function (
checked
) {
isRepeating = checked;
});
// sphere.ellipsoid.material为ImageMaterialProperty类型对象
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 = 8;
} 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.",
"",
""
);
});
页:
[1]