learning_cesium/Clipping.html - 副本.mine

92 lines
3.7 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8" />
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>Learning Cesium!</title>
<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;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
var viewer = new Cesium.Viewer("cesiumContainer", {
geocoder: false, //位置查找
homeButton: false, //视图返回初始位置
sceneModePicker: false, //视角选择器
// baseLayerPicker:false,//底图选择器
navigationHelpButton: false, //导航帮助按钮
animation: false, //动画控制器
// creditContainer:"credit",//版权显示
timeline: false, //时间线
fullscreenButton: false, //全屏控件
vrButton: false,
selectionIndicator: false, //是否显示选中的矩形框
});
// var tileset = new Cesium.Cesium3DTileset({
// url: "./SampleData/cesiumlab/tileset.json",
// dynamicScreenSpaceError: true,
// dynamicScreenSpaceErrorDensity: 0.00278,
// dynamicScreenSpaceErrorFactor: 4.0,
// dynamicScreenSpaceErrorHeightFalloff: 0.25,
// });
// viewer.scene.primitives.add(tileset);
// viewer.zoomTo(tileset);
// 创建裁剪平面:new Cesium.ClippingPlaneCollection(options)
// 一般来说剪切平面的坐标是相对于它们所连接的对象的所以距离设置为0的平面将通过对象的中心进行剪切。
// options:
/**
* panels: ClippingPlane 对象数组,用于选择性地禁用每个平面外部的渲染。
* enabled: 是否激活切面
* modelMatrix: 4 × 4变换矩阵指定相对于剪切平面原始坐标系的附加变换。
* unionClippingRegions: 如果为true则如果某个区域位于集合中任何平面的外部则该区域将被剪切。否则一个区域只有在每个平面的外部才会被剪切。
* edgeColor: 用来突出物体被裁剪的边缘的颜色。
* edgeWidth: 应用于剪切对象的边缘的高亮的宽度(以像素为单位)。
*/
const clippingPlanes = new Cesium.ClippingPlaneCollection({
planes : [
new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1.0, 0.0), 5.0)
],
edgeWidth:1
});
// Create an entity and attach the ClippingPlaneCollection to the model.
const entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 10000),
model : {
uri : './SampleData/models/CesiumDrone.gltf',
minimumPixelSize : 128,
maximumScale : 20000,
clippingPlanes : clippingPlanes
}
});
viewer.zoomTo(entity);
// viewer.trackedEntity = entity;//会使切割效果消失
</script>
</body>
</html>