<Cesium：如何创建视频显示窗口或实体>

tzbm123456 · 发表于 2023-4-12 10:04:33

<Cesium：如何创建视频显示窗口或实体>

2023年4月12日

tzbm123456 · 发表于 2023-4-12 10:06:31

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>

<video  id="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 10:07:44

本帖最后由 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.",
"",
""
  );
});

tzbm123456 · 发表于 2023-4-12 11:30:27

		自动登录	找回密码
密码			立即注册