<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>Document</title>
|
|
<script src="./build/view3D.js"></script>
|
<script src="js/jquery-1.8.3.min.js"></script>
|
|
|
</head>
|
<style>
|
html,
|
body {
|
height: 100%;
|
width: 100%;
|
/* background-color: pink; */
|
margin: 0px;
|
}
|
|
#view {
|
width: 100%;
|
height: 100%;
|
}
|
|
.btn {
|
position: fixed;
|
left: 10px;
|
top: 10px;
|
z-index: 999;
|
}
|
|
|
|
:root {
|
--card-height: 100px;
|
--card-width: calc(50px / 1.5);
|
}
|
|
.label {
|
position: relative;
|
}
|
|
.textContent {
|
position: absolute;
|
left: 46px;
|
top: 11px;
|
color: #fff;
|
font-weight: 500;
|
font-size: 14px;
|
}
|
|
|
.card {
|
background: #191c29;
|
width: 50px;
|
height: 25px;
|
padding: 3px;
|
position: relative;
|
border-radius: 6px;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
display: flex;
|
font-size: 1.5em;
|
color: rgb(88 199 250 / 0%);
|
cursor: pointer;
|
font-family: cursive;
|
}
|
|
.card:hover {
|
color: rgb(88 199 250 / 100%);
|
transition: color 1s;
|
}
|
|
.card:hover:before,
|
.card:hover:after {
|
animation: none;
|
opacity: 0;
|
}
|
|
|
.card::before {
|
content: "";
|
width: 104%;
|
height: 102%;
|
border-radius: 8px;
|
background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
|
position: absolute;
|
z-index: -1;
|
top: -1%;
|
left: -2%;
|
animation: spin 2.5s linear infinite;
|
}
|
|
.card::after {
|
position: absolute;
|
content: "";
|
top: calc(var(--card-height) / 6);
|
left: 0;
|
right: 0;
|
z-index: -1;
|
height: 100%;
|
width: 100%;
|
margin: 0 auto;
|
transform: scale(0.8);
|
filter: blur(calc(var(--card-height) / 6));
|
background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
|
opacity: 1;
|
transition: opacity .5s;
|
animation: spin 2.5s linear infinite;
|
}
|
|
.warningCard {
|
background: #191c29;
|
width: 50px;
|
height: 25px;
|
padding: 3px;
|
position: relative;
|
border-radius: 6px;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
display: flex;
|
font-size: 1.5em;
|
color: rgb(88 199 250 / 0%);
|
cursor: pointer;
|
font-family: cursive;
|
}
|
|
.warningCard:hover {
|
color: rgb(255, 0, 0);
|
transition: color 1s;
|
}
|
|
.warningCard:hover:before,
|
.warningCard:hover:after {
|
animation: none;
|
opacity: 0;
|
}
|
|
|
.warningCard::before {
|
content: "";
|
width: 104%;
|
height: 102%;
|
border-radius: 8px;
|
background-image: linear-gradient(var(--rotate), #ff0000, #ff0000 43%, #ff9109);
|
position: absolute;
|
z-index: -1;
|
top: -1%;
|
left: -2%;
|
animation: spin 2.5s linear infinite;
|
}
|
|
.warningCard::after {
|
position: absolute;
|
content: "";
|
top: calc(var(--card-height) / 6);
|
left: 0;
|
right: 0;
|
z-index: -1;
|
height: 100%;
|
width: 100%;
|
margin: 0 auto;
|
transform: scale(0.8);
|
filter: blur(calc(var(--card-height) / 6));
|
opacity: 1;
|
transition: opacity .5s;
|
animation: spin 2.5s linear infinite;
|
}
|
|
@keyframes spin {
|
0% {
|
--rotate: 0deg;
|
}
|
|
100% {
|
--rotate: 360deg;
|
}
|
}
|
</style>
|
|
<body>
|
<div id="view">
|
<button class="btn" id="opa">透明模式</button>
|
<button class="btn" style="left:82px" class="move" id="move">电梯移动</button>
|
</div>
|
</body>
|
<script>
|
var view = new app3d({
|
dom: 'view',
|
})
|
|
view.setCallBack({
|
mousedown: mousedown,
|
mouseclick: mouseclick,
|
dblclick: dblclick,
|
progress: progress,
|
aniCallBack: aniCallBack,
|
inFence: function (arr) {
|
let arr1 = document.getElementsByClassName('warningCard')
|
for (let index = 0; index < arr1.length; index++) {
|
arr1[index].className = 'card'
|
}
|
arr.forEach(element => {
|
element.info.popup.element.className = 'warningCard'
|
});
|
}
|
})
|
|
let time = null
|
function aniCallBack() {
|
if (fsModel) {
|
fsModel.rotation.y += 1
|
}
|
}
|
var fsModel = null
|
function progress(load, isload) {
|
if (time !== null) {
|
clearTimeout(time);
|
}
|
if (isload) {
|
time = setTimeout(() => {
|
console.log('加载完毕');
|
fsModel = view.searchById(3)
|
window.animatinon = view.registerAnimation(5, 5)
|
let option = {
|
diraction: true,
|
texture: './images/tubeBg1.png',
|
flow: true,
|
repeat: [30, 1],
|
points: [
|
181.35291724951162, -5.209926509857171, -64.99945371014326,
|
188.21755216903637, -5.209926509857178, -65.51932105888656,
|
188.15438916636595, -5.209926509857178, -76.01874373473223,
|
179.71323338826159, -5.209926509857171, -72.8017977796923,
|
]
|
}
|
let option1 = {
|
diraction: true,
|
texture: './images/tubeBg2.png',
|
flow: true,
|
repeat: [30, 2],
|
points: [
|
181.62186052374608, -5.209926509857171, -58.751494932079396,
|
182.08604513207473, -5.209926509857178, -49.54777576164511,
|
189.05146791649872, -5.209926509857178, -50.91798873030163,
|
187.9375880599539, -5.209926509857171, -58.94967666387828,
|
]
|
}
|
view.addPCylinObj(option)
|
view.addPCylinObj(option1)
|
// draw.addFence([
|
// [181.35291724951162, -5.209926509857171, -64.99945371014326],
|
// [188.21755216903637, -5.209926509857178, -65.51932105888656],
|
// [188.15438916636595, -5.209926509857178, -76.01874373473223],
|
// [179.71323338826159, -5.209926509857171, -72.8017977796923],
|
// ], 1, 'test')
|
// draw.addFence([
|
// [181.62186052374608, -5.209926509857171, -58.751494932079396],
|
// [182.08604513207473, -5.209926509857178, -49.54777576164511],
|
// [189.05146791649872, -5.209926509857178, -50.91798873030163],
|
// [187.9375880599539, -5.209926509857171, -58.94967666387828],
|
// ], 2, 'test2')
|
}, 2000)
|
}
|
|
|
}
|
|
function mousedown() {
|
}
|
function mouseclick(model, point) {
|
|
// animatinon.play()
|
// view.updateWalking(2, [point.x, point.y, point.z], 180, function () {
|
// animatinon.stop()
|
// })
|
}
|
function dblclick(model) {
|
console.log('dblclick');
|
}
|
|
|
// 注册消息事件监听，接受子元素给的数据
|
window.addEventListener(
|
"message",
|
(e) => {
|
let data = e.data;
|
if (data.type == 'startDraw') {
|
view.startDraw();
|
|
|
} else if (data.type == 'endDraw') {
|
view.endDraw()
|
}
|
},
|
false
|
);
|
var draw = new Draw(view, '#E6397D', '#FC7A4E')
|
// draw.addFence()
|
var flag = false
|
document.getElementById('opa').addEventListener('click', opa)
|
document.getElementById('move').addEventListener('click', move)
|
function opa(e) {
|
e.stopPropagation();
|
view.setLayer(['wall_bd_1_lanse', 'wall_bd_1_lanse_side1', 'road1', 'tree', 'wall_group12', 'grass3', 'hp_1_b1_dianti_01'])
|
view.setOpa({ opa: 0.1, names: ['blue_wall1', 'blue_wall2', 'blue_wall3', 'blue_wall4', 'blue_wall5', 'wall_bd_1_lanse_side1', 'road1', 'tree', 'wall_group12', 'grass3'] })
|
view.setOpa({ color: [255, 0, 0], opa: 1, names: ['hp_1_b1_dianti_01'] })
|
}
|
function changePos(e) {
|
e.stopPropagation();
|
view.searchById(5).position.set(162.10957865084396, -5.30987548828125, -64.54143346434896)
|
}
|
function move(e) {
|
e.stopPropagation();
|
let model = view.searchByName('hp_1_b1_dianti_01')
|
view.updateWalkingName('hp_1_b1_dianti_01', [model.position.x, 10, model.position.z])
|
}
|
function resVisible(e) {
|
e.stopPropagation();
|
view.resetLayer()
|
}
|
function resCamera(e) {
|
e.stopPropagation();
|
view.resetCamera()
|
}
|
function startDraw(e) {
|
e.stopPropagation();
|
if (flag) {
|
flag = !flag
|
let layer = draw.end()
|
if (!layer) return
|
console.log(layer.points);
|
draw.pointsDraw(layer.points)
|
// view.scene.add(layer.layer)
|
window.parent.postMessage(layer.points, "*")
|
|
|
} else {
|
flag = !flag
|
draw.start()
|
|
}
|
}
|
let dom1 = document.createElement('div');
|
const fs1 = document.createElement('img');
|
fs1.src = './images/fsRun.png'
|
fs1.style.width = '60px'
|
dom1.appendChild(fs1)
|
|
let dom2 = document.createElement('div');
|
const fs2 = document.createElement('img');
|
fs2.src = './images/fsWar.png'
|
fs2.style.width = '60px'
|
dom2.appendChild(fs2)
|
//参数说明: 半径大小缩小
|
let cityels = [
|
{
|
path: "./model/230519yiyuan.glb",
|
position: [
|
0, 0, 0,
|
],
|
name: '模型',
|
scale: [1, 1, 1],
|
rotation: [0, 0, 0],
|
id: 1,
|
|
clickFun: function (data) {
|
|
}
|
},
|
{
|
path: "./model/che.glb",
|
position: [
|
160.54638822009247, -5.30987548828125, -84.11608120947162,
|
],
|
name: '叉车',
|
scale: [1, 1, 1],
|
rotation: [0, 0, 0],
|
id: 2,
|
|
clickFun: function (data) {
|
console.log(data);
|
}
|
},
|
{
|
path: "./model/model.glb",
|
position: [183.88432182663087, -5.309926509857171, -86.47236503218977],
|
name: '风扇',
|
popup: {
|
dom: dom1,
|
offset: {
|
x: 0,
|
y: 0.03,
|
z: 0
|
}
|
|
},
|
scale: [300, 300, 300],
|
id: 3,
|
clickFun: function (data) {
|
console.log(data);
|
}
|
},
|
{
|
path: "./model/model.glb",
|
position: [182.66833259893554, -5.309926509857171, -95.90732832950947],
|
name: '风扇',
|
popup: {
|
dom: dom2,
|
offset: {
|
x: 0,
|
y: 0.03,
|
z: 0
|
}
|
|
},
|
scale: [300, 300, 300],
|
id: 4,
|
clickFun: function (data) {
|
console.log(data);
|
}
|
}
|
];
|
let gc = {
|
camera: {
|
position: [-1.133761626244529, 0.7193054903589561, 0.6298183991430653],
|
target: [-0.13851813609574537, -0.08153075725092743, -0.17883584430918914],
|
},
|
light: 1.5,
|
css2d: {
|
use: true,
|
},
|
d: {
|
fsc: 4,
|
position: [0, 0, 0],
|
r: 10,
|
angle: [Math.PI / 2, 0, 0],
|
ddpos: [0, 0, 0],
|
//尺寸
|
scl: [1, 1, 1],
|
|
},
|
c: cityels,
|
};
|
|
view.i(gc)
|
|
view.addModel({
|
path: "./model/gongrenwalk1.glb",
|
position: [
|
160.83684262596677, -5.30987548828125, -78.90843487277095],
|
scale: [1, 1, 1],
|
id: 5,
|
floorNum: 2,
|
name: '人员1',
|
})
|
|
|
view.createSkyBox([
|
'/images/cloudEdit/px-1.jpg',
|
'/images/cloudEdit/nx.jpg',
|
'/images/cloudEdit/py-1.jpg',
|
'/images/cloudEdit/ny.jpg',
|
'/images/cloudEdit/pz-1.jpg',
|
'/images/cloudEdit/nz.jpg',
|
])
|
const earthMassDiv = document.createElement('div');
|
const img = document.createElement('img');
|
img.src = './images/ly3q.png'
|
img.style.width = '130px'
|
earthMassDiv.appendChild(img)
|
earthMassDiv.className = 'label';
|
view.add2d(earthMassDiv, {
|
position: {
|
x: -51.65091608489678,
|
y: 20.914078712463379,
|
z: -17.36236970042279
|
},
|
name: '隆尧3期'
|
})
|
const earthMassDiv1 = document.createElement('div');
|
const img1 = document.createElement('img');
|
img1.src = './images/ly3c.png'
|
img1.style.width = '130px'
|
earthMassDiv1.appendChild(img1)
|
earthMassDiv1.className = 'label';
|
view.add2d(earthMassDiv1, {
|
position: {
|
x: -80.00142404703998,
|
y: 20.914078712463379,
|
z: 132.55458742207074
|
},
|
name: '隆尧3.0仓库'
|
})
|
const earthMassDiv2 = document.createElement('div');
|
const img2 = document.createElement('img');
|
img2.src = './images/ly1q.png'
|
img2.style.width = '130px'
|
earthMassDiv2.appendChild(img2)
|
earthMassDiv2.className = 'label';
|
view.add2d(earthMassDiv2, {
|
position: {
|
x: -4.423821949681212,
|
y: 20.914078712463379,
|
z: 249.43686479249425
|
},
|
name: '隆尧1期'
|
})
|
const earthMassDiv4 = document.createElement('div');
|
const img4 = document.createElement('img');
|
img4.src = './images/ly2q.png'
|
img4.style.width = '140px'
|
earthMassDiv4.appendChild(img4)
|
earthMassDiv4.className = 'label';
|
view.add2d(earthMassDiv4, {
|
position: {
|
x: -164.3848212721132,
|
y: 20.914078712463379,
|
z: -151.4191235508072
|
},
|
name: '隆尧2期'
|
})
|
|
|
|
</script>
|
|
</html>
|
