lxc
/
3dapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

ok

master
lxc 2 years ago
parent
586ae2a20f
commit
1a9eaa934e
3 changed files with 137 additions and 108 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 43
      js/app.js
  2. 82
      js/units/css3dlabel.js
  3. 120
      lndexUASB.html

43
js/app.js
View File

@ -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");

82
js/units/css3dlabel.js
View File

@ -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;

120
lndexUASB.html
View File

@ -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)
}
</script>

Write Preview
Loading…
Cancel
Save