<!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="./build/msg-execute3d.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 0.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 0.5s;
|
animation: spin 2.5s linear infinite;
|
}
|
|
@keyframes spin {
|
0% {
|
--rotate: 0deg;
|
}
|
|
100% {
|
--rotate: 360deg;
|
}
|
}
|
.jindu {
|
position: fixed;
|
left: 46%;
|
bottom: 50%;
|
color: #fff;
|
font-size: 24px;
|
z-index: 3;
|
}
|
</style>
|
|
<body>
|
<div id="view"></div>
|
<div class="jindu" id="jindu"></div>
|
|
<img
|
style="
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100vh;
|
pointer-events: none;
|
"
|
src="./images/allbg.png"
|
alt=""
|
/>
|
</body>
|
<script>
|
var view = new app3d({
|
dom: "view",
|
});
|
|
view.setCallBack({
|
mousedown: mousedown,
|
mouseclick: mouseclick,
|
dblclick: dblclick,
|
progress: progress,
|
});
|
|
let time = null;
|
|
function progress(load, isload) {
|
if (time !== null) {
|
clearTimeout(time);
|
}
|
var jd = "已加载" + parseInt(load) + "%";
|
document.getElementById("jindu").innerHTML = jd;
|
if (load == 100) {
|
setTimeout(function () {
|
document.getElementById("jindu").style.display = "none";
|
}, 1000);
|
}
|
if (isload) {
|
time = setTimeout(() => {
|
console.log("加载完毕");
|
let flag = false;
|
let label1 = view.searchByName("海关指定监管场地");
|
let label2 = view.searchByName("冷链货物集散中心");
|
|
let label3 = view.searchByName("海关监管清关中心");
|
let label4 = view.searchByName("跨境国际货栈");
|
|
let label5 = view.searchByName("快件跨境电商清关中心");
|
let label6 = view.searchByName("分拣中心及出口监管仓");
|
setInterval(() => {
|
label1.visible = flag;
|
label2.visible = !flag;
|
|
label3.visible = flag;
|
label4.visible = !flag;
|
|
label5.visible = flag;
|
label6.visible = !flag;
|
flag = !flag;
|
}, 5000);
|
}, 2000);
|
}
|
}
|
|
function mousedown() {}
|
function mouseclick(model, point) {
|
console.log(point);
|
console.log(view.camInfo());
|
// 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
|
);
|
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/cf.glb",
|
position: [0, 0, 0],
|
name: "模型",
|
scale: [1, 1, 1],
|
rotation: [0, 0, 0],
|
id: 1,
|
|
clickFun: function (data) {},
|
},
|
];
|
|
let gc = {
|
camera: {
|
position: [3851.87308829818, 156.6857523838191, 1434.0796559085607],
|
target: [3814.8022670348832, -20.691148926802672, 997.6256533095633],
|
},
|
light: 1,
|
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.createSkyBox([
|
"https://3d-dddtask-cn.oss-cn-shanghai.aliyuncs.com/engineer-shy/yga/images/cloudEdit/px-1.jpg",
|
"https://3d-dddtask-cn.oss-cn-shanghai.aliyuncs.com/engineer-shy/yga/images/cloudEdit/nx.jpg",
|
"https://3d-dddtask-cn.oss-cn-shanghai.aliyuncs.com/engineer-shy/yga/images/cloudEdit/py-1.jpg",
|
"https://3d-dddtask-cn.oss-cn-shanghai.aliyuncs.com/engineer-shy/yga/images/cloudEdit/ny.jpg",
|
"https://3d-dddtask-cn.oss-cn-shanghai.aliyuncs.com/engineer-shy/yga/images/cloudEdit/pz-1.jpg",
|
"https://3d-dddtask-cn.oss-cn-shanghai.aliyuncs.com/engineer-shy/yga/images/cloudEdit/nz.jpg",
|
]);
|
|
view.setPointLight('white', 1, 0, 0, "guang", {
|
x: 3870.5057746078196, y: 20.306781937337346, z: 946.53641289585
|
})
|
|
const earthMassDiv_2 = document.createElement('div');
|
const img_2 = document.createElement('img');
|
img_2.src = 'https://3d-dddtask-cn.oss-cn-shanghai.aliyuncs.com/engineer-shy/yga/images/wlyLabel/%E7%B2%A4%E6%B8%AF%E6%BE%B3%E7%89%A9%E6%B5%81%E5%9B%AD%E5%A4%A7%E5%B1%8F_17.png'
|
img_2.style.width = '180px'
|
earthMassDiv_2.appendChild(img_2)
|
earthMassDiv_2.className = 'label';
|
view.add2d(earthMassDiv_2, {
|
position: {
|
x: 3922.187402938148,
|
y: 23.16911641039691,
|
z: 1007.7094396132477
|
},
|
name: '海关监管清关中心'
|
})
|
|
const earthMassDiv1 = document.createElement('div');
|
const img1 = document.createElement('img');
|
img1.src = 'https://3d-dddtask-cn.oss-cn-shanghai.aliyuncs.com/engineer-shy/yga/images/wlyLabel/%E7%B2%A4%E6%B8%AF%E6%BE%B3%E7%89%A9%E6%B5%81%E5%9B%AD%E5%A4%A7%E5%B1%8F_26.png'
|
img1.style.width = '200px'
|
earthMassDiv1.appendChild(img1)
|
earthMassDiv1.className = 'label';
|
view.add2d(earthMassDiv1, {
|
position: {
|
x: 3880.0119646511585,
|
y: 17.031239569806495,
|
z: 1093.527309757181
|
},
|
name: '快件跨境电商清关中心'
|
})
|
const earthMassDiv = document.createElement('div');
|
const img = document.createElement('img');
|
img.src = 'https://3d-dddtask-cn.oss-cn-shanghai.aliyuncs.com/engineer-shy/yga/images/wlyLabel/%E7%B2%A4%E6%B8%AF%E6%BE%B3%E7%89%A9%E6%B5%81%E5%9B%AD%E5%A4%A7%E5%B1%8F_23.png'
|
img.style.width = '180px'
|
earthMassDiv.appendChild(img)
|
earthMassDiv.className = 'label';
|
view.add2d(earthMassDiv, {
|
position: {
|
x: 3922.187402938148,
|
y: 23.16911641039691,
|
z: 1007.7094396132477
|
},
|
name: '跨境国际货栈'
|
})
|
|
const earthMassDiv1_2 = document.createElement('div');
|
const img1_2 = document.createElement('img');
|
img1_2.src = 'https://3d-dddtask-cn.oss-cn-shanghai.aliyuncs.com/engineer-shy/yga/images/wlyLabel/%E7%B2%A4%E6%B8%AF%E6%BE%B3%E7%89%A9%E6%B5%81%E5%9B%AD%E5%A4%A7%E5%B1%8F_31.png'
|
img1_2.style.width = '200px'
|
earthMassDiv1_2.appendChild(img1_2)
|
earthMassDiv1_2.className = 'label';
|
view.add2d(earthMassDiv1_2, {
|
position: {
|
x: 3880.0119646511585,
|
y: 17.031239569806495,
|
z: 1093.527309757181
|
},
|
name: '分拣中心及出口监管仓'
|
})
|
|
|
|
|
const earthMassDiv4 = document.createElement('div');
|
const img4 = document.createElement('img');
|
img4.src = 'https://3d-dddtask-cn.oss-cn-shanghai.aliyuncs.com/engineer-shy/yga/images/wlyLabel/%E7%B2%A4%E6%B8%AF%E6%BE%B3%E7%89%A9%E6%B5%81%E5%9B%AD%E5%A4%A7%E5%B1%8F_10.png'
|
img4.style.width = '120px'
|
earthMassDiv4.appendChild(img4)
|
earthMassDiv4.className = 'label';
|
view.add2d(earthMassDiv4, {
|
position: {
|
x: 3719.4146532489967,
|
y: 16.003134886007853,
|
z: 1049.4748267375728
|
},
|
name: '保税仓'
|
})
|
|
|
const earthMassDiv5 = document.createElement('div');
|
const img5 = document.createElement('img');
|
img5.src = 'https://3d-dddtask-cn.oss-cn-shanghai.aliyuncs.com/engineer-shy/yga/images/wlyLabel/%E7%B2%A4%E6%B8%AF%E6%BE%B3%E7%89%A9%E6%B5%81%E5%9B%AD%E5%A4%A7%E5%B1%8F_14.png'
|
img5.style.width = '160px'
|
earthMassDiv5.appendChild(img5)
|
earthMassDiv5.className = 'label';
|
view.add2d(earthMassDiv5, {
|
position: {
|
x: 3725.5478407373225,
|
y: 54.10012092905302,
|
z: 1140.3575138962758
|
},
|
name: '综合办公楼'
|
})
|
|
|
const earthMassDiv6 = document.createElement('div');
|
const img6 = document.createElement('img');
|
img6.src = 'https://3d-dddtask-cn.oss-cn-shanghai.aliyuncs.com/engineer-shy/yga/images/wlyLabel/%E7%B2%A4%E6%B8%AF%E6%BE%B3%E7%89%A9%E6%B5%81%E5%9B%AD%E5%A4%A7%E5%B1%8F_07.png'
|
img6.style.width = '180px'
|
earthMassDiv6.appendChild(img6)
|
earthMassDiv6.className = 'label';
|
view.add2d(earthMassDiv6, {
|
position: {
|
x: 3949.7234546852687,
|
y: 23.16911641039691,
|
z: 895.5839822481355
|
},
|
name: '海关指定监管场地'
|
})
|
|
|
const earthMassDiv2 = document.createElement('div');
|
const img2 = document.createElement('img');
|
img2.src = 'https://3d-dddtask-cn.oss-cn-shanghai.aliyuncs.com/engineer-shy/yga/images/wlyLabel/%E7%B2%A4%E6%B8%AF%E6%BE%B3%E7%89%A9%E6%B5%81%E5%9B%AD%E5%A4%A7%E5%B1%8F_03.png'
|
img2.style.width = '180px'
|
earthMassDiv2.appendChild(img2)
|
earthMassDiv2.className = 'label';
|
view.add2d(earthMassDiv2, {
|
position: {
|
x: 3949.7234546852687,
|
y: 23.16911641039691,
|
z: 895.5839822481355
|
},
|
name: '冷链货物集散中心'
|
})
|
|
</script>
|
</html>
|
