lxc 2 years ago
parent
commit
1a9eaa934e
  1. 43
      js/app.js
  2. 82
      js/units/css3dlabel.js
  3. 120
      lndexUASB.html

43
js/app.js

@ -318,37 +318,56 @@ var APP = {
url); url);
cssScene.add(cssObject); cssScene.add(cssObject);
} }
let defaultScale=300 const defaultScale=80
this.create3dLabel = function (parent, text, w = 100, h = 20, position, rotation) { this.create3dLabel = function (parent, text, w = 100, h = 20, position, rotation) {
let txtlength=text.length let txtlength=text.length
var width = defaultScale * txtlength; var width = defaultScale * txtlength;
var height = defaultScale + 800; var height = defaultScale + 15;
// debugger
var plane = css3dlabel.createPlane( var plane = css3dlabel.createPlane(
width, height, width, height,
position, position,
rotation); rotation);
// plane.scale.set(0.03, 0.03, 0.03);
glScene.add(plane); glScene.add(plane);
var cssObject = css3dlabel.createCssLabel(text, var cssObject = css3dlabel.createCssLabel(text,
w, h, width, height,
position, position,
rotation); rotation);
// if(parent){ // if(parent){
// parent.add(cssObject); // parent.add(cssObject);
// }else{ // }else{
cssObject.scale.set(0.3, 0.3, 0.3);
cssScene.add(cssObject); 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() { function createSpriteShape() {
/*1、创建一个画布,记得设置画布的宽高,否则将使用默认宽高,有可能会导致图像显示变形*/ /*1、创建一个画布,记得设置画布的宽高,否则将使用默认宽高,有可能会导致图像显示变形*/
let canvas = document.createElement("canvas"); let canvas = document.createElement("canvas");

82
js/units/css3dlabel.js

@ -1,48 +1,57 @@
import { CSS3DRenderer, CSS3DObject } from 'jsm/renderers/CSS3DRenderer.js'; import { CSS3DRenderer, CSS3DObject } from 'jsm/renderers/CSS3DRenderer.js';
export default { export default {
createButton: function (obj, perent, i) { // createButton: function (name,position, rotation ,click ) {
const btnDiv = document.createElement('button'); // const btnDiv = document.createElement('button');
btnDiv.className = 'btn'; // btnDiv.className = 'btn';
btnDiv.identifierName = 'btn'; // btnDiv.identifierName = 'btn';
btnDiv.textContent = 'Btn: Click ...'; // btnDiv.textContent = 'Btn: Click ...';
btnDiv.style.marginTop = '-1em'; // btnDiv.style.marginTop = '-1em';
btnDiv.style.zIndex = 1000; // btnDiv.style.zIndex = 1000;
// btnDiv.name = name;
const css2dBtn = new CSS3DObject(btnDiv); // btnDiv.onclick = click
// 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: "" } // // css2dBtn.name = "datalabel" + i;
// css2DLabelList.add(css2DLabel); // css2dBtn.userData = { name: "datalable", id: "", url: "" }
window.scene.add(css2dBtn); // 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'); // const labelDiv = document.createElement('div');
labelDiv.className = className; // labelDiv.className = className;
labelDiv.name = "csslabeldiv" // labelDiv.name = "csslabeldiv"
labelDiv.textContent = text; // labelDiv.textContent = text;
labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件 // labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
const css2DLabel = new CSS3DObject(labelDiv); // const css2DLabel = new CSS3DObject(labelDiv);
css2DLabel.position.set(x, y, z); // css2DLabel.position.set(x, y, z);
css2DLabel.name = "datalabel" // css2DLabel.name = "datalabel"
css2DLabel.userData = { name: "datalable", id: "", url: "" } // css2DLabel.userData = { name: "datalable", id: "", url: "" }
return css2DLabel; // return css2DLabel;
}, // },
//创建标签 //创建标签
createCssLabel: function (text, w, h, position,rotation, className = 'label') { createCssLabel: function (text, w, h, position,rotation, className = 'label') {
const labelDiv = document.createElement('div'); const labelDiv = document.createElement('div');
labelDiv.className = className; labelDiv.className = className;
labelDiv.name = "csslabeldiv"
labelDiv.textContent = text; labelDiv.name = "csslabel"
labelDiv.textContent = text ;
labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件 labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
var cssObject = new CSS3DObject(labelDiv); var cssObject = new CSS3DObject(labelDiv);
@ -53,9 +62,9 @@ export default {
cssObject.rotation.x = rotation.x; cssObject.rotation.x = rotation.x;
cssObject.rotation.y = rotation.y; cssObject.rotation.y = rotation.y;
cssObject.rotation.z = rotation.z; cssObject.rotation.z = rotation.z;
cssObject.scale.set(0.03, 0.03, 0.03); cssObject.scale.set(0.018, 0.018, 0.02);
cssObject.name = "datalabel" cssObject.name = "csslabel"
cssObject.userData = { name: "datalable", id: "", url: "" } cssObject.userData = { name: "datalable", id: "", url: "" }
return cssObject; return cssObject;
@ -79,7 +88,7 @@ export default {
createPlane: function (w, h, position, rotation) { createPlane: function (w, h, position, rotation) {
var material = new THREE.MeshBasicMaterial({ var material = new THREE.MeshBasicMaterial({
color: 0x000000, color: 0x000000,
opacity: 0.0, opacity: 0.0,
side: THREE.DoubleSide side: THREE.DoubleSide
}); });
@ -95,6 +104,7 @@ export default {
mesh.rotation.x = rotation.x; mesh.rotation.x = rotation.x;
mesh.rotation.y = rotation.y; mesh.rotation.y = rotation.y;
mesh.rotation.z = rotation.z; mesh.rotation.z = rotation.z;
mesh.name="plane"
mesh.scale.set(0.003, 0.003, 0.003); mesh.scale.set(0.003, 0.003, 0.003);
return mesh; return mesh;

120
lndexUASB.html

@ -32,8 +32,15 @@
.label { .label {
color: #ff000f; color: #ff000f;
font-family: sans-serif; font-family: sans-serif;
padding: 2px; padding: 20px;
background: rgba(77, 0, 0, .6); background: rgba(149, 140, 140, 0.6);
}
.btn {
color: #ff000f;
font-family: sans-serif;
padding: 20px;
background: rgba(149, 140, 140, 0.6);
} }
.label1 { .label1 {
@ -92,10 +99,19 @@
var bigLabelArr = [] var bigLabelArr = []
//红色标签 //红色标签
const labArr = [{ name: "水泵M_1", text: "水泵1" }, { name: "水泵M_2", text: "水泵002" } // 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: "水泵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" }, // , { 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 } const remarkLabArr = [{ name: "221", text: "USAB进水", x: 2.0501311208405713, y: -0.7778027560129786, z: -5.4, ry: 360 }
@ -120,13 +136,13 @@
addRemarkLabels(); addRemarkLabels();
mqttInit(); mqttInit();
for (var i = 0; i < 1; i++) { // for (var i = 0; i < 1; i++) {
player.create3dPage( // player.create3dPage(
1020, 680, // 1020, 680,
new THREE.Vector3(-2 - i, 2 + i / 3, -4.2 + i), // new THREE.Vector3(-2 - i, 2 + i / 3, -4.2 + i),
new THREE.Vector3(0, Math.PI, 0), // new THREE.Vector3(0, Math.PI, 0),
'https://zuoben.blog.csdn.net/'); // 'https://zuoben.blog.csdn.net/');
} // }
} }
// document.body.appendChild(player.dom); // document.body.appendChild(player.dom);
@ -186,13 +202,9 @@
scene.castShadow = true; // 开启阴影 scene.castShadow = true; // 开启阴影
scene.receiveShadow = true; // 接受阴影 scene.receiveShadow = true; // 接受阴影
scene.children.forEach((item, index) => {
scene.children.forEach((item, index) => {
// console.log("--------item ==", index); console.log("x=", x, "--------item ==", index, "name=", item.name, "type=", item.type);
// console.log("name=", item.name)
// console.log("type=", item.type)
if (item.name.indexOf('OilTank00') > -1) { if (item.name.indexOf('OilTank00') > -1) {
addLabel(item, 0, 0.4, 0) addLabel(item, 0, 0.4, 0)
} }
@ -206,17 +218,14 @@
item.material.color.set(0x006600); 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') { // 有下一级 if (item.type === 'Object3D' || item.type === 'Group') { // 有下一级
setModel(item, player); setModel(item, player);
} }
}) })
@ -239,7 +248,7 @@
addLabel(item, 0, 0.4, 0) addLabel(item, 0, 0.4, 0)
} }
else if (item.name == "水泵001") { else if (item.name == "水泵001") {
item.material.color.set(0xff0000); item.material.color.set(0xff0);
} }
else if (item.name == "水泵_2") { else if (item.name == "水泵_2") {
item.material.color.set(0xff0000); item.material.color.set(0xff0000);
@ -247,29 +256,16 @@
else if (item.name.indexOf('水泵M_') > -1 && item.type == "Mesh") { // 水泵 else if (item.name.indexOf('水泵M_') > -1 && item.type == "Mesh") { // 水泵
pumpModelArr.push(item); pumpModelArr.push(item);
// debugger
// if (item.name === '水泵001') {
// item.material.color.set(0xff0000);
// } else {
// item.material.color.set(0x006600);
// } // }
if (item.name === '水泵M_1') { if (item.name === '水泵M_1') {
item.material.color.set(0xff0000); 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) addStateLabel(item, 0, 3, 0)
} }
if (item.type === 'Object3D' || item.type === 'Group') { // 有下一级 if (item.type === 'Object3D' || item.type === 'Group') { // 有下一级
@ -343,7 +339,8 @@
let tmpobj = obj.object; let tmpobj = obj.object;
console.log(tmpobj) 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) { // 水泵 if (tmpobj.name.indexOf('水泵') > -1) { // 水泵
openDialog(tmpobj) openDialog(tmpobj)
@ -407,25 +404,25 @@
let item = await getlabel(parent.name); let item = await getlabel(parent.name);
// debugger // debugger
if (item) { if (item) {
let css2DLabel = css2dlabel.createCSSLabel(item.text, x, y, z, className);
if (parent) {
parent.add(css2DLabel);
} else { player.create3dLabel(parent, item.text,
window.scene.add(css2DLabel); 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') { async function addStateLabel(parent, x = 0, y = 0, z = 0, className = 'label') {
if (!parent.name) { if (!parent.name) {
return; return;
@ -433,18 +430,21 @@
console.log("parent.name2=", parent.name) console.log("parent.name2=", parent.name)
let item = await getlabel(parent.name); let item = await getlabel(parent.name);
if (item) { if (item) {
// let css2DLabel = player.create3dLabel('●' + item.text, x, y, z, className);
player.create3dLabel(parent, item.text, player.create3dLabel(parent, item.text,
1020, 680, 1020, 680,
new THREE.Vector3(x, y, z), item.position,
new THREE.Vector3(0, Math.PI, 0), 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) { function AddWaters(player) {
@ -555,9 +555,9 @@
}); });
} }
function updateLabel(label) { function updateLabel(event) {
alert(event)
} }
</script> </script>

Loading…
Cancel
Save