merge branch 'private'. this is version 2.0

iioter · Apr 12, 2023 · 359561c · 359561c
1 parent 6cdac03
commit 359561c
Show file tree

Hide file tree

Showing 300 changed files with 61,878 additions and 1,645 deletions.
diff --git a/3d/3d.html b/3d/3d.html
@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<title>3D</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+	<link type="text/css" rel="stylesheet" href="./css/main.css">
+	<style>
+		body {
+			background-color: #bfe3dd;
+			color: #000;
+		}
+
+		a {
+			color: #2983ff;
+		}
+	</style>
+</head>
+
+<body>
+
+	<div id="container"></div>
+	<script src="../jquery.min.js"></script>
+	<script src="../mqtt.min.js"></script>
+	<script type="module">
+		import * as THREE from './lib/three.module.js';
+
+		import Stats from './lib/stats.module.js';
+
+		import { OrbitControls } from './lib/OrbitControls.js';
+		import { RoomEnvironment } from './lib/RoomEnvironment.js';
+
+		import { GLTFLoader } from './lib/GLTFLoader.js';
+		import { DRACOLoader } from './lib/DRACOLoader.js';
+		import { CSS3DObject, CSS3DRenderer } from './lib/CSS3DRenderer.js';
+
+		let W = window.innerWidth;
+		let H = window.innerHeight;
+		let mixer;
+		let labelArr = [];
+
+		//标签数据
+		let modelData = [{
+			id: 1,
+			cname: "Modbus设备",
+			ename: "modbus_01",
+			position: {
+				x: -0.5,
+				y: 0.6,
+				z: 1.55,
+			},
+			param: [{
+				name: "温度",
+				value: 123,
+			},
+			{
+				name: "湿度",
+				value: 123,
+			},
+			],
+		}
+		];
+
+		//定时更新数据
+		//setInterval(() => {
+		//	modelData.forEach((item) => {
+		//		if (item.id > 0) {
+		//			item.param[0].value = parseInt(Math.random() * 30 + 150).toFixed(0);
+		//			item.param[1].value = parseInt(Math.random() * 30 + 150).toFixed(0);
+		//		}
+		//	});
+
+		//	updateData();
+
+		//}, 2000);
+		inimqttclient();
+		const clock = new THREE.Clock();
+		const container = document.getElementById('container');
+
+		const stats = new Stats();
+		container.appendChild(stats.dom);
+
+		const css3dRenderer = new CSS3DRenderer();
+		css3dRenderer.setSize(W, H);
+		css3dRenderer.domElement.style.position = 'absolute';
+		css3dRenderer.domElement.style.top = 0;
+		container.appendChild(css3dRenderer.domElement);
+
+		const renderer = new THREE.WebGLRenderer({ antialias: true });
+		renderer.setPixelRatio(window.devicePixelRatio);
+		renderer.setSize(window.innerWidth, window.innerHeight);
+		renderer.outputEncoding = THREE.sRGBEncoding;
+		container.appendChild(renderer.domElement);
+
+		const pmremGenerator = new THREE.PMREMGenerator(renderer);
+
+		const scene = new THREE.Scene();
+		scene.background = new THREE.Color(0xbfe3dd);
+		scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
+
+		const camera = new THREE.PerspectiveCamera(40, W / H, .1, 10000);
+		camera.position.set(5, 2, 8);
+
+		const controls = new OrbitControls(camera, container);
+		controls.target.set(0, 0.5, 0);
+		controls.update();
+		controls.enablePan = false;
+		controls.enableDamping = true;
+
+		const dracoLoader = new DRACOLoader();
+		dracoLoader.setDecoderPath('./lib/gltf/');
+
+		const loader = new GLTFLoader();
+		loader.setDRACOLoader(dracoLoader);
+		loader.load('./model/LittlestTokyo.glb', function (gltf) {
+
+			const model = gltf.scene;
+			model.position.set(1, 1, 0);
+			model.scale.set(0.01, 0.01, 0.01);
+			scene.add(model);
+
+			createLableArr();
+
+			mixer = new THREE.AnimationMixer(model);
+			mixer.clipAction(gltf.animations[0]).play();
+
+			animate();
+
+		}, undefined, function (e) {
+
+			console.error(e);
+
+		});
+
+		//创建标签
+		function createLableArr() {
+            let style = "color:	#00CED1;cursor:pointer;font-size:30px;padding:5px 15px;"; //background:#43bafe;
+			modelData.forEach((item) => {
+				let label = createLabel(item.cname, style, item.param);
+				label.position.set(item.position.x, item.position.y, item.position.z);
+				let scale = 0.003;
+				label.scale.set(scale, scale, scale); //缩放比例
+				label.name = item.ename;
+				//label.visible = true;
+				scene.add(label);
+				labelArr.push(label);
+
+				const axesHelper = new THREE.AxesHelper(5);
+				label.add(axesHelper);
+			});
+		}
+
+		/**销毁模型*/
+		function destroyObject(object) {
+			if (!object) return;
+			object.traverse((item) => {
+				if (item.material) {
+					if (Array.isArray(item.material)) {
+						item.material.forEach(m => m.dispose());
+					} else {
+						item.material.dispose();
+					}
+				}
+				if (item.geometry) item.geometry.dispose();
+				item = null;
+			});
+
+			scene.remove(object);
+			object = null;
+		}
+
+		/**信息标注的生成*/
+		function createLabel(text, style, param) {
+			//创建CSS3D
+			let div_label = document.createElement("div");
+			div_label.className = "div-label";
+			let div_ul = document.createElement("ul");
+			let div_li = document.createElement("li");
+
+			style ? (div_li.style = style) : "";
+			div_li.textContent = `设备名称:${text}`;
+			div_ul.appendChild(div_li);
+
+			if (param.length) {
+				param.forEach((item) => {
+					let param_li = document.createElement("li");
+					style ? (param_li.style = style) : "";
+					param_li.textContent = `${item.name}:${item.value}`;
+					div_ul.appendChild(param_li);
+				});
+			}
+
+			div_label.appendChild(div_ul);
+			let label = new CSS3DObject(div_label);
+
+			return label;
+		}
+
+		//更新数据标签
+		function updateData() {
+			if (labelArr.length) {
+				labelArr.forEach(item => {
+					destroyObject(item);
+				});
+				createLableArr();
+			}
+		}
+
+
+		window.onresize = function () {
+
+			camera.aspect = window.innerWidth / window.innerHeight;
+			camera.updateProjectionMatrix();
+
+			renderer.setSize(window.innerWidth, window.innerHeight);
+
+		};
+
+
+		function animate() {
+
+			requestAnimationFrame(animate);
+
+			const delta = clock.getDelta();
+
+			mixer.update(delta);
+
+			controls.update();
+
+			//标签
+			// if (labelArr.length) {
+			// 	labelArr.forEach((item) => {
+			// 		if (item.visible) {
+			// 			item.quaternion.slerp(camera.quaternion, 1);
+			// 		}
+			// 	});
+			// }
+
+			stats.update();
+
+			renderer.render(scene, camera);
+			css3dRenderer.render(scene, camera);
+
+		}
+
+
+
+
+		function inimqttclient() {
+			var options = {
+				//mqtt客户端的id，这里面应该还可以加上其他参数，具体看官方文档
+				clientId: 'mqttjs3d_' + (Math.random() * 10000000).toString()
+			}
+			var client = mqtt.connect('ws://' + window.location.host + '/mqtt', options);
+			client.on('connect', function () {
+				client.subscribe('internal/v1/gateway/telemetry/+/+', function (err) {
+					if (!err) {
+						console.log("订阅成功!")
+					} else {
+						console.log(err)
+					}
+				})
+			})
+
+            client.on('message', function (topic, message) {
+                if (topic == 'internal/v1/gateway/telemetry/Modbus/temperature') {
+                    var objmsg = $.parseJSON(message.toString());
+                    modelData[0].param[0].value = objmsg.CookedValue;
+                    updateData();
+                } else if (topic == 'internal/v1/gateway/telemetry/Modbus/humidity') {
+                    var objmsg = $.parseJSON(message.toString());
+                    modelData[0].param[1].value = objmsg.CookedValue;
+                    updateData();
+                }
+			})
+		}
+	</script>
+
+</body>
+
+</html>
diff --git a/3d/css/main.css b/3d/css/main.css
@@ -0,0 +1,108 @@
+body {
+	margin: 0;
+	background-color: #000;
+	color: #fff;
+	font-family: Monospace;
+	font-size: 13px;
+	line-height: 24px;
+	overscroll-behavior: none;
+}
+
+a {
+	color: #ff0;
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+button {
+	cursor: pointer;
+	text-transform: uppercase;
+}
+
+#info {
+	position: absolute;
+	top: 0px;
+	width: 100%;
+	padding: 10px;
+	box-sizing: border-box;
+	text-align: center;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	z-index: 1; /* TODO Solve this in HTML */
+}
+
+a, button, input, select {
+	pointer-events: auto;
+}
+
+.lil-gui {
+	z-index: 2 !important; /* TODO Solve this in HTML */
+}
+
+@media all and ( max-width: 640px ) {
+	.lil-gui.root { 
+		right: auto;
+		top: auto;
+		max-height: 50%;
+		max-width: 80%;
+		bottom: 0;
+		left: 0;
+	}
+}
+
+#overlay {
+	position: absolute;
+	font-size: 16px;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	background: rgba(0,0,0,0.7);
+}
+
+	#overlay button {
+		background: transparent;
+		border: 0;
+		border: 1px solid rgb(255, 255, 255);
+		border-radius: 4px;
+		color: #ffffff;
+		padding: 12px 18px;
+		text-transform: uppercase;
+		cursor: pointer;
+	}
+
+#notSupported {
+	width: 50%;
+	margin: auto;
+	background-color: #f00;
+	margin-top: 20px;
+	padding: 10px;
+}
+
+.div-label {
+	width: 355px;
+	height: 255px;
+	background: url("../image/info.png") no-repeat;
+  }
+
+  .div-label ul {
+	margin: 80px 40px;
+	width: 355px;
+	height: 255px;
+  }
+
+  .div-label li {
+	margin: 20px 0;
+  }
+
diff --git a/3d/image/10.png b/3d/image/10.png
diff --git a/3d/image/info.png b/3d/image/info.png
diff --git a/3d/image/line.png b/3d/image/line.png
diff --git a/3d/image/traffic_01.png b/3d/image/traffic_01.png