From 37f60d85f75fdf0395404ba4fa90cd0039206872 Mon Sep 17 00:00:00 2001
From: lxc <237024898@qq.com>
Date: Wed, 21 Dec 2022 09:05:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E7=AD=BE=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/.DS_Store   | Bin 6148 -> 6148 bytes
 js/app.js          | 107 +++++----
 js/units/sprite.js |   0
 lndexUASB.html     |  41 ++--
 lndexUASB2.html    | 574 +++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 659 insertions(+), 63 deletions(-)
 create mode 100644 js/units/sprite.js
 create mode 100644 lndexUASB2.html

diff --git a/assets/.DS_Store b/assets/.DS_Store
index 170501ce12d1c152f4f7a7f6522ac59a337b2ab1..48ed76d041e6ab1f509454e9fc3681a569bcbfa6 100644
GIT binary patch
delta 21
ccmZoMXffDul7++4SVuwE(AaSEMHXXW07@PPHUIzs

delta 21
ccmZoMXffDul7++ER7XMA$iQIpMHXXW07?l4GXMYp

diff --git a/js/app.js b/js/app.js
index 08a7d12..ce52cb3 100644
--- a/js/app.js
+++ b/js/app.js
@@ -11,6 +11,9 @@ var APP = {
 
 
 		var controls, camera, glScene, cssScene, glRenderer, cssRenderer;
+		var waters = [];
+		//CSS 标签列表
+		var BIG_LABEL_ARR = [];
 
 		camera = new THREE.PerspectiveCamera(
 			45,
@@ -47,7 +50,7 @@ var APP = {
 		window.camera = camera;
 		window.scene = glScene;
 
-		var waters = [];
+
 
 
 
@@ -117,40 +120,40 @@ var APP = {
 		}
 
 		function createLights() {
-			var directionalLight = new THREE.DirectionalLight(0xafafaf);
+			var directionalLight = new THREE.DirectionalLight(0xe0ffff);
 			directionalLight.position.set(-.5, .5, -1.5).normalize();
 			glScene.add(directionalLight);
 
-			const light = new THREE.AmbientLight("#ffffff");
+			const light = new THREE.AmbientLight("#afafaf");
 			glScene.add(light);
 
-			const light1 = new THREE.PointLight(0xe0ffff, 0.1, 20)
-			light1.position.set(-2, 3, 2)
-			glScene.add(light1)
+			// const light1 = new THREE.PointLight(0xe0ffff, 0.1, 20)
+			// light1.position.set(-2, 3, 2)
+			// glScene.add(light1)
 
-			const light2 = new THREE.PointLight(0xe0ffff, 0.1, 20)
-			light2.position.set(0, 3, -6)
-			glScene.add(light2)
+			// const light2 = new THREE.PointLight(0xe0ffff, 0.1, 20)
+			// light2.position.set(0, 3, -6)
+			// glScene.add(light2)
 
-			const light3 = new THREE.PointLight(0xe0ffff, 0.1, 20)
-			light3.position.set(-12, 3, 6)
-			glScene.add(light3)
+			// const light3 = new THREE.PointLight(0xe0ffff, 0.1, 20)
+			// light3.position.set(-12, 3, 6)
+			// glScene.add(light3)
 
-			const light4 = new THREE.PointLight(0xe0ffff, 0.1, 20)
-			light4.position.set(-12, 4, -4)
-			glScene.add(light4)
+			// const light4 = new THREE.PointLight(0xe0ffff, 0.1, 20)
+			// light4.position.set(-12, 4, -4)
+			// glScene.add(light4)
 
-			const light5 = new THREE.PointLight(0xe0ffff, 0.1, 20)
-			light5.position.set(12, 4, -8)
-			glScene.add(light5)
+			// const light5 = new THREE.PointLight(0xe0ffff, 0.1, 20)
+			// light5.position.set(12, 4, -8)
+			// glScene.add(light5)
 
-			const light6 = new THREE.PointLight(0xe0ffff, 0.1, 20)
-			light6.position.set(12, 4, 0)
-			glScene.add(light6)
+			// const light6 = new THREE.PointLight(0xe0ffff, 0.1, 20)
+			// light6.position.set(12, 4, 0)
+			// glScene.add(light6)
 
-			const light7 = new THREE.PointLight(0xe0ffff, 0.1, 20)
-			light7.position.set(12, 4, 8)
-			glScene.add(light7)
+			// const light7 = new THREE.PointLight(0xe0ffff, 0.1, 20)
+			// light7.position.set(12, 4, 8)
+			// glScene.add(light7)
 		}
 
 		this.setClearColor = function (color) {
@@ -246,29 +249,29 @@ var APP = {
 
 			glRenderer.setAnimationLoop(animate);
 
-			const image = document.createElement('img');
-			image.addEventListener('load', function () {
+			// const image = document.createElement('img');
+			// image.addEventListener('load', function () {
 
-				for (let i = 0; i < 2; i++) {
+			// 	for (let i = 0; i < 2; i++) {
 
-					const object = new CSS3DSprite(image.cloneNode());
-					object.position.x = Math.random() * 4 - 2,
-						object.position.y = Math.random() * 4 - 2,
-						object.position.z = Math.random() * 4 - 2;
-					object.scale.set(0.01, 0.01, 0.01);
-					glScene.add(object);
+			// 		const object = new CSS3DSprite(image.cloneNode());
+			// 		object.position.x = Math.random() * 4 - 2,
+			// 			object.position.y = Math.random() * 4 - 2,
+			// 			object.position.z = Math.random() * 4 - 2;
+			// 		object.scale.set(0.01, 0.01, 0.01);
+			// 		glScene.add(object);
 
-					objects.push(object);
+			// 		objects.push(object);
 
-				}
+			// 	}
 
-				//transition();
+			// 	//transition();
 
-			});
-			image.src = '/assets/textures/sprite.png';
+			// });
+			// image.src = '/assets/textures/sprite.png';
 
-			cssScene.add(createSpriteShape());
-			cssScene.add(createBox13DLabel());
+			// cssScene.add(createSpriteShape());
+			// cssScene.add(createBox13DLabel());
 
 
 		};
@@ -318,19 +321,23 @@ var APP = {
 				url);
 			cssScene.add(cssObject);
 		}
-		const defaultScale=80
+		const defaultScale = 80
 		this.create3dLabel = function (parent, text, w = 100, h = 20, position, rotation) {
-			 
-            let txtlength=text.length
-          
+
+
+			// let sprite =createBox13DLabel()
+			//  glScene.add(sprite)
+			// return ;
+			let txtlength = text.length
+
 			var width = defaultScale * txtlength;
 			var height = defaultScale + 15;
-			 
+
 			var plane = css3dlabel.createPlane(
 				width, height,
 				position,
 				rotation);
-			 
+
 			glScene.add(plane);
 
 			var cssObject = css3dlabel.createCssLabel(text,
@@ -339,10 +346,11 @@ var APP = {
 				rotation);
 			// if(parent){
 			// 	parent.add(cssObject);
-
+			BIG_LABEL_ARR.push(cssObject);
 			// }else{ 
 			cssScene.add(cssObject);
 			// } 
+			//cssObject.element.textContent = 'your data'
 		}
 		// this.create3dButton = function (parent, text, w = 100, h = 20, position, rotation,click) {
 
@@ -403,6 +411,11 @@ var APP = {
 			earthLabel.scale.set(0.01, 0.01, 0.01);
 			return earthLabel;
 		}
+		this.updateLabel = function (name, text) {
+			BIG_LABEL_ARR.forEach(tmplable => {
+				tmplable.element.textContent = text;
+			})
+		}
 
 	}
 
diff --git a/js/units/sprite.js b/js/units/sprite.js
new file mode 100644
index 0000000..e69de29
diff --git a/lndexUASB.html b/lndexUASB.html
index 36591f4..dd0f2b3 100644
--- a/lndexUASB.html
+++ b/lndexUASB.html
@@ -90,13 +90,13 @@
 
 
 			window.THREE = THREE; // Used by APP Scripts.
-			var client = null;
+			var mqttclient = null;
 
 
 			var player = new APP.Player();
 			//水泵列表
-			var pumpModelArr = []
-			var bigLabelArr = []
+			var PUMP_MODEL_ARR = []
+		 
 
 			//红色标签
 			// const labArr = [{ name: "水泵M_1", text: "水泵1" }, { name: "水泵M_2", text: "水泵002" }
@@ -136,6 +136,7 @@
 
 				addRemarkLabels();
 				mqttInit();
+				updateLabel();
 				// for (var i = 0; i < 1; i++) {
 				// 	player.create3dPage(
 				// 		1020, 680,
@@ -209,8 +210,8 @@
 						addLabel(item, 0, 0.4, 0)
 					}
 					else if (item.name.indexOf('水泵M_') > -1) { // 水泵
-						x = x + 1;
-						pumpModelArr.push(item);
+						x = x + 1; 
+						PUMP_MODEL_ARR.push(item);
 						//debugger
 						if (item.name === '水泵001') {
 							item.material.color.set(0x00f);
@@ -514,14 +515,14 @@
 					username: config.mqttUserName,
 					password: config.mqttPassword,
 				}
-				client = mqtt.connect('ws://127.0.0.1:8083/mqtt', options);
-				client.on('reconnect', function (error) {
+				mqttclient = mqtt.connect('ws://127.0.0.1:8083/mqtt', options);
+				mqttclient.on('reconnect', function (error) {
 					console.log("reconnect");
 				})
-				client.on('error', function (error) {
+				mqttclient.on('error', function (error) {
 					console.log('连接失败:', error)
 				})
-				client.on('message', function (topic, message, s) {
+				mqttclient.on('message', function (topic, message, s) {
 					console.log(topic, message.toString());
 					if (message.toString() == '1') {
 						// if (that.lastTime + 2 * 1000 < new Date().getTime()) {
@@ -530,14 +531,17 @@
 						// }
 					}
 				})
-				client.subscribe("/scene/update/*");
-				client.subscribe("scene");
-				client.publish('/sys/update/scene', 'scene');
-				client.subscribe("RTData", (err) => {
+				mqttclient.subscribe("/scene/update/*", (err) => {
+					if (!err) {
+						console.log(`订阅/scene/update/* 成功`);
+					}
+				}); 
+				mqttclient.subscribe("RTData", (err) => {
 					if (!err) {
 						console.log(`订阅 RTData 成功`);
 					}
 				});
+				mqttclient.publish('/sys/update/scene', 'scene');
 			}
 			//打开对话框
 			function openDialog(tmpobj) {
@@ -555,10 +559,15 @@
 				});
 			}
 
-			function updateLabel(event) {
-
-				alert(event)
+			function updateLabel() {
+				return
+				//    debugger
+				setTimeout(updateLabel, 1000); //5秒后执行
+				let date = new Date();
+				let m = date.getSeconds();
+				player.updateLabel("", m);
 			}
+
 		</script>
 
 
diff --git a/lndexUASB2.html b/lndexUASB2.html
new file mode 100644
index 0000000..0688603
--- /dev/null
+++ b/lndexUASB2.html
@@ -0,0 +1,574 @@
+<!DOCTYPE html>
+<html lang="en">
+
+	<head>
+		<title></title>
+		<meta charset="utf-8">
+		<meta name="generator" content="Three.js Editor">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				font-family: sans-serif;
+				font-size: 11px;
+				background-color: #000;
+				margin: 0px;
+			}
+
+			canvas {
+				display: block;
+			}
+
+			.info {
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+				display: block;
+				color: brown;
+				font-size: 40px;
+			}
+
+			.label {
+				color: #ff000f;
+				font-family: sans-serif;
+				padding: 20px;
+				background: rgba(149, 140, 140, 0.6);
+			}
+			.red-box-label {
+				color: #ff000f;
+				font-family: sans-serif;
+				padding: 20px;
+				background: rgba(255, 0, 0, 0.6);
+			}
+
+			.btn {
+				color: #ff000f;
+				font-family: sans-serif;
+				padding: 20px;
+				background: rgba(149, 140, 140, 0.6);
+			}
+
+			.label1 {
+				color: #ffffff;
+				font-family: sans-serif;
+				padding: 2px;
+				background: rgba(0, 0, 0, .6);
+			}
+
+			.container {
+				width: 100%;
+				height: 100%;
+			}
+
+		</style>
+		<script type="importmap">
+					{
+						"imports": {
+							"three": "./libs/three/three.module.js",
+							"jsm/": "./libs/three/jsm/"
+						}
+					}
+				</script>
+		<script async src="./libs/layui/layui.js"></script>
+		<script async src="./libs/mqtt/mqtt.min.js"></script>
+	</head>
+
+	<body ontouchstart="">
+		<div class="info">2D数据表格显示 不旋转 厌氧系统 <button onclick="btnclick()">全开</button></div>
+
+
+		<script type="module">
+
+			import * as THREE from 'three';
+			import { APP } from './js/app.js';
+
+
+			import { OrbitControls } from 'jsm/controls/OrbitControls.js';
+			import { GLTFLoader } from 'jsm/loaders/GLTFLoader.js';
+
+			import { CSS3DRenderer, CSS3DObject } from 'jsm/renderers/CSS3DRenderer.js';
+			import { Water } from 'jsm/objects/Water.js';
+			import modellabel from './js/units/modellabel.js'
+			import css2dlabel from './js/units/css3dlabel.js'
+
+			import config from './js/config.js'
+
+
+			window.THREE = THREE; // Used by APP Scripts.
+			var client = null;
+
+
+			var player = new APP.Player();
+			//水泵列表
+			var pumpModelArr = []
+			var bigLabelArr = []
+
+			//红色标签
+			// const labArr = [{ name: "水泵M_1", text: "水泵1" }, { name: "水泵M_2", text: "水泵002" }
+			// 	, { name: "水泵M_3", text: "水泵003" }, { name: "水泵M_4", text: "水泵4" }, { name: "水泵M_5", text: "水泵5" }
+			// 	, { name: "OilTank001", text: "PT桶1" }, { name: "OilTank002", text: "PT桶2" }, { name: "OilTank003", text: "PT桶3" },
+
+			// ]
+			const labArr = [{ name: "水泵M_1", text: "水泵M_1", position: { x: 2.86, y: -0.34, z: -3.13 }, rotation: { x: 0, y: Math.PI, z: 0 } },
+			{ name: "水泵M_2", text: "水泵M_2", position: { x: 1.22, y: -0.59, z: -3.34 }, rotation: { x: 0, y: Math.PI, z: 0 } },
+			{ name: "水泵M_3", text: "水泵M_3", position: { x: -0.60, y: -0.31, z: -3.26 }, rotation: { x: 0, y: Math.PI, z: 0 } },
+			{ name: "水泵M_4", text: "水泵M_4", position: { x: -1.66, y: -0.62, z: -3.26 }, rotation: { x: 0, y: Math.PI, z: 0 } },
+			{ name: "水泵M_5", text: "水泵M_51", position: { x: -2.55, y: -0.3, z: -3.36 }, rotation: { x: 0, y: Math.PI, z: 0 } },
+			{ name: "OilTank001", text: "罐1", position: { x: 0.61, y: 2.44, z: 3.78 }, rotation: { x: 0, y: Math.PI, z: 0 } },
+			{ name: "OilTank002", text: "罐2", position: { x: -0.57, y: 2.47, z: 3.78 }, rotation: { x: 0, y: Math.PI, z: 0 } },
+			{ name: "OilTank003", text: "罐3", position: { x: 0.07, y: 2.58, z: 5.39 }, rotation: { x: 0, y: Math.PI, z: 0 } }
+			]
+			//模型标签
+			const remarkLabArr = [{ name: "221", text: "USAB进水", x: 2.0501311208405713, y: -0.7778027560129786, z: -5.4, ry: 360 }
+				, { name: "211", text: "USAB进水", x: 0.1740166304621844, y: -0.7760432883855322, z: -5.4, ry: 360 },
+			{ name: "491", text: "至污泥浓缩池", x: -2.105188770141037, y: -0.7901334936138524, z: -5.4, ry: 360 }]
+			//大标签
+			const bigLabArr = [{ name: "建筑_11", text: "建筑_1", x: 0.10, y: 0.16, z: -1.48, rx: 0, ry: 360, rz: 0 }]
+			init();
+			function init() {
+
+				player.play();
+				player.setSize(window.innerWidth, window.innerHeight);
+				window.addEventListener('resize', function () {
+
+					player.setSize(window.innerWidth, window.innerHeight);
+
+				});
+				//设置背景颜色
+				player.setClearColor(0x34495E);
+
+				initModel()
+
+				addRemarkLabels();
+				mqttInit();
+				// for (var i = 0; i < 1; i++) {
+				// 	player.create3dPage(
+				// 		1020, 680,
+				// 		new THREE.Vector3(-2 - i, 2 + i / 3, -4.2 + i),
+				// 		new THREE.Vector3(0, Math.PI, 0),
+				// 		'https://zuoben.blog.csdn.net/');
+				// }
+			}
+
+			// document.body.appendChild(player.dom);
+			function initModel() {
+				var loader = new THREE.FileLoader();
+				loader.load('uasb3.json', function (text) {
+
+					let json = JSON.parse(text);
+					let objloader = new THREE.ObjectLoader();
+					let scene = objloader.parse(json.scene)
+
+					player.addModels(scene);//.children[3]);
+
+					setModel(scene, player);
+					// AddWaters(player);
+					// addRemarkLabels();
+
+				});
+			}
+
+			function initModel1() {
+				var loader = new GLTFLoader();
+				loader.load('assets/models/uasb2.glb', function (gltf) {
+					// gltf.scene.traverse(function (child) {
+					// 	switch (child.name) {
+					// 		case 'walls':
+					// 			initWalls(child)
+					// 			break
+					// 		case 'stairs':
+					// 			initStairs(child)
+					// 			break
+					// 	}
+
+					// 	//设置展画边框贴图
+					// 	if (child.name.includes('paint')) {
+					// 		initFrames(child)
+					// 	}
+					// 	//设置展画图片贴图
+					// 	if (child.name.includes('draw')) {
+					// 		initDraws(child)
+					// 	}
+					// })
+
+					let tmpmodel = gltf.scene//.children[1];
+
+					tmpmodel.rotation.set(0, 2, -0.2)
+
+					player.addModels(tmpmodel);
+					setModel(tmpmodel, player);
+
+				});
+			}
+			var x = 0;
+			// 设置标签
+			function setModel(scene, player) {
+
+
+				scene.castShadow = true; // 开启阴影
+				scene.receiveShadow = true; // 接受阴影
+
+				scene.children.forEach((item, index) => {
+					console.log("x=", x, "--------item ==", index, "name=", item.name, "type=", item.type);
+					if (item.name.indexOf('OilTank00') > -1) {
+						addLabel(item, 0, 0.4, 0)
+					}
+					else if (item.name.indexOf('水泵M_') > -1) { // 水泵
+						x = x + 1;
+						pumpModelArr.push(item);
+						//debugger
+						if (item.name === '水泵001') {
+							item.material.color.set(0x00f);
+						} else {
+							item.material.color.set(0x006600);
+
+						}
+						addStateLabel(item, x / 2, 2 + x / 2, x / 2)
+					}
+
+					if (item.type === 'Object3D' || item.type === 'Group') { // 有下一级
+
+						setModel(item, player);
+					}
+
+
+
+				})
+				console.log('pumpModelArr=', pumpModelArr)
+			}
+
+			// 设置标签
+			function setModel1(scene, player) {
+
+
+				// scene.castShadow = true; // 开启阴影
+				// scene.receiveShadow = true; // 接受阴影
+
+				scene.children.forEach((item, index) => {
+
+
+					console.log("--------item ==", index, "name=", item.name, "type=", item.type);
+
+					if (item.name.indexOf('OilTank00') > -1) {
+						addLabel(item, 0, 0.4, 0)
+					}
+					else if (item.name == "水泵001") {
+						item.material.color.set(0xff0);
+					}
+					else if (item.name == "水泵_2") {
+						item.material.color.set(0xff0000);
+					}
+					else if (item.name.indexOf('水泵M_') > -1 && item.type == "Mesh") { // 水泵
+						pumpModelArr.push(item);
+
+
+						// }
+						if (item.name === '水泵M_1') {
+							item.material.color.set(0xff0000);
+
+						} else {
+							item.material.color.set(0x006600);
+						}
+
+						addStateLabel(item, 0, 3, 0)
+					}
+
+					if (item.type === 'Object3D' || item.type === 'Group') { // 有下一级
+
+						setModel(item, player);
+					}
+
+
+				})
+				console.log('pumpModelArr=', pumpModelArr)
+			}
+
+			//添加这个就可以用鼠标拖动
+
+			var raycaster = new THREE.Raycaster()
+			var mouse = new THREE.Vector2()
+			//点击模型
+			// window.addEventListener('click', onMouseClick);
+			window.addEventListener('dblclick', onDBMouseClick);
+			function onMouseClick(event) {
+
+				//将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标
+				mouse.x = (event.clientX / window.innerWidth) * 2 - 1
+				mouse.y = -((event.clientY / window.innerHeight) * 2 - 1)
+				//console.log("mouse:"+mouse.x+","+mouse.y)
+
+				// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
+				raycaster.setFromCamera(mouse, window.camera);
+
+				// 获取raycaster直线和所有模型相交的数组集合
+				var intersects = raycaster.intersectObjects(scene.children, true);
+				console.log(intersects);
+				//debugger
+				//将所有的相交的模型的颜色设置为红色
+				for (var i = 0; i < intersects.length; i++) {
+					let obj = intersects[i];
+					if (obj.object) {
+
+						if (obj.object.name == "视频监控1") {
+
+							obj.object.material.color.set(0xff6666);
+							alert("视频");
+						} else {
+							obj.object.material.color.set(0xff0000);
+						}
+					}
+				}
+			}
+
+
+			function onDBMouseClick(event) {
+
+				//将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标
+				mouse.x = (event.clientX / window.innerWidth) * 2 - 1
+				mouse.y = -((event.clientY / window.innerHeight) * 2 - 1)
+				//console.log("mouse:"+mouse.x+","+mouse.y)
+
+				// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
+				raycaster.setFromCamera(mouse, window.camera);
+
+				// 获取raycaster直线和所有模型相交的数组集合
+				// debugger
+				var intersects = raycaster.intersectObjects(scene.children, true);
+				console.log("onclick ", intersects);
+
+				//debugger
+				//将所有的相交的模型的颜色设置为红色
+				for (var i = 0; i < intersects.length; i++) {
+					let obj = intersects[i];
+					if (obj.object) {
+						let tmpobj = obj.object;
+						console.log(tmpobj)
+						//输出 增加标签 位置
+						console.log('{name:"' + tmpobj.name + '",text:"' + tmpobj.name + '",position:{x:' + obj.point.x.toFixed(2) + ',y:' + obj.point.y.toFixed(2) + ',z:' + obj.point.z.toFixed(2) + '},rotation:{x:0,y: Math.PI,z:0}}');
+						// console.log('{name:"' + tmpobj.name + '1",text:"' + tmpobj.name + '",x:' + obj.point.x.toFixed(2) + ',y:' + obj.point.y.toFixed(2) + ',z:' + obj.point.z.toFixed(2) + ',rx:0,ry:0,rz:0}');
+						if (tmpobj.name.indexOf('水泵') > -1) { // 水泵
+
+							openDialog(tmpobj)
+							//alert(tmpobj.name, "双击");
+						}
+						break;
+
+					}
+				}
+			}
+
+
+
+
+			//添加 模型标签
+			function addRemarkLabels() {
+				remarkLabArr.forEach((item, index) => {
+
+					let labelMesh = modellabel.createRemarkLabel(item.text, item.x, item.y, item.z);
+					labelMesh.scale.set(0.005, 0.005, 0.005);
+					labelMesh.rotation.y = Math.PI * (item.ry / 360);
+					labelMesh.rotation.x = Math.PI * (30 / 360);;
+					// labelMesh.rotation.x= rz;
+					window.scene.add(labelMesh);
+
+				})
+				bigLabArr.forEach((item, index) => {
+
+					let labelMesh = modellabel.createRemarkLabel(item.text, item.x, item.y, item.z);
+					labelMesh.scale.set(0.01, 0.01, 0.01);
+					labelMesh.rotation.y = Math.PI * (item.ry / 360);
+					// labelMesh.rotation.x = Math.PI * (30 / 360);;
+					// labelMesh.rotation.x= rz;
+					window.scene.add(labelMesh);
+					bigLabelArr.push(labelMesh);
+
+				})
+			}
+
+
+
+			//通过 模型名称获取标签名称
+			async function getlabel(name) {
+				let result;
+				labArr.forEach((item, index) => {
+					if (item.name === name) {
+						result = item;
+						return null;
+					}
+				})
+				return result
+			}
+			//普通标签
+			async function addLabel(parent, x = 0, y = 0, z = 0, className = 'label') {
+
+				if (!parent.name) {
+
+					return;
+				}
+				console.log("parent.name2=", parent.name)
+				let item = await getlabel(parent.name);
+				// debugger
+				if (item) {
+
+					player.create3dLabel(parent, item.text,
+						1020, 680,
+						item.position,
+						item.rotation,
+					);
+					// player.create3dLabel(parent, item.text,
+					// 	1020, 680,
+					// 	new THREE.Vector3(x, y, z),
+					// 	new THREE.Vector3(0, Math.PI, 0),
+					// );
+
+				}
+			}
+
+
+			//状态标签
+			async function addStateLabel(parent, x = 0, y = 0, z = 0, className = 'label') {
+
+				if (!parent.name) {
+
+					return;
+				}
+				console.log("parent.name2=", parent.name)
+				let item = await getlabel(parent.name);
+				if (item) {
+
+
+					player.create3dLabel(parent, item.text,
+						1020, 680,
+						item.position,
+						item.rotation,
+					);
+					// player.create3dButton(parent, item.text,
+					// 	1020, 680,
+					// 	new THREE.Vector3(x, y, z),
+					// 	new THREE.Vector3(0, Math.PI, 0), 
+					// 	updateLabel()
+					// );
+				}
+
+			}
+			//添加动态水
+			function AddWaters(player) {
+				let water1 = {}
+				water1.position = { x: 0, y: 1, z: 0 }
+				water1.scale = { x: 4, y: 2.6 }
+				AddWater(water1, player)
+				let water2 = {}
+				water2.position = { x: 0, y: 1, z: 5 }
+				water2.scale = { x: 7.5, y: 8 }
+				AddWater(water2, player)
+			}
+			function AddWater(water, player) {
+
+				const waterGeometry = new THREE.PlaneGeometry(water.scale.x, water.scale.y);
+
+				let waterobj = new Water(
+					waterGeometry,
+					{
+						textureWidth: 255,
+						textureHeight: 255,
+						waterNormals: new THREE.TextureLoader().load('./assets/textures/waternormals.jpg', function (texture) {
+
+							texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+
+						}),
+						sunDirection: new THREE.Vector3(),
+						sunColor: 0xffffff,
+						waterColor: 0x3498DB,
+						distortionScale: 0.5,//波浪大小
+						fog: true// scene.fog !== undefined
+					}
+				);
+				waterobj.position.set(water.position.x, water.position.y, water.position.z)
+				waterobj.rotation.x = - Math.PI / 2;
+
+				scene.add(waterobj);
+				player.addWater(waterobj);
+
+			}
+			//测试用
+			let clickindex = false;
+			//全开全关 测试
+			window.btnclick = function () {
+
+				pumpModelArr.forEach((item, index) => {
+					if (clickindex) {
+						item.material.color.set(0x00ff00);
+
+					} else {
+						item.material.color.set(0x666666);
+
+					}
+					clickindex = !clickindex;
+
+				})
+			}
+
+			function mqttInit() {
+				var that = this;
+				// 连接选项
+				//
+				const options = {
+					connectTimeout: 4000, // 超时时间
+					// 认证信息
+					clientId: 'brower_' + parseInt(Math.random() / 31.1 * 10000000000),
+					username: config.mqttUserName,
+					password: config.mqttPassword,
+				}
+				client = mqtt.connect('ws://127.0.0.1:8083/mqtt', options);
+				client.on('reconnect', function (error) {
+					console.log("reconnect");
+				})
+				client.on('error', function (error) {
+					console.log('连接失败:', error)
+				})
+				client.on('message', function (topic, message, s) {
+					console.log(topic, message.toString());
+					if (message.toString() == '1') {
+						// if (that.lastTime + 2 * 1000 < new Date().getTime()) {
+						// 	that.lastTime = new Date().getTime();
+
+						// }
+					}
+				})
+				client.subscribe("/scene/update/*");
+				client.subscribe("scene");
+				client.publish('/sys/update/scene', 'scene');
+				client.subscribe("RTData", (err) => {
+					if (!err) {
+						console.log(`订阅 RTData 成功`);
+					}
+				});
+			}
+			//打开对话框
+			function openDialog(tmpobj) {
+				layer.open({
+					type: 1
+					, offset: 1 //具体配置参考：http://doc/modules/layer.html#offset
+					, id: 'layerDemo' + 1 //防止重复弹出
+					, content: '<div style="padding: 20px 100px;">' + tmpobj.name + '</div>'
+					, btn: '关闭'
+					, btnAlign: 'c' //按钮居中
+					, shade: 0 //不显示遮罩
+					, yes: function () {
+						layer.closeAll();
+					}
+				});
+			}
+
+			function updateLabel(event) {
+
+				alert(event)
+			}
+		</script>
+
+
+
+	</body>
+
+</html>