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
Unified 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); 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
View File

@ -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
View File

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

Write Preview
Loading…
Cancel
Save