<!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="/libs/layui/layui.js"></script>
<script type="importmap">
{
"imports": {
"three": "/libs/build/three.module.js",
"jsm/": "/libs/three/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';
import modellabel from './js/units/modellabel.js'
import css2dlabel from './js/units/css2dlabel.js'
const type = 1;
window.THREE = THREE; // Used by APP Scripts.
window.VRButton = VRButton; // Used by APP Scripts.
//水泵列表
let pumpModelArr = []
console.log('Math.PI=',Math.PI);
var loader = new THREE.FileLoader();
loader.load('zhsc.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();
});
//添加这个就可以用鼠标拖动
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 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.toFixed(2) + ',y:' + obj.point.y.toFixed(2) + ',z:' + obj.point.z.toFixed(2) + ',rx:-180,ry:0,rz:160}');
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 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)
}
//模型标签
const remarkLabArr = [{ name: "水管301", text: "至板式换热器", x: 2.588, y: 0.031, z: -1.6, rx:-180 ,ry: 0 ,rz:160}
, { name: "水管291", text: "水管29", x: 2.33, y: 0.031, z: -1.46, rx: -180, ry: 0, rz: 160 }
,{ name: "水管281", text: "水管28", x: 1.980, y: 0.031, z: -1.46, rx: -180, ry: 0, rz: 160 }
, { name: "水管271", text: "水管27", x: 1.729, y: 0.031, z: -1.46, rx: -180, ry: 0, rz: 160 }
, { name: "水管251", text: "水管25", x: -0.084, y: 0.031, z: -1.46, rx: -180, ry: 0, rz: 160 }
,{ name: "水管221", text: "水管22", x: -0.594, y: 0.031, z: -1.46, rx: -180, ry: 0, rz: 160 }
, { name: "水管211", text: "水管21", x: -1.450, y: 0.031, z: -1.46, rx: -180, ry: 0, rz: 160 }
, { name: "水管61", text: "水管6", x: -2.062, y: 0.031, z: -1.46, rx: -180, ry: 0, rz: 160 }
, { name: "水管51", text: "水管5", x: -2.324, y: 0.031, z: -1.46, rx: -180, ry: 0, rz: 160 }
, { name: "水管41", text: "水管4", x: -2.560, y: 0.031, z: -1.46, rx: -180, ry: 0, rz: 160 }
, { name: "水管31", text: "水管3", x: -2.824, y: 0.031, z: -1.46, rx: -180, ry: 0, rz: 160 }
, { name: "水管21", text: "水管2", x: -3.072, y: 0.031, z: -1.46, rx: -180, ry: 0, rz: 160 }
, { name: "水管11", text: "水管1", x: -3.317, y: 0.031, z: -1.46, rx: -180, ry: 0, rz: 160 }
]
//添加 模型标签
function addRemarkLabels() {
remarkLabArr.forEach((item, index) => {
let labelMesh = modellabel.createRemarkLabel(item.text, item.x, item.y, item.z);
labelMesh.rotation.x = Math.PI*(item.rx/360);
labelMesh.rotation.z = Math.PI * (item.rz/360);
labelMesh.rotation.y= 0;
window.scene.add(labelMesh);
})
}
//红色标签
const labArr = [{ name: "水泵M_1", text: "水泵1" }, { name: "水泵M_2", text: "水泵002" }
, { name: "OilTank001", text: "PT桶1" }, { name: "OilTank002", text: "PT桶2" }, { name: "OilTank003", text: "PT桶3" },
]
//通过 模型名称获取标签名称
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') {
if (!parent.name) {
return;
}
console.log("parent.name2=", parent.name)
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);
}
}
}
//状态标签
async function addStateLabel(parent, x = 0, y = 0, z = 0, className = 'label') {
if (!parent.name) {
return;
}
console.log("parent.name2=", parent.name)
let item = await getlabel(parent.name);
if (item) {
let css2DLabel = css2dlabel.createCSSLabel('●' + item.text, x, y, z, className);
if (parent) {
parent.add(css2DLabel);
} else {
window.scene.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);
}
//测试用
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>