模型2d标签

app/bin/dialog-1.0.js

@@ -0,0 +1,114 @@
+
+
+document.write("<script language='javascript' src='/Content/sweetalert/dist/sweetalert.min.js'></script>");
+
+
+function alertEx(message) {
+    swal(
+        message);
+}
+
+function alertTitle(title,message) {
+    swal(title, message);
+}
+
+
+function alertSuccess(message) {
+    swal( message, '',"success");
+}
+function alertSuccessCallBack(message, callbackfuntion) {
+    swal({
+        title: message,
+        text: '',
+        type: "success",
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "确定",
+        closeOnConfirm: false
+    },
+    function () {
+        callbackfuntion();
+    });
+     
+}
+function alertSuccessCallBack2(title1,message, callbackfuntion) {
+    swal({
+        title: title1,
+        text: message,
+        type: "success",
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "确定",
+        closeOnConfirm: false
+    },
+    function () {
+        callbackfuntion();
+    });
+
+}
+
+
+function alertError( message) {
+    swal(message, '', "error");
+}
+
+function alertWarning(_title,message) {
+
+    swal({
+        title: _title,
+        text: message,
+        type: "warning",
+        showCancelButton: false,
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "确定",
+        closeOnConfirm: false
+    } );
+}
+
+
+function alertWarningCallBack(message,dtovalue,callbackfuntion) {
+    
+    swal({
+        title: message,
+        text: "",
+        type: "warning",
+        showCancelButton: false,
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "确定",
+        closeOnConfirm: true
+    },
+  function () {
+      callbackfuntion(dtovalue);
+  });
+}
+
+
+function confirmEx(title, message, callbackfuntion) {
+    swal({
+        title: title,
+        text: message,
+        type: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "确定",
+        closeOnConfirm: true
+    },
+  function () {
+      callbackfuntion();
+  });
+}
+
+function alertAutoClose(message) {
+    swal({
+        title: message,
+        text: "2秒钟后自动关闭",
+        timer: 2000,
+        showConfirmButton: false
+    });
+}
+function alertAutoClose3(message) {
+    swal({
+        title: message,
+        text: "3秒钟后自动关闭",
+        timer: 3000,
+        showConfirmButton: false
+    });
+}

app/bin/layui/css/modules/code.css

@@ -0,0 +1 @@
+html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #eee;border-left-width:6px;background-color:#FAFAFA;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #eee}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 10px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view .layui-code-ol li:first-child{padding-top:10px}.layui-code-view .layui-code-ol li:last-child{padding-bottom:10px}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}.layui-code-demo .layui-code{visibility:visible!important;margin:-15px;border-top:none;border-right:none;border-bottom:none}.layui-code-demo .layui-tab-content{padding:15px;border-top:none}

app/index.html

@@ -51,7 +51,7 @@
 			window.VRButton = VRButton; // Used by APP Scripts.
 
 			var loader = new THREE.FileLoader();
-			loader.load('app1.json', function (text) {
+			loader.load('app3.json', function (text) {
 
 				var player = new APP.Player();
 				player.load(JSON.parse(text));
@@ -95,16 +95,32 @@
 					let obj = intersects[i];
 					if (obj.object) {
 
-						if (obj.object.name == "camera") {
+						if (obj.object.name == "视频监控1") {
+
+							obj.object.material[0].color.set(0xff6666);
 							alert("视频");
 						} else {
-							obj.object.material.color.set(0xff0000);
+							obj.object.material[0].color.set(0xff0000);
 						}
 					}
 				}
 			}
 
+			function createCSSLabel(text, parent) {
+
+				const labelDiv = document.createElement('div');
+				labelDiv.className = 'label';
+				labelDiv.name = "csslabeldiv"
+				labelDiv.textContent = text;
 
+				labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
+				const moonLabel = new CSS2DObject(labelDiv);
+				moonLabel.position.set(1, 2, 0);
+				moonLabel.name = "datalabel"
+				moonLabel.userData = { name: "datalable", id: "", url: "" }
+				return moonLabel;
+
+			}
 		</script>
 		<!-- Code injected by live-server -->
 		<script>

app/index2.html

@@ -0,0 +1,204 @@
+<!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: rgb(23, 14, 111);
+				margin: 0px;
+			}
+
+			canvas {
+				display: block;
+			}
+
+			.label {
+				color: #FFF;
+				font-family: sans-serif;
+				padding: 2px;
+				background: rgba(255, 0, 0, .6);
+			}
+
+			.table {
+				color: #FFF;
+				font-family: sans-serif;
+				padding: 2px;
+				display: block;
+				position: absolute;
+				left: 100px;
+				top: 150px;
+			}
+
+		</style>
+		<script type="importmap">
+					{
+						"imports": {
+							"three": "../build/three.module.js",
+							"jsm/": "../examples/jsm/"
+						}
+					}
+				</script>
+	</head>
+
+	<body ontouchstart="">
+		<div class="table">2d 数据显示位置</div>
+		<script type="module">
+
+			import * as THREE from 'three';
+			import { APP } from './js/app.js';
+			import { VRButton } from './js/VRButton.js';
+
+			import { OrbitControls } from 'jsm/controls/OrbitControls.js';
+			import { CSS2DRenderer, CSS2DObject } from '/examples/jsm/renderers/CSS2DRenderer.js';
+
+
+			window.THREE = THREE; // Used by APP Scripts.
+			window.VRButton = VRButton; // Used by APP Scripts.
+
+			var loader = new THREE.FileLoader();
+			loader.load('app.json', function (text) {
+
+				var player = new APP.Player();
+				player.load(JSON.parse(text));
+				player.setSize(window.innerWidth, window.innerHeight);
+				player.play();
+
+				document.body.appendChild(player.dom);
+
+				window.addEventListener('resize', function () {
+
+					player.setSize(window.innerWidth, window.innerHeight);
+
+				});
+				var orbitControls = new OrbitControls(window.camera, player.dom);
+				initLable();
+
+			});
+
+			//添加这个就可以用鼠标拖动
+
+			var raycaster = new THREE.Raycaster()
+			var mouse = new THREE.Vector2()
+			//点击模型
+			window.addEventListener('click', onMouseClick);
+
+			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);
+				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[0].color.set(0xff6666);
+							alert("视频");
+						} else {
+							obj.object.material[0].color.set(0xff0000);
+						}
+					}
+				}
+			}
+
+			function createCSSLabel(text, parent) {
+
+				const labelDiv = document.createElement('div');
+				labelDiv.className = 'label';
+				labelDiv.name = "csslabeldiv"
+				labelDiv.textContent = text;
+
+				labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
+				const moonLabel = new CSS2DObject(labelDiv);
+				moonLabel.position.set(1, 2, 0);
+				moonLabel.name = "datalabel"
+				moonLabel.userData = { name: "datalable", id: "", url: "" }
+				return moonLabel;
+
+			}
+			const css2DLabelList = []
+			function addLabel(obj, scene, i) {
+
+				const labelDiv = document.createElement('div');
+				labelDiv.className = 'label';
+				labelDiv.name = "label" + i;
+				labelDiv.textContent = obj.text;
+
+
+				labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
+				const css2DLabel = new CSS2DObject(labelDiv);
+				css2DLabel.position.set(obj.x, obj.y, obj.z);
+				css2DLabel.name = "datalabel" + i;
+				css2DLabel.userData = { name: "datalable", id: "", url: "" }
+				// css2DLabelList.add(css2DLabel);
+				scene.add(css2DLabel);
+
+			}
+			function initLable() {
+				const labobjarr = [{ text: "测试标签1", x: -1, y: 1, z: 1 }, { text: "测试标签2", x: 10, y: 10, z: 10 }]
+				for (var i = 0, length = labobjarr.length; i < length; i++) {
+
+					addLabel(labobjarr[i], window.scene, i);
+
+				}
+			}
+
+		</script>
+		<!-- Code injected by live-server -->
+		<script>
+			// <![CDATA[  <-- For SVG support
+			if ('WebSocket' in window) {
+				(function () {
+					function refreshCSS() {
+						var sheets = [].slice.call(document.getElementsByTagName("link"));
+						var head = document.getElementsByTagName("head")[0];
+						for (var i = 0; i < sheets.length; ++i) {
+							var elem = sheets[i];
+							var parent = elem.parentElement || head;
+							parent.removeChild(elem);
+							var rel = elem.rel;
+							if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
+								var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
+								elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
+							}
+							parent.appendChild(elem);
+						}
+					}
+					var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
+					var address = protocol + window.location.host + window.location.pathname + '/ws';
+					var socket = new WebSocket(address);
+					socket.onmessage = function (msg) {
+						if (msg.data == 'reload') window.location.reload();
+						else if (msg.data == 'refreshcss') refreshCSS();
+					};
+					if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
+						console.log('Live reload enabled.');
+						sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
+					}
+				})();
+			}
+			else {
+				console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
+			}
+	// ]]>
+		</script>
+	</body>
+
+</html>

app/js/app.js

@@ -21,7 +21,7 @@ var APP = {
 		dom.appendChild(renderer.domElement);
 		dom.appendChild(css2DRenderer.domElement);
 		this.dom = dom;
-
+        var waters=[];
 
 		this.width = 500;
 		this.height = 500;
@@ -35,6 +35,21 @@ var APP = {
 
 			return css2DRenderer;
 		}
+		function createCSSLabel(text, parent) {
+
+			const labelDiv = document.createElement('div');
+			labelDiv.className = 'label';
+			labelDiv.name = "csslabeldiv"
+			labelDiv.textContent = text;
+
+			labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
+			const moonLabel = new CSS2DObject(labelDiv);
+			moonLabel.position.set(1, 2, 0);
+			moonLabel.name = "datalabel"
+			moonLabel.userData = { name: "datalable", id: "", url: "" }
+			return moonLabel;
+
+		}
 		this.load = function (json) {
 
 			var project = json.project;
@@ -112,6 +127,8 @@ var APP = {
 			}
 
 			dispatch(events.init, arguments);
+			// this.initLable();
+
 
 		};
 
@@ -131,7 +148,9 @@ var APP = {
 			window.scene = scene
 
 		};
-
+        this.addWater=function(water){
+			waters.push(water);
+		}
 		this.setPixelRatio = function (pixelRatio) {
 
 			renderer.setPixelRatio(pixelRatio);
@@ -153,7 +172,7 @@ var APP = {
 			renderer.setSize(width, height);
 
 		};
-
+		 
 		function dispatch(array, event) {
 
 			for (var i = 0, l = array.length; i < l; i++) {
@@ -165,6 +184,22 @@ var APP = {
 		}
 
 		var time, startTime, prevTime;
+		function render(time) {
+
+			// dispatch(events.update, { time: time * 1000, delta: 0 /* TODO */ });
+
+			renderer.render(scene, camera);
+			if (css2DRenderer != null) {
+
+				css2DRenderer.render(scene, camera);
+			}
+			waters.forEach(water => {
+				// 播放特效
+				water.material.uniforms['time'].value += 1.0 / 60.0;
+			});
+
+		};
+
 
 		function animate() {
 
@@ -180,8 +215,8 @@ var APP = {
 
 			}
 
-			renderer.render(scene, camera);
-
+			// renderer.render(scene, camera);
+			render(time);
 			prevTime = time;
 
 		}
@@ -220,17 +255,6 @@ var APP = {
 
 		};
 
-		this.render = function (time) {
-
-			dispatch(events.update, { time: time * 1000, delta: 0 /* TODO */ });
-
-			renderer.render(scene, camera);
-			if (css2DRenderer != null) {
-
-				css2DRenderer.render(scene, camera);
-			}
-
-		};
 
 		this.dispose = function () {
 

app/js/dialog-1.0.js

@@ -0,0 +1,114 @@
+
+
+document.write("<script language='javascript' src='/Content/sweetalert/dist/sweetalert.min.js'></script>");
+
+
+function alertEx(message) {
+    swal(
+        message);
+}
+
+function alertTitle(title,message) {
+    swal(title, message);
+}
+
+
+function alertSuccess(message) {
+    swal( message, '',"success");
+}
+function alertSuccessCallBack(message, callbackfuntion) {
+    swal({
+        title: message,
+        text: '',
+        type: "success",
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "确定",
+        closeOnConfirm: false
+    },
+    function () {
+        callbackfuntion();
+    });
+     
+}
+function alertSuccessCallBack2(title1,message, callbackfuntion) {
+    swal({
+        title: title1,
+        text: message,
+        type: "success",
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "确定",
+        closeOnConfirm: false
+    },
+    function () {
+        callbackfuntion();
+    });
+
+}
+
+
+function alertError( message) {
+    swal(message, '', "error");
+}
+
+function alertWarning(_title,message) {
+
+    swal({
+        title: _title,
+        text: message,
+        type: "warning",
+        showCancelButton: false,
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "确定",
+        closeOnConfirm: false
+    } );
+}
+
+
+function alertWarningCallBack(message,dtovalue,callbackfuntion) {
+    
+    swal({
+        title: message,
+        text: "",
+        type: "warning",
+        showCancelButton: false,
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "确定",
+        closeOnConfirm: true
+    },
+  function () {
+      callbackfuntion(dtovalue);
+  });
+}
+
+
+function confirmEx(title, message, callbackfuntion) {
+    swal({
+        title: title,
+        text: message,
+        type: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "确定",
+        closeOnConfirm: true
+    },
+  function () {
+      callbackfuntion();
+  });
+}
+
+function alertAutoClose(message) {
+    swal({
+        title: message,
+        text: "2秒钟后自动关闭",
+        timer: 2000,
+        showConfirmButton: false
+    });
+}
+function alertAutoClose3(message) {
+    swal({
+        title: message,
+        text: "3秒钟后自动关闭",
+        timer: 3000,
+        showConfirmButton: false
+    });
+}

app/lndexUASB.html

@@ -0,0 +1,501 @@
+<!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;
+
+				width: 100%;
+
+				height: 100%
+			}
+
+			.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: 2px;
+				/* background: rgba(0, 0, 0, .6); */
+			}
+.label1 {
+				color: #ffffff;
+				font-family: sans-serif;
+				padding: 2px;
+				background: rgba(0, 0, 0, .6);
+			}
+		</style>
+		<script async src="/app/bin/layui/layui.js"></script>
+
+		<script type="importmap">
+					{
+						"imports": {
+							"three": "../build/three.module.js",
+							"jsm/": "../examples/jsm/"
+						}
+					}
+				</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 { VRButton } from './js/VRButton.js';
+
+			import { OrbitControls } from 'jsm/controls/OrbitControls.js';
+
+			import { CSS2DRenderer, CSS2DObject } from 'jsm/renderers/CSS2DRenderer.js';
+			import { Water } from 'jsm/objects/Water.js';
+			const type = 1;
+			window.THREE = THREE; // Used by APP Scripts.
+			window.VRButton = VRButton; // Used by APP Scripts.
+
+			var loader = new THREE.FileLoader();
+			loader.load('UASB3.json', function (text) {
+
+				var player = new APP.Player();
+				player.load(JSON.parse(text));
+				player.setSize(window.innerWidth, window.innerHeight);
+				player.play();
+
+				document.body.appendChild(player.dom);
+
+				window.addEventListener('resize', function () {
+
+					player.setSize(window.innerWidth, window.innerHeight);
+
+				});
+				var orbitControls = new OrbitControls(window.camera, player.dom);
+				// initLable();
+				setModel(window.scene, player);
+				AddWaters(player);
+				addRemarkLabels();
+
+			});
+
+
+			function addButton(obj, perent, i) {
+
+				const btnDiv = document.createElement('button');
+				btnDiv.className = 'btn';
+				btnDiv.identifierName = 'btn';
+				btnDiv.textContent = 'Btn： Click ...';
+				btnDiv.style.marginTop = '-1em';
+				btnDiv.style.zIndex = 1000;
+
+				const css2dBtn = new CSS2DObject(btnDiv);
+
+				css2dBtn.position.set(obj.x + 2, obj.y, obj.z);
+				css2dBtn.name = "datalabel" + i;
+				css2dBtn.userData = { name: "datalable", id: "", url: "" }
+				// css2DLabelList.add(css2DLabel);
+				window.scene.add(css2dBtn);
+
+			}
+
+
+
+
+			//添加这个就可以用鼠标拖动
+
+			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);
+				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 guid() {
+			// 	return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+			// 		var r = Math.random() * 16 | 0,
+			// 			v = c == 'x' ? r : (r & 0x3 | 0x8);
+			// 		return v.toString(16);
+			// 	});
+			// }
+
+
+			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直线和所有模型相交的数组集合
+				var intersects = raycaster.intersectObjects(scene.children);
+				console.log(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 +'1",text:"'+ tmpobj.name +'",x:' + obj.point.x +',y:' + obj.point.y +',z:'+ obj.point.z+'}');
+						if (tmpobj.name.indexOf('水泵M_') > -1) { // 水泵
+
+							openDialog(tmpobj)
+							//alert(tmpobj.name, "双击");
+						}
+						break;
+						// let mondeojb = {}
+						// mondeojb.id = guid();
+						// mondeojb.text = "新标签";
+						// mondeojb.position = tmpobj.position;
+						// mondeojb.rotation = tmpobj.rotation;
+						// var json = JSON.stringify(mondeojb);
+						// console.log(json);
+					}
+				}
+			}
+		 
+
+			//打开对话框
+			function openDialog(tmpobj) {
+				layer.open({
+					type: 1
+					, offset: type //具体配置参考：http://doc/modules/layer.html#offset
+					, id: 'layerDemo' + type //防止重复弹出
+					, content: '<div style="padding: 20px 100px;">' + tmpobj.name + '</div>'
+					, btn: '关闭'
+					, btnAlign: 'c' //按钮居中
+					, shade: 0 //不显示遮罩
+					, yes: function () {
+						layer.closeAll();
+					}
+				});
+			}
+			function createCSSLabel(text, parent) {
+
+				const labelDiv = document.createElement('div');
+				labelDiv.className = 'label';
+				labelDiv.name = "csslabeldiv"
+				labelDiv.textContent = text;
+
+				labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
+				const moonLabel = new CSS2DObject(labelDiv);
+				moonLabel.position.set(1, 2, 0);
+				moonLabel.name = "datalabel"
+				moonLabel.userData = { name: "datalable", id: "", url: "" }
+				return moonLabel;
+
+			}
+			let pumpModelArr = []
+			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: "油桶1" }, { name: "OilTank002", text: "油桶2" }, { name: "OilTank003", text: "油桶3" },
+				 
+			]
+	       const remarkLabArr = [{ name: "221", text: "22", x: 2.0501311208405713, y: -0.9778027560129786, z: -5.377062185399511 }, { name: "211", text: "21", x: 0.1740166304621844, y: -0.9760432883855322, z: -5.667636935767586 },
+		   { name: "491", text: "49", x: -2.105188770141037, y: -0.9901334936138524, z: -5.4669334625207435 }]
+		 
+
+ 
+			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') {
+				console.log("parent.name=", parent.name)
+				if (!parent.name) {
+
+					return;
+				}
+				console.log("parent.name2=", parent.name)
+				let item = await getlabel(parent.name);
+				console.log("item2=", item)
+				// debugger
+				if (!item) return;
+				console.log("item2=", item)
+				const labelDiv = document.createElement('div');
+				labelDiv.className = className;
+				labelDiv.name = "csslabel";
+				labelDiv.textContent =  item.text;
+				labelDiv.style.marginTop = '-1em';
+
+				labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
+				const css2DLabel = new CSS2DObject(labelDiv);
+				css2DLabel.position.set(x, y, z);
+				css2DLabel.name = "datalabel"
+				css2DLabel.userData = { name: "datalable", id: "", url: "" }
+				// css2DLabelList.add(css2DLabel);
+				if(parent){
+					parent.add(css2DLabel);
+
+				}else{
+					window.scene.add(css2DLabel);
+				}
+				
+
+			}
+			async function addRemarkLabel(parent,text, x = 0, y = 0, z = 0, className = 'label') {
+					 
+					const labelDiv = document.createElement('div');
+					labelDiv.className = className;
+					labelDiv.name = "csslabel";
+					labelDiv.textContent = text;
+					labelDiv.style.marginTop = '-1em';
+
+					labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
+					const css2DLabel = new CSS2DObject(labelDiv);
+					css2DLabel.position.set(x, y, z);
+					css2DLabel.name = "datalabel"
+					css2DLabel.userData = { name: "datalable", id: "", url: "" }
+					// css2DLabelList.add(css2DLabel);
+					if (parent) {
+						parent.add(css2DLabel);
+
+					} else {
+						window.scene.add(css2DLabel);
+					}
+
+
+				}
+			//状态标签
+			async function addStateLabel(parent, x = 0, y = 0, z = 0, className = 'label') {
+					console.log("parent.name=", parent.name)
+					if (!parent.name) {
+
+						return;
+					}
+					console.log("parent.name2=", parent.name)
+					let item = await getlabel(parent.name);
+					console.log("item2=", item)
+					// debugger
+					if (!item) return;
+					console.log("item2=", item)
+					const labelDiv = document.createElement('div');
+					labelDiv.className = className;
+					labelDiv.name = "csslabel";
+					labelDiv.textContent = '●' + item.text;
+					labelDiv.style.marginTop = '-1em';
+
+					labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
+					const css2DLabel = new CSS2DObject(labelDiv);
+					css2DLabel.position.set(x, y, z);
+					css2DLabel.name = "datalabel"
+					css2DLabel.userData = { name: "datalable", id: "", url: "" }
+					// css2DLabelList.add(css2DLabel);
+					parent.add(css2DLabel);
+
+				}
+			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('./img/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);
+
+
+			}
+
+			// 设置标签
+			function setModel(scene, player) {
+
+
+				scene.castShadow = true; // 开启阴影
+				scene.receiveShadow = true; // 接受阴影
+				scene.children.forEach((item, index) => {
+
+
+					// console.log("--------item ==", index);
+					// console.log("name=", item.name)
+					// console.log("type=", item.type)
+					if (item.name.indexOf('OilTank00') > -1) {
+						addLabel(item, 0, 0.4, 0)
+					}
+					else if (item.name.indexOf('水泵M_') > -1) { // 水泵
+						pumpModelArr.push(item);
+						//debugger
+						if (item.name === '水泵001') {
+							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)
+			}
+			function addRemarkLabels(){
+				remarkLabArr.forEach((item, index) => {
+					 addRemarkLabel(null,item.text,item.x,item.y,item.z,'label1')
+
+				})
+			}
+			function addDBclick(item) {
+				item.ondbclick = pumpDBClick
+			}
+			function pumpDBClick(event) {
+				alert("ddd111111");
+			}
+			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;
+
+				})
+			}
+
+		</script>
+
+
+		<!-- Code injected by live-server -->
+		<script>
+			// <![CDATA[  <-- For SVG support
+			if ('WebSocket' in window) {
+				(function () {
+					function refreshCSS() {
+						var sheets = [].slice.call(document.getElementsByTagName("link"));
+						var head = document.getElementsByTagName("head")[0];
+						for (var i = 0; i < sheets.length; ++i) {
+							var elem = sheets[i];
+							var parent = elem.parentElement || head;
+							parent.removeChild(elem);
+							var rel = elem.rel;
+							if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
+								var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
+								elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
+							}
+							parent.appendChild(elem);
+						}
+					}
+					var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
+					var address = protocol + window.location.host + window.location.pathname + '/ws';
+					var socket = new WebSocket(address);
+					socket.onmessage = function (msg) {
+						if (msg.data == 'reload') window.location.reload();
+						else if (msg.data == 'refreshcss') refreshCSS();
+					};
+					if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
+						console.log('Live reload enabled.');
+						sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
+					}
+				})();
+			}
+			else {
+				console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
+			}
+	// ]]>
+		</script>
+		<script>
+
+		</script>
+
+	</body>
+
+</html>

app/lndexzhsc.html

@@ -0,0 +1,206 @@
+<!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;
+
+				width: 100%;
+
+				height: 100%
+			}
+
+			.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: 2px;
+				background: rgba(0, 0, 0, .6);
+			}
+
+		</style>
+		<script type="importmap">
+					{
+						"imports": {
+							"three": "../build/three.module.js",
+							"jsm/": "../examples/jsm/"
+						}
+					}
+				</script>
+	</head>
+
+	<body ontouchstart="">
+		<div class="info">2D数据表格显示 不旋转 综合水池</div>
+		<script type="module">
+
+			import * as THREE from 'three';
+			import { APP } from './js/app.js';
+			import { VRButton } from './js/VRButton.js';
+
+			import { OrbitControls } from 'jsm/controls/OrbitControls.js';
+
+			import { CSS2DRenderer, CSS2DObject } from 'jsm/renderers/CSS2DRenderer.js';
+
+			window.THREE = THREE; // Used by APP Scripts.
+			window.VRButton = VRButton; // Used by APP Scripts.
+
+			var loader = new THREE.FileLoader();
+			loader.load('zhsc.json', function (text) {
+
+				var player = new APP.Player();
+				player.load(JSON.parse(text));
+				player.setSize(window.innerWidth, window.innerHeight);
+				player.play();
+
+				document.body.appendChild(player.dom);
+
+				window.addEventListener('resize', function () {
+
+					player.setSize(window.innerWidth, window.innerHeight);
+
+				});
+				var orbitControls = new OrbitControls(window.camera, player.dom);
+				initLable();
+
+			});
+			function initLable() {
+				const labobjarr = [{ text: "测试标签1", x: -1, y: 0, z: 1 }, { text: "测试标签2", x: 1, y: 1, z: 1 }]
+				for (var i = 0, length = labobjarr.length; i < length; i++) {
+
+					addLabel(labobjarr[i], scene, i);
+
+				}
+			}
+			function addLabel(obj, scene, i) {
+
+				const labelDiv = document.createElement('div');
+				labelDiv.className = 'label';
+				labelDiv.name = "label" + i;
+				labelDiv.textContent =  obj.text;
+
+
+				labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
+				const css2DLabel = new CSS2DObject(labelDiv);
+				css2DLabel.position.set(obj.x, obj.y, obj.z);
+				css2DLabel.name = "datalabel" + i;
+				css2DLabel.userData = { name: "datalable", id: "", url: "" }
+				// css2DLabelList.add(css2DLabel);
+				window.scene.add(css2DLabel);
+
+			}
+			//添加这个就可以用鼠标拖动
+
+			var raycaster = new THREE.Raycaster()
+			var mouse = new THREE.Vector2()
+			//点击模型
+			window.addEventListener('click', onMouseClick);
+
+			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);
+				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[0].color.set(0xff6666);
+							alert("视频");
+						} else {
+							obj.object.material[0].color.set(0xff0000);
+						}
+					}
+				}
+			}
+
+			function createCSSLabel(text, parent) {
+
+				const labelDiv = document.createElement('div');
+				labelDiv.className = 'label';
+				labelDiv.name = "csslabeldiv"
+				labelDiv.textContent = text;
+
+				labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
+				const moonLabel = new CSS2DObject(labelDiv);
+				moonLabel.position.set(1, 2, 0);
+				moonLabel.name = "datalabel"
+				moonLabel.userData = { name: "datalable", id: "", url: "" }
+				return moonLabel;
+
+			}
+		</script>
+		<!-- Code injected by live-server -->
+		<script>
+			// <![CDATA[  <-- For SVG support
+			if ('WebSocket' in window) {
+				(function () {
+					function refreshCSS() {
+						var sheets = [].slice.call(document.getElementsByTagName("link"));
+						var head = document.getElementsByTagName("head")[0];
+						for (var i = 0; i < sheets.length; ++i) {
+							var elem = sheets[i];
+							var parent = elem.parentElement || head;
+							parent.removeChild(elem);
+							var rel = elem.rel;
+							if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
+								var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
+								elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
+							}
+							parent.appendChild(elem);
+						}
+					}
+					var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
+					var address = protocol + window.location.host + window.location.pathname + '/ws';
+					var socket = new WebSocket(address);
+					socket.onmessage = function (msg) {
+						if (msg.data == 'reload') window.location.reload();
+						else if (msg.data == 'refreshcss') refreshCSS();
+					};
+					if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
+						console.log('Live reload enabled.');
+						sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
+					}
+				})();
+			}
+			else {
+				console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
+			}
+	// ]]>
+		</script>
+	</body>
+
+</html>

editor/index.html

@@ -11,10 +11,11 @@
 		<link rel="shortcut icon" href="../files/favicon.ico" media="(prefers-color-scheme: light)" />
 		<style>
 			.label {
-				color: #FFF;
+				color: #FF0000;
 				font-family: sans-serif;
 				padding: 2px;
 				background: rgba(0, 0, 0, .6);
+				text-align: center;
 			}
 
 		</style>
@@ -82,8 +83,8 @@
 			import { Menubar } from './js/menus/Menubar.js';
 			import { Resizer } from './js/Resizer.js';
 			import { VRButton } from 'three/addons/webxr/VRButton.js';
-		 
-			
+
+
 			window.URL = window.URL || window.webkitURL;
 			window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
 

editor/js/Editor.js

@@ -126,10 +126,15 @@ function Editor() {
 	this.helpers = {};
 
 	this.cameras = {};
+
+	this.labellist = [];
+	this.monitoringlist = [];
+
 	this.viewportCamera = this.camera;
 
 	this.addCamera(this.camera);
 
+
 }
 
 Editor.prototype = {
@@ -210,7 +215,10 @@ Editor.prototype = {
 		this.signals.sceneGraphChanged.dispatch();
 
 	},
-
+	addLable: function (object, parent, index) {
+		// debugger
+		// this.labellist.push(object);
+	},
 	moveObject: function (object, parent, before) {
 
 		if (parent === undefined) {
@@ -420,7 +428,7 @@ Editor.prototype = {
 
 	addHelper: function () {
 
-		debugger
+
 		var geometry = new THREE.SphereGeometry(2, 4, 2);
 		var material = new THREE.MeshBasicMaterial({ color: 0xff0000, visible: false });
 
@@ -656,6 +664,9 @@ Editor.prototype = {
 
 		this.signals.editorCleared.dispatch();
 
+		this.labellist = [];
+		this.monitoringlist = [];
+
 	},
 
 	//
@@ -681,7 +692,7 @@ Editor.prototype = {
 
 		var scene = this.scene;
 		var scripts = this.scripts;
-        // debugger
+		// debugger
 		for (var key in scripts) {
 
 			var script = scripts[key];
@@ -710,7 +721,8 @@ Editor.prototype = {
 			camera: this.camera.toJSON(),
 			scene: this.scene.toJSON(),
 			scripts: this.scripts,
-			history: this.history.toJSON()
+			history: this.history.toJSON(),
+			labels: this.labellist,
 
 		};
 

editor/js/Sidebar.Project.Renderer.js

@@ -128,7 +128,7 @@ function SidebarProjectRenderer( editor ) {
 		css2dRenderer.setSize(window.innerWidth, window.innerHeight);
 		css2dRenderer.domElement.style.position = 'absolute';
 		css2dRenderer.domElement.style.top = '0px';//信息弹窗界面高度一半
-		css2dRenderer.domElement.style.left = '0px';//信息弹窗界面宽度一半
+		// css2dRenderer.domElement.style.left = '0px';//信息弹窗界面宽度一半
 		css2dRenderer.domElement.style.pointerEvents = 'none';
 
 		signals.rendererCSSCreated.dispatch(css2dRenderer);

editor/js/commands/AddLableCommand.js

@@ -0,0 +1,68 @@
+import { Command } from '../Command.js';
+import { ObjectLoader } from 'three';
+
+/**
+ * @param editor Editor
+ * @param object THREE.Object3D
+ * @constructor
+ */
+class AddLableCommand extends Command {
+
+	constructor( editor, object ) {
+
+		super( editor );
+
+		this.type = 'AddObjectCommand';
+
+		this.object = object;
+		if ( object !== undefined ) {
+
+			this.name = `Add Object: ${object.name}`;
+
+		}
+
+	}
+
+	execute() {
+
+		//this.editor.addObject( this.object );
+		this.editor.addLable(this.object);
+		//this.editor.select( this.object );
+
+	}
+
+	undo() {
+
+		this.editor.removeObject( this.object );
+		this.editor.deselect();
+
+	}
+
+	toJSON() {
+
+		const output = super.toJSON( this );
+
+		output.object = this.object.toJSON();
+
+		return output;
+
+	}
+
+	fromJSON( json ) {
+
+		super.fromJSON( json );
+
+		this.object = this.editor.objectByUuid( json.object.object.uuid );
+
+		if ( this.object === undefined ) {
+
+			const loader = new ObjectLoader();
+			this.object = loader.parse( json.object );
+
+		}
+
+	}
+
+}
+
+export { AddLableCommand };

editor/js/menus/Menubar.Models.js

@@ -4,6 +4,7 @@ import * as THREE from 'three';
 import { UIPanel, UIRow, UIHorizontalRule } from '../libs/ui.js';
 
 import { AddObjectCommand } from '../commands/AddObjectCommand.js';
+import { AddLableCommand } from '../commands/AddLableCommand.js';
 import { GLTFLoader } from '/examples/jsm/loaders/GLTFLoader.js';
 import { FBXLoader } from '/examples/jsm/loaders/FBXLoader.js';
 import { OBJLoader } from '/examples/jsm/loaders/OBJLoader.js'; //引入obj模型加载库OBJLoader.js
@@ -58,10 +59,10 @@ function MenubarModels(editor) {
 		fbxloader.load("/editor/models/camera.fbx", function (object) {
 
 			let obj = object.children[0];
-		 
+
 			obj.name = '视频监控' + i++
 			obj.userData = { type: "monitoring", name: "视频监控" }
-			obj.scale.x=0.08
+			obj.scale.x = 0.08
 			obj.scale.y = 0.08
 			obj.scale.z = 0.08
 			// object.url="url"
@@ -119,14 +120,15 @@ function MenubarModels(editor) {
 	option.setTextContent(strings.getKey('menubar/models/addlable'));
 	option.onClick(function () {
 
-		add2dlable("中国");
-		return;
+		
+		// return;
 
 		let selectobj = editor.selected;
 		if (!!!selectobj) {
 			alert("none");
 			return;
 		}
+		 add2dlable("中国");
 		// selectobj.layers.enableAll();
 		// debugger
 		// const moonDiv = document.createElement('div');
@@ -143,33 +145,51 @@ function MenubarModels(editor) {
 		// moonLabel.layers.set(1);
 		// createText(editor, "abc");
 
-		AddSceneTextCSS2DLabel(selectobj);
+		// AddSceneTextCSS2DLabel(selectobj);
 
 	});
 	options.add(option);
 
+
 	option = new UIRow();
 	option.setClass('option');
-	option.setTextContent('划线');//strings.getKey('menubar/models/addlable'));
+	option.setTextContent('数据');//strings.getKey('menubar/models/addlable'));
 	option.onClick(function () {
 
 
 		//create a blue LineBasicMaterial
-		const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
+		const csslable= AddCSSLabel();
+		editor.execute(new AddObjectCommand(editor, csslable));
+
+	});
+	options.add(option)
+
 
+	options.add(option);
 
-		const points = [];
-		points.push(new THREE.Vector3(- 10, 0, 0));
-		points.push(new THREE.Vector3(0, 10, 0));
-		points.push(new THREE.Vector3(10, 0, 0));
 
-		const geometry = new THREE.BufferGeometry().setFromPoints(points);
+	// option = new UIRow();
+	// option.setClass('option');
+	// option.setTextContent('划线');//strings.getKey('menubar/models/addlable'));
+	// option.onClick(function () {
 
-		const line = new THREE.Line(geometry, material);
 
-		editor.execute(new AddObjectCommand(editor, line));
+	// 	//create a blue LineBasicMaterial
+	// 	const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
 
-	});
+
+	// 	const points = [];
+	// 	points.push(new THREE.Vector3(- 10, 0, 0));
+	// 	points.push(new THREE.Vector3(0, 10, 0));
+	// 	points.push(new THREE.Vector3(10, 0, 0));
+
+	// 	const geometry = new THREE.BufferGeometry().setFromPoints(points);
+
+	// 	const line = new THREE.Line(geometry, material);
+
+	// 	editor.execute(new AddObjectCommand(editor, line));
+
+	// });
 	options.add(option)
 
 	return container;
@@ -185,7 +205,7 @@ function add2dlable(text) {
 
 	context.font = 'Bold 20px Arial';
 	context.fillStyle = 'rgba( 255, 0, 0, 1 )';
-	context.fillText(text, 0,20);
+	context.fillText(text, 0, 20);
 	const labelTexture = new THREE.Texture(labelCanvas);
 	labelTexture.magFilter = THREE.LinearFilter;
 	labelTexture.minFilter = THREE.LinearFilter;
@@ -198,25 +218,23 @@ function add2dlable(text) {
 	const labelPlane = new THREE.PlaneGeometry(labelCanvas.width, labelCanvas.height);
 
 	let labelMesh = new THREE.Mesh(labelPlane, labelMaterial);
-	labelMesh.name='标签'
-	editor.execute(new AddObjectCommand(editor, labelMesh));
+	labelMesh.name = '标签'
+	editor.execute(new AddLableCommand(editor, labelMesh));
 }
 
-function AddSceneTextCSS2DLabel(obj) {
-
+function AddCSSLabel() {
 
 	const labelDiv = document.createElement('div');
 	labelDiv.className = 'label';
-	labelDiv.identifierName = 'label';
-	labelDiv.textContent = '显示内容 Test ...';
-	labelDiv.style.marginTop = '-1em';
-	const css2dLabel = new CSS2DObject(labelDiv);
-	css2dLabel.position.set(0, 1, 0);
+	labelDiv.name = "csslabeldiv"
+	labelDiv.textContent = '中国11';
+	
 	labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
-	css2dLabel.name = 'CSS2DLabel';
-	obj.add(css2dLabel);
-
-	editor.signals.render.dispatch();
+	const moonLabel = new CSS2DObject(labelDiv);
+	moonLabel.position.set(0, 1, 0);
+	moonLabel.name="datalabel"
+	moonLabel.userData={name:"datalable",id:"",url:""}
+	return moonLabel; 
 
 }
 

examples/css2d_label.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
@@ -10,10 +11,12 @@
 				color: #FFF;
 				font-family: sans-serif;
 				padding: 2px;
-				background: rgba( 0, 0, 0, .6 );
+				background: rgba(0, 0, 0, .6);
 			}
+
 		</style>
 	</head>
+
 	<body>
 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> css2d - label</div>
 
@@ -47,12 +50,12 @@
 
 				'Toggle Name': function () {
 
-					camera.layers.toggle( 0 );
+					camera.layers.toggle(0);
 
 				},
 				'Toggle Mass': function () {
 
-					camera.layers.toggle( 1 );
+					camera.layers.toggle(1);
 
 				},
 				'Enable All': function () {
@@ -73,7 +76,8 @@
 			const textureLoader = new THREE.TextureLoader();
 
 			let moon;
-
+			let moonLabel;
+			let i = 0;
 			init();
 			animate();
 
@@ -82,105 +86,106 @@
 				const EARTH_RADIUS = 1;
 				const MOON_RADIUS = 0.27;
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );
-				camera.position.set( 10, 5, 20 );
+				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
+				camera.position.set(10, 5, 20);
 				camera.layers.enableAll();
-				camera.layers.toggle( 1 );
+				camera.layers.toggle(1);
 
 				scene = new THREE.Scene();
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff );
-				dirLight.position.set( 0, 0, 1 );
+				const dirLight = new THREE.DirectionalLight(0xffffff);
+				dirLight.position.set(0, 0, 1);
 				dirLight.layers.enableAll();
-				scene.add( dirLight );
+				scene.add(dirLight);
 
-				const axesHelper = new THREE.AxesHelper( 5 );
+				const axesHelper = new THREE.AxesHelper(5);
 				axesHelper.layers.enableAll();
-				scene.add( axesHelper );
+				scene.add(axesHelper);
 
 				//
 
-				const earthGeometry = new THREE.SphereGeometry( EARTH_RADIUS, 16, 16 );
-				const earthMaterial = new THREE.MeshPhongMaterial( {
+				const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 16, 16);
+				const earthMaterial = new THREE.MeshPhongMaterial({
 					specular: 0x333333,
 					shininess: 5,
-					map: textureLoader.load( 'textures/planets/earth_atmos_2048.jpg' ),
-					specularMap: textureLoader.load( 'textures/planets/earth_specular_2048.jpg' ),
-					normalMap: textureLoader.load( 'textures/planets/earth_normal_2048.jpg' ),
-					normalScale: new THREE.Vector2( 0.85, 0.85 )
-				} );
-				const earth = new THREE.Mesh( earthGeometry, earthMaterial );
-				scene.add( earth );
-
-				const moonGeometry = new THREE.SphereGeometry( MOON_RADIUS, 16, 16 );
-				const moonMaterial = new THREE.MeshPhongMaterial( {
+					map: textureLoader.load('textures/planets/earth_atmos_2048.jpg'),
+					specularMap: textureLoader.load('textures/planets/earth_specular_2048.jpg'),
+					normalMap: textureLoader.load('textures/planets/earth_normal_2048.jpg'),
+					normalScale: new THREE.Vector2(0.85, 0.85)
+				});
+				const earth = new THREE.Mesh(earthGeometry, earthMaterial);
+				scene.add(earth);
+
+				const moonGeometry = new THREE.SphereGeometry(MOON_RADIUS, 16, 16);
+				const moonMaterial = new THREE.MeshPhongMaterial({
 					shininess: 5,
-					map: textureLoader.load( 'textures/planets/moon_1024.jpg' )
-				} );
-				moon = new THREE.Mesh( moonGeometry, moonMaterial );
-				scene.add( moon );
+					map: textureLoader.load('textures/planets/moon_1024.jpg')
+				});
+				moon = new THREE.Mesh(moonGeometry, moonMaterial);
+				scene.add(moon);
 
 				//
 
 				earth.layers.enableAll();
 				moon.layers.enableAll();
 
-				const earthDiv = document.createElement( 'div' );
+				const earthDiv = document.createElement('div');
 				earthDiv.className = 'label';
 				earthDiv.textContent = 'Earth';
 				earthDiv.style.marginTop = '-1em';
-				const earthLabel = new CSS2DObject( earthDiv );
-				earthLabel.position.set( 0, EARTH_RADIUS, 0 );
-				earth.add( earthLabel );
-				earthLabel.layers.set( 0 );
+				const earthLabel = new CSS2DObject(earthDiv);
+				earthLabel.position.set(0, EARTH_RADIUS, 0);
+				earth.add(earthLabel);
+				earthLabel.layers.set(0);
 
-				const earthMassDiv = document.createElement( 'div' );
+				const earthMassDiv = document.createElement('div');
 				earthMassDiv.className = 'label';
 				earthMassDiv.textContent = '5.97237e24 kg';
 				earthMassDiv.style.marginTop = '-1em';
-				const earthMassLabel = new CSS2DObject( earthMassDiv );
-				earthMassLabel.position.set( 0, - 2 * EARTH_RADIUS, 0 );
-				earth.add( earthMassLabel );
-				earthMassLabel.layers.set( 1 );
+				const earthMassLabel = new CSS2DObject(earthMassDiv);
+				earthMassLabel.position.set(0, - 2 * EARTH_RADIUS, 0);
+				earth.add(earthMassLabel);
+				earthMassLabel.layers.set(1);
 
-				const moonDiv = document.createElement( 'div' );
+				const moonDiv = document.createElement('div');
 				moonDiv.className = 'label';
 				moonDiv.textContent = 'Moon';
 				moonDiv.style.marginTop = '-1em';
-				const moonLabel = new CSS2DObject( moonDiv );
-				moonLabel.position.set( 0, MOON_RADIUS, 0 );
-				moon.add( moonLabel );
-				moonLabel.layers.set( 0 );
+				moonLabel = new CSS2DObject(moonDiv);
+				moonLabel.position.set(0, MOON_RADIUS, 0);
+				moon.add(moonLabel);
+				moonLabel.layers.set(0);
 
-				const moonMassDiv = document.createElement( 'div' );
+				const moonMassDiv = document.createElement('div');
 				moonMassDiv.className = 'label';
 				moonMassDiv.textContent = '7.342e22 kg';
 				moonMassDiv.style.marginTop = '-1em';
-				const moonMassLabel = new CSS2DObject( moonMassDiv );
-				moonMassLabel.position.set( 0, - 2 * MOON_RADIUS, 0 );
-				moon.add( moonMassLabel );
-				moonMassLabel.layers.set( 1 );
+				const moonMassLabel = new CSS2DObject(moonMassDiv);
+				moonMassLabel.position.set(0, - 2 * MOON_RADIUS, 0);
+				moon.add(moonMassLabel);
+				moonMassLabel.layers.set(1);
 
 				//
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				document.body.appendChild( renderer.domElement );
+				renderer.setPixelRatio(window.devicePixelRatio);
+				renderer.setSize(window.innerWidth, window.innerHeight);
+				document.body.appendChild(renderer.domElement);
 
 				labelRenderer = new CSS2DRenderer();
-				labelRenderer.setSize( window.innerWidth, window.innerHeight );
+				labelRenderer.setSize(window.innerWidth, window.innerHeight);
 				labelRenderer.domElement.style.position = 'absolute';
 				labelRenderer.domElement.style.top = '0px';
-				document.body.appendChild( labelRenderer.domElement );
+				document.body.appendChild(labelRenderer.domElement);
 
-				const controls = new OrbitControls( camera, labelRenderer.domElement );
+				const controls = new OrbitControls(camera, labelRenderer.domElement);
 				controls.minDistance = 5;
 				controls.maxDistance = 100;
 
-				
+                let newlable= AddCSSLabel();
+				scene.add(newlable);
 
-				window.addEventListener( 'resize', onWindowResize );
+				window.addEventListener('resize', onWindowResize);
 
 				initGui();
 
@@ -192,23 +197,24 @@
 
 				camera.updateProjectionMatrix();
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setSize(window.innerWidth, window.innerHeight);
 
-				labelRenderer.setSize( window.innerWidth, window.innerHeight );
+				labelRenderer.setSize(window.innerWidth, window.innerHeight);
 
 			}
 
 
 			function animate() {
 
-				requestAnimationFrame( animate );
+
+				requestAnimationFrame(animate);
 
 				const elapsed = clock.getElapsedTime();
 
-				moon.position.set( Math.sin( elapsed ) * 5, 0, Math.cos( elapsed ) * 5 );
+				moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5);
 
-				renderer.render( scene, camera );
-				labelRenderer.render( scene, camera );
+				renderer.render(scene, camera);
+				labelRenderer.render(scene, camera);
 
 			}
 
@@ -218,13 +224,40 @@
 
 				gui = new GUI();
 
-				gui.add( layers, 'Toggle Name' );
-				gui.add( layers, 'Toggle Mass' );
-				gui.add( layers, 'Enable All' );
-				gui.add( layers, 'Disable All' );
+				gui.add(layers, 'Toggle Name');
+				gui.add(layers, 'Toggle Mass');
+				gui.add(layers, 'Enable All');
+				gui.add(layers, 'Disable All');
+
+			}
+			function update() {
+				i = i + 1;
+				moonLabel.element.textContent = i;
+				setTimeout(update(), 1000);
 
 			}
 
+			setInterval(function () {
+				i = i + 1;
+				moonLabel.element.textContent = i;
+			}, 1000);
+
+	function AddCSSLabel() {
+
+		const labelDiv = document.createElement('div');
+		labelDiv.className = 'label';
+		labelDiv.name = "csslabeldiv"
+		labelDiv.textContent = '中国11';
+
+		labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
+		const moonLabel = new CSS2DObject(labelDiv);
+		moonLabel.position.set(1, 2, 0);
+		moonLabel.name = "datalabel"
+		moonLabel.userData = { name: "datalable", id: "", url: "" }
+		return moonLabel;
+
+	}
 		</script>
 	</body>
+
 </html>