You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
527 lines
15 KiB
527 lines
15 KiB
<!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.
|
|
//水泵列表
|
|
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: "USAB进水", x: 2.0501311208405713, y: -0.7778027560129786, z: -5.377062185399511, ry: 9.4 }
|
|
, { name: "211", text: "USAB进水", x: 0.1740166304621844, y: -0.7760432883855322, z: -5.667636935767586, ry: 9.4 },
|
|
{ name: "491", text: "至污泥浓缩池", x: -2.105188770141037, y: -0.7901334936138524, z: -5.4669334625207435, ry: 9.4 }]
|
|
|
|
|
|
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 + ',rx:0}');
|
|
if (tmpobj.name.indexOf('水泵M_') > -1) { // 水泵
|
|
|
|
openDialog(tmpobj)
|
|
//alert(tmpobj.name, "双击");
|
|
}
|
|
break;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//打开对话框
|
|
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;
|
|
|
|
}
|
|
|
|
|
|
//通过 模型名称获取标签名称
|
|
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, ry = 9.5) {
|
|
|
|
|
|
let labelCanvas = getTextCanvas(text);
|
|
const labelTexture = new THREE.Texture(labelCanvas);
|
|
labelTexture.magFilter = THREE.LinearFilter;
|
|
labelTexture.minFilter = THREE.LinearFilter;
|
|
labelTexture.needsUpdate = true;
|
|
|
|
const labelMaterial = new THREE.MeshBasicMaterial({
|
|
map: labelTexture,
|
|
side: THREE.DoubleSide
|
|
});
|
|
labelMaterial.transparent = true;
|
|
const labelPlane = new THREE.PlaneGeometry(labelCanvas.width, labelCanvas.height);
|
|
|
|
let labelMesh = new THREE.Mesh(labelPlane, labelMaterial);
|
|
labelMesh.name = '标签'
|
|
labelMesh.position.set(x, y, z);
|
|
labelMesh.scale.set(0.01, 0.01, 0.01);
|
|
labelMesh.userData = { name: "imaglable", id: "", url: "" }
|
|
labelMesh.rotation.y = ry;
|
|
// labelMesh.rotation.x = rx;
|
|
// labelMesh.rotation.x= rz;
|
|
if (parent) {
|
|
parent.add(labelMesh);
|
|
|
|
} else {
|
|
window.scene.add(labelMesh);
|
|
}
|
|
|
|
}
|
|
function getTextCanvas(text) {
|
|
var width = text.length * 26, height = 22;
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.fillStyle = 'rgba( 233, 233, 233, 0.8 )';// '#CfCfC3';
|
|
ctx.fillRect(0, 0, width, height);
|
|
ctx.font = 14 + 'px " bold ';
|
|
ctx.fillStyle = '#000';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText(text, width / 2, height / 2);
|
|
return canvas;
|
|
}
|
|
//状态标签
|
|
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, item.ry)
|
|
|
|
})
|
|
}
|
|
|
|
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>
|
|
|