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> |