province-vue-qh
/
supervise


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

	<head>
		<meta charset="UTF-8">
		<title>WebGL三维场景</title>
		<style>
			body {
				margin: 0;
				overflow: hidden;
				/* 隐藏body窗口区域滚动条 */
			}
			#imgCompass{
			    width: 10%;
			    position: absolute;
			    margin-top: 320px;
			    margin-left: 50px;
			    opacity: 0.8;
			 }

			.label {
				color: #FFF;
				font-family: sans-serif;
				padding: 2px;
				background: rgba(0, 0, 0, .6);
				display: none;
			}

			.active {
				display: block;
			}

			#CTXX {
				width: 300px;
				height: 130px;
				position: absolute;
				margin-top: 134px;
				background-color: #b9c5c5;
				/* margin-left: 22px; */
				right: 20px;
				z-index: 9999;
			}

			#CTXXTile,
			#CTWDTile {
				width: 100%;
				height: 30px;
				background-color: black;
			}

			#CW{
				width:100px;
				height:35px;
				line-height:35px;
				background-color:lightblue;
				position: absolute;
				margin-top: 84px;
				/* margin-left: 22px; */
				right: 20px;
				z-index: 9999;
			}

			#CTXXContent {
				width: 100%;
				height: 100px;
			}

			#LK1 {
				margin-left: 9px;
				margin-top: 3px;
			}

			#CTWD {
				z-index: 9999;
				width: 300px;
				height: 158px;
				position: absolute;
				margin-top: 277px;
				background-color: #b9c5c5;
				/* margin-left: 22px; */
				right: 20px;
			}

			.ctbtn {
				width: 145px;
				height: 30px;
				margin-left: 2px;
				background-color: lightblue;
				border-color: azure;
			}

			#CTTitle {
				width: 100%;
				height: 58px;
				background-color: #1a1a1a;
				position: absolute;
			}

			/* 下拉框 */
			.searchable-select {
				top: 100px;
				left: 10px;
				z-index: 100;
			}
		</style>
		<!--引入three.js三维引擎-->
		<script src="js/three.js"></script>
		<!-- 引入threejs扩展控件OrbitControls.js -->
		<script src="js/OrbitControls.js"></script>
		<!-- 引入obj模型加载库OBJLoader.js -->
		<script src="js/FBXLoader.js"></script>
		<!-- 辅助文件 -->
		<script src="js/inflate.min.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/CSS2DRenderer.js"></script>
		<script src="js/GLTFLoader.js"></script>
		<script src="js/LegacyJSONLoader.js"></script>
		<script src="js/Tween.js"></script>
		<script src="js/onEvent.js"></script>
		<script src="js/layer.js"></script>
		<link rel="stylesheet" type="text/css" href="css/layer.css" />
		<script src="js/jquery.rotate.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.searchableSelect.js"></script>
		<link href="js/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
	</head>

	<body>
		<select id="select">
		</select>
		</select>

		<div id="CT" onload="draw();">
			<div id="CTTitle" style="z-index: 9999;">
				<h2 style="position: absolute;color: #eee;margin-left: 18px;">粮情信息三维展示</h2>
				<img id="imgCompass" src="img/clock.png" />
			</div>
		</div>
		<button id="CW" onclick="oncwClick()">仓温</button>
		<div id="CTXX">
			<div id="CTXXTile">
				<b style="position: absolute;margin-top: 6px;margin-left: 12px;color: beige;opacity: 0.6;">仓体信息</b>
			</div>
			<div id="CTXXContent">
				<div id="LK1">
					<i>粮食等级：</i>
					<i id="LSDJ"></i>
				</div>
				<div id="LK1">
					<i>粮库名称：</i>
					<i id="LKMC"></i>
				</div>
				<div id="LK1">
					<i>保管员：</i>
					<i id="LKBGY"></i>
				</div>
				<div id="LK1">
					<i>粮食品种：</i>
					<i id="LSPZ"></i>
				</div>
			</div>
		</div>
		<div id="CTWD">
			<div id="CTWDTile">
				<b style="position: absolute;margin-top: 6px;margin-left: 12px;color: beige;opacity: 0.6;">仓体温度</b>
			</div>
			<div id="LK1">
				<i>仓内湿度:</i>
				<i id="CNSD"></i>
			</div>
			<div id="LK1">
				<i>仓内温度:</i>
				<i id="CNWD"></i>
			</div>
			<div id="LK1">
				<i>仓外湿度:</i>
				<i id="CWSD"></i>
			</div>
			<div id="LK1">
				<i>仓外温度:</i>
				<i id="CWWD"></i>
			</div>
			<button class="ctbtn" onclick="CWXQ()">测温详情</button>
			<button class="ctbtn" onclick="HFQJ()">恢复全景</button>
		</div>
		<script>
			var hwbm = location.href.split("?")[1].split("&&")[0];
			var cfbm = location.href.split("?")[1].split("&&")[1];
			console.log(hwbm);
			// $.each(location.href.split("?")[1].split("&"),function(i,n){
			// 	LCcs.push(n.split("=")[1]);
			// })
			// layer.msg('1111111', {
			// 	time: 20000, //20s后自动关闭
			// 	btn: ['确认'],
			// 	btnAlign: 'c'
			// });
			function isIE() {
				if (!!window.ActiveXObject || "ActiveXObject" in window) {
					return true;
				} else {
					return false;
				}
			}
			if (isIE()) {
				var script = document.createElement('script');
				script.type = 'text/javaScript';
				script.src = 'http://cdn.jsdelivr.net/bluebird/3.5.0/bluebird.min.js'; // bluebird 文件地址
				document.getElementsByTagName('head')[0].appendChild(script);
			}

			var CGQValue = [];
			var high;
			var whign;
			var low;
			var wlow;
			var LCcs = []; //用于接收地址参数
			var SensorID = -1;
			var AAA = -1;
			var BBB = 0;
			var CCC;
			var CGQcase; //根据接口返回规定不同的测温渲染状态0，1，2

			var CGQArray = [];
			var MeshArray = [];
			/**
			 * 创建场景对象Scene
			 */
			var scene = new THREE.Scene();
			scene.background = new THREE.CubeTextureLoader()
				.setPath("pic/")
				.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg', ])

			var axes = new THREE.AxesHelper(230);
			// scene.add(axes);
			/**
			 * 光源设置
			 */
			//点光源
			var point = new THREE.PointLight(0xffffff);
			point.position.set(400, 200, 300); //点光源位置
			scene.add(point); //点光源添加到场景中
			//环境光
			var ambient = new THREE.AmbientLight(0xFFFFF0);
			scene.add(ambient);

			/**
			 * 相机设置
			 */
			var width = window.innerWidth; //窗口宽度
			var height = window.innerHeight; //窗口高度
			var k = width / height; //窗口宽高比
			var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
			//创建相机对象
			// var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			var camera = new THREE.PerspectiveCamera(80, width / height, 1, 1000);
			scene.add(camera);
			camera.position.set(142, 25, 0); //设置相机位置
			camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
			// THREE.onEvent(scene,camera);

			var geometryPlane = new THREE.PlaneGeometry(500, 500, 500);
			var texturePlane = new THREE.TextureLoader().load("img/cizhuan.jpg");
			texturePlane.wrapS = texturePlane.wrapT = THREE.RepeatWrapping;
			texturePlane.repeat.set(35, 35);
			var materialPlane = new THREE.MeshBasicMaterial({
				color: 0xFFFACD,
				side: THREE.DoubleSide,
				map: texturePlane
			});
			var meshPlane = new THREE.Mesh(geometryPlane, materialPlane);
			meshPlane.rotateX(Math.PI / 2);
			scene.add(meshPlane);

			var mixer = null; //声明一个混合器变量
			var loader = new THREE.FBXLoader(); //创建一个FBX加载器
			loader.load("model/10.fbx", function(obj) {
				console.log(obj)
				scene.add(obj)
				obj.scale.set(4, 4, 4);

				obj.position.set(1195, 0, 700);
				obj.rotateY(Math.PI / 2);
				obj.translateZ(50);
			})

			/**
			 * 加载 glTF 格式的模型
			 */
			var loader = new THREE.GLTFLoader();
			loader.load('camera.glb', function(obj) {
				console.log(obj);
				obj.scene.position.set(0, 25, -86);
				obj.scene.scale.set(0.04, 0.04, 0.04);
				scene.add(obj.scene);

			});

			var p1 = {
				x: 30,
				y: 25,
				z: 0
			};
			var position = camera.position;
			var tween1 = new TWEEN.Tween(position);
			tween1.to(p1, 5000);
			var update = function() {
				// camera.position.set(p1.x,p1.y,p1.z);
				camera.lookAt(20, 20, 0);
				controls.target = new THREE.Vector3(20, 20, 0);
			};
			tween1.onUpdate(update);
			tween1.easing(TWEEN.Easing.Cubic.Out);
			// setTimeout(function() {tween1.start();}, 3000);

			// $.ajax({
			//  	type: "get",
			//  	url: "http://124.193.70.90:9028/intelligents/wareHouseBasicInfo/getStorehouse?orgId=164&cfCode=005&libraryType=0",
			//  	data: {},
			//  	async:true,
			//  	dataType: "json",
			//  	success: function(e) {
			//  		console.log(e);
			//  		$("#LSDJ").text(e.data.dj);
			//  		$("#LKMC").text(e.data.lkmc);
			//  		$("#LKBGY").text(e.data.keeperName);
			//  		$("#LSPZ").text(e.data.pz)
			//  	}
			//  });
			// 
			// $.ajax({
			// 	type: "get",
			// 	url: "http://124.193.70.90:9028/intelligents/temperatureRecord/findById?id=2016420190731080044000003",
			// 	data: {},
			// 	async:true,
			// 	dataType: "json",
			// 	success: function(e) {
			// 		console.log(e);
			// 		$("#CNSD").text(e.data.inh);
			// 		$("#CNWD").text(e.data.intemp);
			// 		$("#CWWD").text(e.data.outtemp);
			// 		$("#CWSD").text(e.data.outh)
			// 	}
			// });
			// 
			$.ajax({
				type: "post",
				url: 'http://'+window.location.host+'/api/kjjg/DXPLQJC/yzMap?'+hwbm,
				data: {},
				dataType: "json",
				async: true,
				success: function(e) {
					high = e.data.high;
					whign = e.data.whigh;
					low = e.data.low;
					wlow = e.data.wlow
					console.log(high);
					if (high == undefined && whign == undefined && low == undefined && wlow == undefined) {
						CGQcase = 0;
					} else if (high != undefined && whign == undefined && low == undefined && wlow == undefined) {
						CGQcase = 1;
					} else if (high != undefined && whign != undefined && low != undefined && wlow != undefined) {
						CGQcase = 2;
					}
				}
			});

			//仓房信息
			
			$.ajax({
				type: "post",
				url:'http://'+window.location.host+'/api/kjjg/DXPLQJC/cfData?'+hwbm,
				data: {},
				dataType: "json",
				async:false,
				success: function(e) {
					$("#LSDJ").html(e.data.djbm);
					$("#LKMC").html(e.data.cfmc);
					$("#LKBGY").html(e.data.bgy);
					$("#LSPZ").html(e.data.pzbm);
				}
			});
			//仓内信息
			
			$.ajax({
				type: "post",
				url:'http://'+window.location.host+'/api/kjjg/DXPLQJC/lwData?'+hwbm,
				data: {},
				dataType: "json",
				async:false,
				success: function(e) {
					$("#CNSD").html(e.data.cfns+"%");
					$("#CNWD").html(e.data.cfnw+"℃");
					$("#CWSD").html(e.data.cfws+"%");
					$("#CWWD").html(e.data.cfww+"℃");
				}
			});


			$.ajax({
				type: "post",
				url: 'http://'+window.location.host+'/api/kjjg/DXPLQJC/lwList?'+hwbm,
				data: {},
				dataType: "json",
				async: false,
				success: function(e) {
					for (var i = e.data.length - 1; i >= 0; i--) {
						document.getElementById("select").options.add(new Option(e.data[i], e.data[i]));
					}
					console.log(e);

				}
			});
			//下拉框模糊查询

			$(function() {
				$('#select').searchableSelect();
			});

			var setDate;
			//下拉框选择后触发事件
			// setDate = $(".searchable-select-holder").html();//初始化
			//鼠标滑轮
			function closeScroll(){
				controls.enableZoom = false;
			}
			function openScroll(){
				controls.enableZoom = true;
			}
			//重新选择时间
			function setselect() {
				controls.enableZoom = true;
				if (CGQArray.length != 0) {
					$.each(CGQArray, function(i, n) {
						scene.remove(n);
					})
					CGQArray = [];
				}
				if (MeshArray.length != 0) {
					$.each(MeshArray, function(i, n) {
						scene.remove(n);
					})
					MeshArray = [];
				}
				setDate = $(".searchable-select-holder").html();
				console.log(setDate);
				$.ajax({
					// type: "get",
					// url: "http://124.193.70.90:9028/intelligents/temperatureRecord/findByHouseAndTimes?lqId=2016420190731080044000003",
					type: "post",
					url: 'http://'+window.location.host+'/api/kjjg/DXPLQJC/lqList?'+hwbm+"&jcsj=" + setDate,
					data: {},
					// async:true,
					dataType: "json",
					error: function() {
						layer.msg('查询测温各点数据调用异常', {
							time: 20000, //20s后自动关闭
							btn: ['确认'],
							btnAlign: 'c'
						});
					},
					success: function(e) {
						console.log(e.data);
						AAA = -1;
						BBB = 0;
						CCC;
						//取第一个数
						for (let i in e.data[0]) {
							AAA++
						}
						console.log(AAA)
						//取第二个数
						var BBBArray = [];
						var arr = []
						$.each(e.data, function(i, n) {
							BBBArray.push(n[1]);
						})
						console.log(BBBArray);
						$.each(BBBArray, function(i, n) {
							if (i + 1 == n.split("-")[1]) {
								BBB++
							}
						})
						console.log(BBB);
						//取第三个数
						CCC = BBBArray.length / BBB
						console.log(CCC);

						var long = 170 / BBB;
						var wide = 50 / AAA;
						var tall = 35 / CCC;

						var geometry = new THREE.CylinderGeometry(.03, .03, tall * CCC);
						var material = new THREE.MeshLambertMaterial({
							color: 0
						});
						for (var x = AAA; x > 0; x--) {
							for (var z = 0; z < BBB; z++) {
								var mesh = new THREE.Mesh(geometry, material);
								mesh.position.set(x * wide, 0, z * long);
								mesh.translateY(CCC * tall / 2);
								mesh.translateZ(-(BBB - 1) * long / 2);
								mesh.translateX(-(AAA - 2) * wide / 2);
								// scene.add(mesh);
								MeshArray.push(mesh);
							}
						}
						var ckfloor = new THREE.BoxGeometry(180, 75, 1);
						var textureckfloor = (new THREE.TextureLoader).load("img/diban.jpg");
						textureckfloor.wrapS = textureckfloor.wrapT = THREE.RepeatWrapping;
						textureckfloor.repeat.set(8, 8);
						var ckfloormaterial = new THREE.MeshBasicMaterial({
							color: 16121850,
							map: textureckfloor
						});
						var ckfloormesh = new THREE.Mesh(ckfloor, ckfloormaterial);
						ckfloormesh.rotateX(Math.PI / 2);
						ckfloormesh.rotateZ(Math.PI / 2);

						ckfloormesh.position.set(5, 0.5, 3);
						scene.add(ckfloormesh);

						var tubeMaterial = new THREE.MeshPhongMaterial({
							// map: texture,
							color: 0x000000,
							transparent: true,
						});
						for (var x = AAA; x > 0; x--) {
							var curve = new THREE.CatmullRomCurve3([
								new THREE.Vector3(x * wide, CCC * tall, 0),
								new THREE.Vector3(x * wide, CCC * tall, (BBB - 1) * long),
							], false /*是否闭合*/ );
							var tubeGeometry = new THREE.TubeGeometry(curve, 2, 0.05, 5, false);
							var tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
							tube.translateZ(-(BBB - 1) * long / 2);
							tube.translateX(-(AAA - 2) * wide / 2);
							scene.add(tube);
						}
						var sphere = new THREE.SphereGeometry(0.8, 20, 20);

						$.ajax({
							type: "post",
							url: 'http://'+window.location.host+'/api/kjjg/DXPLQJC/lqList?'+hwbm+"&jcsj=" + setDate,
							data: {},
							async: false,
							dataType: "json",
							success: function(e) {
								console.log(e);
								$.each(e.data, function(e, a) {
									for (var t = 2; t < AAA + 2; t++) {
										CGQValue.push(a[t])
									}
								});
								console.log(CGQValue);
								for (var a = CCC; a > 0; a--) {
									for (var t = 0; t < BBB; t++) {
										for (var r = AAA; r > 0; r--) {
											SensorID = SensorID + 1;
											var o = CGQValue[SensorID];
											switch (CGQcase) {
												case 0:
													if (o == 0) {
														var n = new THREE.MeshLambertMaterial({
															color: "#636363",
															wireframe: false,
															transparent: true,
															opacity: 0.01
														})
													} else {
														var n = new THREE.MeshLambertMaterial({
															color: 8190976,
															wireframe: false,
															transparent: true,
															opacity: .7
														})
													}
													break;
												case 1:
													if (o >= high) {
														var n = new THREE.MeshLambertMaterial({
															color: 16711680,
															wireframe: false,
															transparent: true,
															opacity: .9
														})
													} else {
														var n = new THREE.MeshLambertMaterial({
															color: 8190976,
															wireframe: false,
															transparent: true,
															opacity: .7
														})
													}
													break;
												case 2:
													if (o >= high && o != 250) {
														var n = new THREE.MeshLambertMaterial({
															color: 16711680,
															wireframe: false,
															transparent: true,
															opacity: .9
														})
													} else if (o == 0) {
														var n = new THREE.MeshLambertMaterial({
															color: "#636363",
															wireframe: false,
															transparent: true,
															opacity: 0.01
														})
													} else if (o <= low) {
														var n = new THREE.MeshLambertMaterial({
															color: "#00F5FF",
															wireframe: false,
															transparent: true,
															opacity: .7
														})
													} else if (o >= whign && o < high) {
														var n = new THREE.MeshLambertMaterial({
															color: 15658496,
															wireframe: false,
															transparent: true,
															opacity: .7
														})
													} else if (o >= low && o < wlow) {
														var n = new THREE.MeshLambertMaterial({
															color: "#00F5FF",
															wireframe: false,
															transparent: true,
															opacity: .7
														})
													} else if (o < whign && o > wlow) {
														var n = new THREE.MeshLambertMaterial({
															color: 8190976,
															wireframe: false,
															transparent: true,
															opacity: .7
														})
													}
													break;
											}

											var s = new THREE.Mesh(sphere, n);
											s.position.set(r * wide, (a) * 2, t * long);
											s.translateZ(-(BBB - 1) * long / 2);
											s.translateX(-(AAA - 2) * wide / 2);
											s.rotateX(Math.PI / 2);
											s.name = SensorID.toString();

											var d = document.createElement("div");
											d.className = "label";
											d.id = "label" + SensorID.toString();
											d.textContent = CGQValue[SensorID];
											d.style.marginTop = "-1em";
											var c = new THREE.CSS2DObject(d);
											// c.name = "传感器" + SensorID.toString();
											// c.position.set(r,a,t);
											// c.position.set(poi.x,poi.z,poi.y);
											s.add(c);											
											if(s.material.opacity<0.1){
												s.remove(c);
												scene.remove(s);
											}
											CGQArray.push(s);

											// s.on('click', function(m) {
											// 	console.log(m);
											// 	if (m.children.length > 1) {
											// 		alert(m.children[1].element.innerText);
											// 	} else{
											// 		alert(m.children[0].element.innerText);
											// 	}
											// });

										}
									}

								}
								$.each(CGQArray, function(i, n) {
									scene.add(n);
								})
							}
						});
						$.each(MeshArray, function(i, n) {
							scene.add(n);
						})
						
					}
				});
			};
			//仓房信息

			$.ajax({
				type: "post",
				url: 'http://'+window.location.host+'/api/kjjg/DXPLQJC/cfData?'+hwbm,
				data: {},
				dataType: "json",
				async: false,
				success: function(e) {
					for (var i = e.data.length - 1; i >= 0; i--) {
						document.getElementById("select").options.add(new Option(e.data[i], e.data[i]));
					}
					console.log(e);
				}
			});

			function oncwClick() {
				$.ajax({
				type: "post",
				url: 'http://'+window.location.host+'/api/kjjg/DXPMYSQLDATA/selectList?'+cfbm,
				data: {},
				dataType: "json",
				async: false,
				success: function(e) {
					
				}
			});
			}


			//声明raycaster和mouse变量
			var raycaster = new THREE.Raycaster();
			var mouse = new THREE.Vector2();

			function onMouseClick(event) {
				//通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
				mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
				mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
				// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
				raycaster.setFromCamera(mouse, camera);

				// 获取raycaster直线和所有模型相交的数组集合  
				var intersects = raycaster.intersectObjects(scene.children);
				// console.log(intersects[0].object.name);
				$('#label' + intersects[0].object.name).addClass("active");
				setTimeout(function() {
					$('#label' + intersects[0].object.name).removeClass("active");
				}, 3000)
				// document.body.style.backgroundImage="url(earth/map.jpg)";
				//将所有的相交的模型的颜色设置为红色，如果只需要将第一个触发事件，那就数组的第一个模型改变颜色即可
				// for ( var i = 0; i < intersects.length; i++ ) {
				// 	// intersects[0].object.material.color.set( 0xff0000 ); 
				// 	 console.log(intersects[0].object);
				// }
			}
			window.addEventListener('dblclick', onMouseClick, false);


			labelRenderer = new THREE.CSS2DRenderer;
			labelRenderer.setSize(window.innerWidth, window.innerHeight);
			labelRenderer.domElement.style.position = "absolute";
			labelRenderer.domElement.style.top = 0;
			document.body.appendChild(labelRenderer.domElement);


			/**
			 * 创建渲染器对象
			 */
			var renderer = new THREE.WebGLRenderer();
			renderer.setSize(width, height); //设置渲染区域尺寸
			renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
			document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

		//创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
			var controls = new THREE.OrbitControls(camera);
			controls.maxPolarAngle = 1.3;
			controls.minPolarAngle = 0.8;

			// 创建一个时钟对象Clock
			 var clock1 = new THREE.Clock();
			    // 渲染函数
			    function render() {
			      renderer.render(scene, camera); //执行渲染操作
			   labelRenderer.render(scene, camera);
			      requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
			   TWEEN.update();
			 
			   var dir = new THREE.Vector3(-camera.position.x, 0, -camera.position.z).normalize();
			   var theta = Math.atan2(-dir.x, -dir.z);
			   $('#imgCompass').rotate(THREE.Math.radToDeg(theta));
			   
			    var delta = clock1.getDelta();
			    controls.update(delta);
			  
			    }
			    
			render();
			
			function CWXQ() {
				tween1.start();
			}

			function HFQJ() {
				controls.reset();
			}
		</script>
	</body>

</html>