main

分支 (1)

管理

管理

main

cesium_pdf
/
7.2材质特效篇_分辨率尺度.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>材质特效篇_分辨率尺度</title>
	<script src="./Build/Cesium/Cesium.js"></script>
	<link rel="stylesheet" href="./Build/Cesium//Widgets/widgets.css">
	<style>
		html,
		body,
		#cesiumContainer {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		.toolbar {
			position: absolute;
			top: 10px;
			left: 20px;
			background-color: rgba(0, 0, 0, 0.6);
		}
	</style>
</head>

<body>
	<div id="cesiumContainer">
	</div>
	<div class="toolbar">
		<label style="color: white;">分辨率尺度</label> <br />
		<input type="range" max="2" step="0.1" oninput="change()" id="R" value="1">
		<input type="text" style="width:70px; " id="resolutionValue" value="1" onchange="change2()">
	</div>


	<script>
		Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NGM4MDcxOS05Zjk3LTQ2YmMtYjAxYi0zYTczNWFkYzFlN2EiLCJpZCI6NzY0NTcsImlhdCI6MTYzOTQ2ODI2NH0.Zsp28WnnCpj4wlAIQwIwcSob228zSaz510QE3zKQN58';
		var viewer = new Cesium.Viewer("cesiumContainer", {
			animation: false, //是否显示动画工具
			timeline: false,  //是否显示时间轴工具
			fullscreenButton: false,  //是否显示全屏按钮工具
		});

		var tileset = viewer.scene.primitives.add(
			new Cesium.Cesium3DTileset({
				url: './倾斜摄影/大雁塔3DTiles/tileset.json',
			}));
		viewer.zoomTo(tileset);

			/**
			 * 总结：
			 * 		在Cesium 中，可以通过 viewer.resolutionScale 获取或者设置渲染分辨率的缩放比例。
			 * 当该属性值小于 1.0 时，可以改善性能不佳的设备的显示效果，而当该属性值大于 1.0 时，将以
			 * 更快的速度呈现分辨率，并缩小比例，从而提高视觉保真度。例如，如果窗口的尺寸为 640 像素×480像素
			 * 则将 viewer.resolutionScale 的值设置为 0.5，会导致场景以 320 像素×240 像素渲染，之后
			 * 设置为 2.0，会导致场景以 1280 像素×960 像素渲染。
			*/

		function change() {
			//拿到滑动条当前值
			var resolutionScale = Number(R.value);
			//将值约束在0.1和2.0之间，避免分辨率为 0 或者因分辨率太高而导致浏览器崩溃。
			resolutionScale = Cesium.Math.clamp(resolutionScale, 0.1, 2.0); // Math.clamp 是一个函数，用于将一个数值限制在给定的最小值和最大值之间
			//文本框显示当前值
			resolutionValue.value = resolutionScale;
			//修改分辨率尺度
			viewer.resolutionScale = resolutionScale; // 重点就是这一行
		}
		function change2() {
			var resolutionScale = Number(resolutionValue.value);
			//将值约束在0.1和2.0之间
			resolutionScale = Cesium.Math.clamp(resolutionScale, 0.1, 2.0);
			R.value = resolutionScale;
			change();
		}


	</script>
</body>

</html>