140 lines
5.9 KiB
HTML
140 lines
5.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
|||
|
|
<title>裁剪效果</title>
|
|||
|
|
<!-- <script src="https://cesiumjs.org/releases/1.57/Build/Cesium/Cesium.js"></script>
|
|||
|
|
<link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> -->
|
|||
|
|
<script src="./Build168/Cesium/Cesium.js"></script>
|
|||
|
|
<style>
|
|||
|
|
@import url(./Build/Cesium/Widgets/widgets.css);
|
|||
|
|
html,
|
|||
|
|
body,
|
|||
|
|
#cesiumContainer {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background-color: #000000;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div id="cesiumContainer"></div>
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
Cesium.Ion.defaultAccessToken =
|
|||
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|||
|
|
|
|||
|
|
var viewer = new Cesium.Viewer('cesiumContainer', {
|
|||
|
|
// imageryProvider: new Cesium.UrlTemplateImageryProvider({
|
|||
|
|
// url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'
|
|||
|
|
// })
|
|||
|
|
});
|
|||
|
|
var scene = viewer.scene;
|
|||
|
|
|
|||
|
|
// viewer.scene.globe.depthTestAgainstTerrain = true;
|
|||
|
|
|
|||
|
|
var targetY = 0; //ClippingPlane距离原点的距离
|
|||
|
|
var selectedPlane; // 鼠标选中的ClippingPlane
|
|||
|
|
|
|||
|
|
// 注册鼠标按下事件
|
|||
|
|
viewer.screenSpaceEventHandler.setInputAction(function (movement) {
|
|||
|
|
var pickedObject = scene.pick(movement.position);
|
|||
|
|
if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id) && Cesium.defined(pickedObject.id.plane)) {
|
|||
|
|
selectedPlane = pickedObject.id.plane;
|
|||
|
|
selectedPlane.material = Cesium.Color.BLUE.withAlpha(0.5); // 更改选中的切面颜色
|
|||
|
|
selectedPlane.outlineColor = Cesium.Color.WHITE;
|
|||
|
|
scene.screenSpaceCameraController.enableInputs = false; // 取消默认的鼠标一切输入事件
|
|||
|
|
}
|
|||
|
|
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
|
|||
|
|
|
|||
|
|
// 注册鼠标松开事件
|
|||
|
|
viewer.screenSpaceEventHandler.setInputAction(function () {
|
|||
|
|
if (Cesium.defined(selectedPlane)) {
|
|||
|
|
selectedPlane.material = Cesium.Color.RED.withAlpha(0.6); // 恢复选中的切面颜色
|
|||
|
|
selectedPlane.outlineColor = Cesium.Color.WHITE;
|
|||
|
|
selectedPlane = undefined;
|
|||
|
|
}
|
|||
|
|
scene.screenSpaceCameraController.enableInputs = true; // 恢复默认的鼠标一切输入事件
|
|||
|
|
}, Cesium.ScreenSpaceEventType.LEFT_UP);
|
|||
|
|
|
|||
|
|
// 注册鼠标移动事件
|
|||
|
|
viewer.screenSpaceEventHandler.setInputAction(function (movement) {
|
|||
|
|
if (Cesium.defined(selectedPlane)) {
|
|||
|
|
var deltaY = movement.startPosition.y - movement.endPosition.y; // 计算鼠标移动的过程中产生的垂直高度距离
|
|||
|
|
targetY += deltaY;
|
|||
|
|
}
|
|||
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 改变tileset高度
|
|||
|
|
function change(height) {
|
|||
|
|
height = Number(height);
|
|||
|
|
if (isNaN(height)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
|
|||
|
|
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
|
|||
|
|
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
|
|||
|
|
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
|
|||
|
|
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 创建切面平面集合
|
|||
|
|
var clippingPlanes = new Cesium.ClippingPlaneCollection({
|
|||
|
|
planes: [
|
|||
|
|
new Cesium.ClippingPlane(new Cesium.Cartesian3(0, 1, 0), 0) // 平面的方向(x,y,z) 以及 平面到原点的距离
|
|||
|
|
],
|
|||
|
|
edgeColor: Cesium.Color.WHITE, // 平面切割时模型的边缘颜色
|
|||
|
|
edgeWidth: 0 // 平面切割时模型的边缘宽度
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 加载大雁塔模型
|
|||
|
|
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
|
|||
|
|
url: "./SampleData/Cesium3DTiles/dayanta/tileset.json",
|
|||
|
|
clippingPlanes: clippingPlanes
|
|||
|
|
}));
|
|||
|
|
// 动态改变ClippingPlane距离原点的距离
|
|||
|
|
function createPlaneUpdateFunction(plane) {
|
|||
|
|
return function () {
|
|||
|
|
plane.distance = targetY + 0;
|
|||
|
|
return plane;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
tileset.readyPromise.then(function () {
|
|||
|
|
|
|||
|
|
// 当模型加载完成后，改变高度，3dtile模型一般都会飘在空中
|
|||
|
|
change(-410);
|
|||
|
|
|
|||
|
|
var boundingSphere = tileset.boundingSphere; // 模型的包围球范围
|
|||
|
|
var radius = boundingSphere.radius; // 长度
|
|||
|
|
|
|||
|
|
viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, radius * 4.0));
|
|||
|
|
|
|||
|
|
// 加载plane可视化切面平面
|
|||
|
|
for (var i = 0; i < clippingPlanes.length; ++i) {
|
|||
|
|
var plane = clippingPlanes.get(i);
|
|||
|
|
viewer.entities.add({
|
|||
|
|
position: boundingSphere.center,
|
|||
|
|
plane: {
|
|||
|
|
dimensions: new Cesium.Cartesian2(radius , radius),
|
|||
|
|
material: Cesium.Color.RED.withAlpha(0.6),
|
|||
|
|
plane: new Cesium.CallbackProperty(createPlaneUpdateFunction(plane), false),
|
|||
|
|
outline: true,
|
|||
|
|
outlineColor: Cesium.Color.WHITE
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|