<!doctype html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport"
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>Document</title>
|
<script src="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Cesium.js"></script>
|
<link href="https://cesium.com/downloads/cesiumjs/releases/1.132/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
|
<style>
|
* {
|
margin: 0;
|
padding: 0;
|
}
|
|
html,
|
body {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.viewer-container {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
}
|
|
#trailer {
|
position: absolute;
|
z-index: 10;
|
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="viewer-container" class="viewer-container">
|
<video id="trailer" muted="" autoplay="" loop="" crossorigin="" controls="">
|
<source src="https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.webm" type="video/webm">
|
<source src="https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.mp4" type="video/mp4">
|
<source src="https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.mov"
|
type="video/quicktime">
|
Your browser does not support the <code>video</code> element.
|
</video>
|
</div>
|
<script>
|
const viewer = new Cesium.CesiumWidget("viewer-container")
|
let cameraPosition = Cesium.Cartesian3.fromDegrees(120, 31, 2000)
|
|
|
|
let heading = 0
|
let pitch = -180
|
let hpr = Cesium.HeadingPitchRoll.fromDegrees(0, pitch, 0)
|
|
function computeFarCenter (position, hpr, far) {
|
const quaternion = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)
|
const rotMat = Cesium.Matrix3.fromQuaternion(quaternion)
|
const dirLocal = new Cesium.Cartesian3(0, 0, far)
|
const dirWorld = Cesium.Matrix3.multiplyByVector(rotMat, dirLocal, new Cesium.Cartesian3())
|
return Cesium.Cartesian3.add(position, dirWorld, new Cesium.Cartesian3())
|
}
|
|
const far = 1000
|
const fov = 60
|
const aspectRatio = 16 / 9
|
let orientation = Cesium.Transforms.headingPitchRollQuaternion(cameraPosition, hpr)
|
|
function createFrustumPrimitive (position, orientation, aspectRatio, fov, far) {
|
const frustum = new Cesium.PerspectiveFrustum({
|
fov: Cesium.Math.toRadians(fov),
|
aspectRatio,
|
far,
|
near: 1.0,
|
|
})
|
const frustumGeometry = new Cesium.FrustumOutlineGeometry({
|
frustum: frustum,
|
origin: position,
|
orientation: orientation,
|
vertexFormat: Cesium.VertexFormat.POSITION_ONLY
|
})
|
const geometryInstance = new Cesium.GeometryInstance({
|
geometry: frustumGeometry,
|
attributes: {
|
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.YELLOW.withAlpha(0.5))
|
}
|
})
|
return new Cesium.Primitive({
|
geometryInstances: geometryInstance,
|
appearance: new Cesium.PerInstanceColorAppearance({
|
flat: true,
|
translucent: true
|
}),
|
asynchronous: false
|
})
|
}
|
|
let primitive = createFrustumPrimitive(cameraPosition, orientation, aspectRatio, fov, far)
|
viewer.scene.primitives.add(primitive)
|
|
let width = far * Math.tan(Cesium.Math.toRadians(fov) * 0.5) * 2
|
let height = width / aspectRatio
|
|
viewer.entities.add({
|
position: new Cesium.CallbackProperty(() => {
|
return computeFarCenter(cameraPosition, hpr, 1000)
|
}, false),
|
orientation: new Cesium.CallbackProperty(() => {
|
return orientation
|
}, false),
|
plane: {
|
plane: new Cesium.Plane(new Cesium.Cartesian3(0, 0, -1), 0),
|
dimensions: new Cesium.Cartesian2(width, height),
|
material: document.getElementById("trailer"),
|
},
|
})
|
|
// setInterval(() => {
|
// heading += -5
|
// if (heading < -360) {
|
// heading = 0
|
// }
|
|
// pitch += 5
|
// if (pitch > 0) {
|
// pitch = -180
|
// }
|
|
// hpr = Cesium.HeadingPitchRoll.fromDegrees(heading, pitch, 0)
|
// orientation = Cesium.Transforms.headingPitchRollQuaternion(cameraPosition, hpr)
|
// primitive && primitive.destroy()
|
// primitive = createFrustumPrimitive(cameraPosition, orientation, aspectRatio, fov, far)
|
// viewer.scene.primitives.add(primitive)
|
// }, 100)
|
|
|
// 飞到该视椎体
|
viewer.flyTo(viewer.entities)
|
|
|
|
|
</script>
|
</body>
|
|
</html>
|
