请选择 进入手机版 | 继续访问电脑版

01BIM社区

 找回密码
 立即注册

扫一扫,访问微社区

查看: 1479|回复: 3

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

[复制链接]

156

主题

650

帖子

2568

积分

金牌会员

Rank: 6Rank: 6

积分
2568
发表于 2023-4-12 10:04:33 | 显示全部楼层 |阅读模式
<Cesium:如何创建视频显示窗口或实体>

2023年4月12日

回复

使用道具 举报

156

主题

650

帖子

2568

积分

金牌会员

Rank: 6Rank: 6

积分
2568
 楼主| 发表于 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>

回复 支持 反对

使用道具 举报

156

主题

650

帖子

2568

积分

金牌会员

Rank: 6Rank: 6

积分
2568
 楼主| 发表于 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.",
    "",
    ""
  );
});
回复 支持 反对

使用道具 举报

156

主题

650

帖子

2568

积分

金牌会员

Rank: 6Rank: 6

积分
2568
 楼主| 发表于 2023-4-12 11:30:27 | 显示全部楼层
QQ截图20230412112639.png

QQ截图20230412112923.png
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|01BIM社区 - 最专业的BIM技术交流平台 ( 渝ICP备15000873号 )

GMT+8, 2024-7-18 10:47 , Processed in 0.363931 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表