diff --git a/js/app.js b/js/app.js index a2a4874..08a7d12 100644 --- a/js/app.js +++ b/js/app.js @@ -318,37 +318,56 @@ var APP = { url); cssScene.add(cssObject); } - let defaultScale=300 + const defaultScale=80 this.create3dLabel = function (parent, text, w = 100, h = 20, position, rotation) { let txtlength=text.length var width = defaultScale * txtlength; - var height = defaultScale + 800; - // debugger + var height = defaultScale + 15; + var plane = css3dlabel.createPlane( width, height, position, rotation); - // plane.scale.set(0.03, 0.03, 0.03); + glScene.add(plane); var cssObject = css3dlabel.createCssLabel(text, - w, h, + width, height, position, rotation); // if(parent){ // parent.add(cssObject); - // }else{ - cssObject.scale.set(0.3, 0.3, 0.3); + // }else{ cssScene.add(cssObject); - // } - - - - + // } } + // this.create3dButton = function (parent, text, w = 100, h = 20, position, rotation,click) { + + // 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.createButton(text, + // position, + // rotation,click); + // // if(parent){ + // // parent.add(cssObject); + + // // }else{ + // cssScene.add(cssObject); + // // } + // } function createSpriteShape() { /*1、创建一个画布，记得设置画布的宽高，否则将使用默认宽高，有可能会导致图像显示变形*/ let canvas = document.createElement("canvas"); diff --git a/js/units/css3dlabel.js b/js/units/css3dlabel.js index d4050df..0a86fc8 100644 --- a/js/units/css3dlabel.js +++ b/js/units/css3dlabel.js @@ -1,48 +1,57 @@ import { CSS3DRenderer, CSS3DObject } from 'jsm/renderers/CSS3DRenderer.js'; export default { - createButton: function (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 CSS3DObject(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); - - }, + // createButton: function (name,position, rotation ,click ) { + + // const btnDiv = document.createElement('button'); + // btnDiv.className = 'btn'; + // btnDiv.identifierName = 'btn'; + // btnDiv.textContent = 'Btn： Click ...'; + // btnDiv.style.marginTop = '-1em'; + // btnDiv.style.zIndex = 1000; + // btnDiv.name = name; + // btnDiv.onclick = click + // const css2dBtn = new CSS3DObject(btnDiv); + + + // // css2dBtn.name = "datalabel" + i; + // css2dBtn.userData = { name: "datalable", id: "", url: "" } + // css2dBtn.position.x = position.x; + // css2dBtn.position.y = position.y; + // css2dBtn.position.z = position.z; + + // css2dBtn.rotation.x = rotation.x; + // css2dBtn.rotation.y = rotation.y; + // css2dBtn.rotation.z = rotation.z; + // css2dBtn.scale.set(0.5, 0.5, 0.5); + // return css2dBtn; + + // }, //创建标签 - createCSSLabel: function (text, x = 0, y = 0, z = 0, className = 'label') { + // createCSSLabel: function (text, x = 0, y = 0, z = 0, className = 'label') { - const labelDiv = document.createElement('div'); - labelDiv.className = className; - labelDiv.name = "csslabeldiv" - labelDiv.textContent = text; + // const labelDiv = document.createElement('div'); + // labelDiv.className = className; + // labelDiv.name = "csslabeldiv" + // labelDiv.textContent = text; - labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件 - const css2DLabel = new CSS3DObject(labelDiv); - css2DLabel.position.set(x, y, z); - css2DLabel.name = "datalabel" - css2DLabel.userData = { name: "datalable", id: "", url: "" } - return css2DLabel; + // labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件 + // const css2DLabel = new CSS3DObject(labelDiv); + // css2DLabel.position.set(x, y, z); + // css2DLabel.name = "datalabel" + // css2DLabel.userData = { name: "datalable", id: "", url: "" } + // return css2DLabel; - }, + // }, //创建标签 createCssLabel: function (text, w, h, position,rotation, className = 'label') { const labelDiv = document.createElement('div'); labelDiv.className = className; - labelDiv.name = "csslabeldiv" - labelDiv.textContent = text; + + labelDiv.name = "csslabel" + labelDiv.textContent = text ; labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件 var cssObject = new CSS3DObject(labelDiv); @@ -53,9 +62,9 @@ export default { cssObject.rotation.x = rotation.x; cssObject.rotation.y = rotation.y; cssObject.rotation.z = rotation.z; - - cssObject.scale.set(0.03, 0.03, 0.03); - cssObject.name = "datalabel" + + cssObject.scale.set(0.018, 0.018, 0.02); + cssObject.name = "csslabel" cssObject.userData = { name: "datalable", id: "", url: "" } return cssObject; @@ -79,7 +88,7 @@ export default { createPlane: function (w, h, position, rotation) { var material = new THREE.MeshBasicMaterial({ - color: 0x000000, + color: 0x000000, opacity: 0.0, side: THREE.DoubleSide }); @@ -95,6 +104,7 @@ export default { mesh.rotation.x = rotation.x; mesh.rotation.y = rotation.y; mesh.rotation.z = rotation.z; + mesh.name="plane" mesh.scale.set(0.003, 0.003, 0.003); return mesh; diff --git a/lndexUASB.html b/lndexUASB.html index 1bd6140..36591f4 100644 --- a/lndexUASB.html +++ b/lndexUASB.html @@ -32,8 +32,15 @@ .label { color: #ff000f; font-family: sans-serif; - padding: 2px; - background: rgba(77, 0, 0, .6); + padding: 20px; + background: rgba(149, 140, 140, 0.6); + } + + .btn { + color: #ff000f; + font-family: sans-serif; + padding: 20px; + background: rgba(149, 140, 140, 0.6); } .label1 { @@ -92,10 +99,19 @@ 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: "水泵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 } @@ -120,13 +136,13 @@ 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/'); - } + // 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); @@ -186,13 +202,9 @@ 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) + 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) } @@ -206,17 +218,14 @@ item.material.color.set(0x006600); } - console.log("x=",x,"--------item ==", index, "name=", item.name, "type=", item.type); - addStateLabel(item, x/2, 2+x/2, x/2) - - + addStateLabel(item, x / 2, 2 + x / 2, x / 2) } if (item.type === 'Object3D' || item.type === 'Group') { // 有下一级 setModel(item, player); } - + }) @@ -239,7 +248,7 @@ addLabel(item, 0, 0.4, 0) } else if (item.name == "水泵001") { - item.material.color.set(0xff0000); + item.material.color.set(0xff0); } else if (item.name == "水泵_2") { item.material.color.set(0xff0000); @@ -247,29 +256,16 @@ else if (item.name.indexOf('水泵M_') > -1 && item.type == "Mesh") { // 水泵 pumpModelArr.push(item); - // debugger - // if (item.name === '水泵001') { - // item.material.color.set(0xff0000); - // } else { - // item.material.color.set(0x006600); // } if (item.name === '水泵M_1') { item.material.color.set(0xff0000); - // item.children[0].material.color.set(0xff0000); - // item.children[1].material.color.set(0xff0000); - // // item.children[2].material.color.set(0xff0000); - } else { - // item.material.color.set(0x006600); - // item.children[0].material.color.set(0x006600); - // item.children[1].material.color.set(0x006600); - // item.children[2].material.color.set(0x006600); + } else { + item.material.color.set(0x006600); } addStateLabel(item, 0, 3, 0) - - } if (item.type === 'Object3D' || item.type === 'Group') { // 有下一级 @@ -343,7 +339,8 @@ let tmpobj = obj.object; console.log(tmpobj) //输出 增加标签 位置 - 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}'); + 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) @@ -407,25 +404,25 @@ let item = await getlabel(parent.name); // debugger if (item) { - let css2DLabel = css2dlabel.createCSSLabel(item.text, x, y, z, className); - if (parent) { - parent.add(css2DLabel); - } else { - window.scene.add(css2DLabel); - } + 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; @@ -433,18 +430,21 @@ console.log("parent.name2=", parent.name) let item = await getlabel(parent.name); if (item) { - // let css2DLabel = player.create3dLabel('●' + item.text, x, y, z, className); + + player.create3dLabel(parent, item.text, 1020, 680, - new THREE.Vector3(x, y, z), - new THREE.Vector3(0, Math.PI, 0), + 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) { @@ -555,9 +555,9 @@ }); } - function updateLabel(label) { - + function updateLabel(event) { + alert(event) }