|
|
|
|
@ -1,397 +1,424 @@
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
|
<head>
|
|
|
|
|
<th:block th:include="include :: header('模型')"/>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js">
|
|
|
|
|
</script>
|
|
|
|
|
<th:block th:include="include :: header('模型')"/>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js">
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<style>
|
|
|
|
|
body::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
body::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bg {
|
|
|
|
|
width: 100vw;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
background-image: url("/img/model/bg.jpg");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
.bg {
|
|
|
|
|
width: 100vw;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
background-image: url("/img/model/bg.jpg");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#three canvas {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
#three canvas {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.btn1 {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.btn1 {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btns {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 25%;
|
|
|
|
|
width: 48vw;
|
|
|
|
|
height: 3.3vw;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
.btns {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 25%;
|
|
|
|
|
width: 48vw;
|
|
|
|
|
height: 3.3vw;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btns::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.btns::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottomBtn {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 9.5vw;
|
|
|
|
|
height: 3vw;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 3vw;
|
|
|
|
|
font-size: 1.03vw;
|
|
|
|
|
letter-spacing: 0.1vw;
|
|
|
|
|
color: #fff9;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.bottomBtn {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 9.5vw;
|
|
|
|
|
height: 3vw;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 3vw;
|
|
|
|
|
font-size: 1.03vw;
|
|
|
|
|
letter-spacing: 0.1vw;
|
|
|
|
|
color: #fff9;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.qy {
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
top: 50%;
|
|
|
|
|
width: 1vw;
|
|
|
|
|
height: 0.5vw;
|
|
|
|
|
background-image: url("/img/model/zs1.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
.qy {
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
top: 50%;
|
|
|
|
|
width: 1vw;
|
|
|
|
|
height: 0.5vw;
|
|
|
|
|
background-image: url("/img/model/zs1.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qyL {
|
|
|
|
|
left: 12%;
|
|
|
|
|
}
|
|
|
|
|
.qyL {
|
|
|
|
|
left: 12%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qyR {
|
|
|
|
|
transform: translate(-50%, -50%) scale(-1);
|
|
|
|
|
right: calc(12% - 0.5vw);
|
|
|
|
|
}
|
|
|
|
|
.qyR {
|
|
|
|
|
transform: translate(-50%, -50%) scale(-1);
|
|
|
|
|
right: calc(12% - 0.5vw);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qyBottom {
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: none;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
bottom: 5%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 7.5vw;
|
|
|
|
|
height: 0.21vw;
|
|
|
|
|
background-image: url("/img/model/zs3.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
.qyBottom {
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: none;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
bottom: 5%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 7.5vw;
|
|
|
|
|
height: 0.21vw;
|
|
|
|
|
background-image: url("/img/model/zs3.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.threeLabelContent {
|
|
|
|
|
.threeLabelContent, .threeLabelContent1 {
|
|
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
|
/*width: 200px;*/
|
|
|
|
|
height: auto;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background-color: rgba(23, 48, 97, 0.8);
|
|
|
|
|
border: 2px #fff3 solid;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
overflow: auto;
|
|
|
|
|
max-height: 90vh;
|
|
|
|
|
}
|
|
|
|
|
display: none;
|
|
|
|
|
/*width: 200px;*/
|
|
|
|
|
height: auto;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background-color: rgba(23, 48, 97, 0.8);
|
|
|
|
|
border: 2px #fff3 solid;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
overflow: auto;
|
|
|
|
|
max-height: 90vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.threeLabelContent1 {
|
|
|
|
|
left: 0;
|
|
|
|
|
right: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.threeLabelContent:before {
|
|
|
|
|
/*content: '';*/
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 100%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
border-left: 5px solid transparent;
|
|
|
|
|
border-right: 5px solid transparent;
|
|
|
|
|
border-top: 10px solid rgba(23, 48, 97, 0.8);
|
|
|
|
|
}
|
|
|
|
|
.threeLabelContent:before, .threeLabelContent1:before {
|
|
|
|
|
/*content: '';*/
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 100%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
border-left: 5px solid transparent;
|
|
|
|
|
border-right: 5px solid transparent;
|
|
|
|
|
border-top: 10px solid rgba(23, 48, 97, 0.8);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sign {
|
|
|
|
|
}
|
|
|
|
|
.sign .content{
|
|
|
|
|
background-image: url("/img/model/sign.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
width: 5vw;
|
|
|
|
|
height: 6.42vw;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.sign {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sign .content .title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 15%;
|
|
|
|
|
font-size: 0.6vw;
|
|
|
|
|
color: #fff;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
}
|
|
|
|
|
.pageTitle{
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
top: 4%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
font-size: 2vw;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.rightTH{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 33%;
|
|
|
|
|
}
|
|
|
|
|
.rightTable{
|
|
|
|
|
width: 20vw;
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: 0;
|
|
|
|
|
background-color: rgba(23, 48, 97);
|
|
|
|
|
}
|
|
|
|
|
.sign .content {
|
|
|
|
|
background-image: url("/img/model/sign.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
width: 5vw;
|
|
|
|
|
height: 6.42vw;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sign .content .title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 15%;
|
|
|
|
|
font-size: 0.6vw;
|
|
|
|
|
color: #fff;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pageTitle {
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
top: 4%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
font-size: 2vw;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rightTH {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 33%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rightTH1 {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 16.66%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rightTable {
|
|
|
|
|
width: 20vw;
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: 0;
|
|
|
|
|
background-color: rgba(23, 48, 97);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rightTable1 {
|
|
|
|
|
width: 30vw;
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: 0;
|
|
|
|
|
background-color: rgba(23, 48, 97);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<body class="gray-bg">
|
|
|
|
|
<!-- 29.4 39.8 50.1 59.6 68.8 -->
|
|
|
|
|
<div>
|
|
|
|
|
<div class="bg"></div>
|
|
|
|
|
<div class="pageTitle">机场轮档平台</div>
|
|
|
|
|
<div id="three" style="width: 100vw;height: 82vh;position:absolute;top: 9%;left: 0;"></div>
|
|
|
|
|
<div class="btns" id="btns">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="threeLabel" id="threeLabel">
|
|
|
|
|
<div class="threeLabelContent" id="threeLabelContent"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sign" id="sign1">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">1号试车坪</span>
|
|
|
|
|
<div class="bg"></div>
|
|
|
|
|
<div class="pageTitle">机场轮档平台</div>
|
|
|
|
|
<div id="three" style="width: 100vw;height: 82vh;position:absolute;top: 9%;left: 0;"></div>
|
|
|
|
|
<div class="btns" id="btns">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sign" id="sign2">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">2号口</span>
|
|
|
|
|
<div class="threeLabel" id="threeLabel">
|
|
|
|
|
<div class="threeLabelContent" id="threeLabelContent"></div>
|
|
|
|
|
<div class="threeLabelContent1" id="threeLabelContent1"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sign" id="sign3">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">3号口</span>
|
|
|
|
|
<div class="sign" id="sign1">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">1号试车坪</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sign" id="sign4">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">4号口</span>
|
|
|
|
|
<div class="sign" id="sign2">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">2号口</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sign" id="sign5">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">3号试车坪</span>
|
|
|
|
|
<div class="sign" id="sign3">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">3号口</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sign" id="sign6">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">3号坪</span>
|
|
|
|
|
<div class="sign" id="sign4">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">4号口</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sign" id="sign7">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">2号除冰坪</span>
|
|
|
|
|
<div class="sign" id="sign5">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">3号试车坪</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sign" id="sign8">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">4号除冰坪</span>
|
|
|
|
|
<div class="sign" id="sign6">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">3号坪</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sign" id="sign9">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">轮挡仓库</span>
|
|
|
|
|
<div class="sign" id="sign7">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">2号除冰坪</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sign" id="sign8">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">4号除冰坪</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sign" id="sign9">
|
|
|
|
|
<div class="content">
|
|
|
|
|
<span class="title">轮挡仓库</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<th:block th:include="include :: footer"/>
|
|
|
|
|
<script>
|
|
|
|
|
let scene = null
|
|
|
|
|
let controls = null
|
|
|
|
|
let camera = null
|
|
|
|
|
let tween = null
|
|
|
|
|
let scene = null
|
|
|
|
|
let controls = null
|
|
|
|
|
let camera = null
|
|
|
|
|
let tween = null
|
|
|
|
|
</script>
|
|
|
|
|
<script name="module1" type="module">
|
|
|
|
|
import * as TWEEN from '/js/tween.js'
|
|
|
|
|
import {OrbitControls} from '/js/three/examples/jsm/controls/OrbitControls.js'
|
|
|
|
|
import {MTLLoader} from '/js/three/examples/jsm/loaders/MTLLoader.js'
|
|
|
|
|
import {OBJLoader} from '/js/three/examples/jsm/loaders/OBJLoader.js'
|
|
|
|
|
import * as THREE from '/js/three/build/three.module.min.js'
|
|
|
|
|
import {CSS2DObject, CSS2DRenderer} from '/js/three/examples/jsm/renderers/CSS2DRenderer.js'
|
|
|
|
|
import * as TWEEN from '/js/tween.js'
|
|
|
|
|
import {OrbitControls} from '/js/three/examples/jsm/controls/OrbitControls.js'
|
|
|
|
|
import {MTLLoader} from '/js/three/examples/jsm/loaders/MTLLoader.js'
|
|
|
|
|
import {OBJLoader} from '/js/three/examples/jsm/loaders/OBJLoader.js'
|
|
|
|
|
import * as THREE from '/js/three/build/three.module.min.js'
|
|
|
|
|
import {CSS2DObject, CSS2DRenderer} from '/js/three/examples/jsm/renderers/CSS2DRenderer.js'
|
|
|
|
|
|
|
|
|
|
tween = TWEEN
|
|
|
|
|
scene = new THREE.Scene()
|
|
|
|
|
// scene.background = new THREE.Color(0x000000,0)
|
|
|
|
|
camera = new THREE.PerspectiveCamera(75, window.innerWidth / (window.innerHeight), 0.1, 100000);
|
|
|
|
|
const pointLight = new THREE.PointLight(0xffffff, 10) //光源颜色 光照强度
|
|
|
|
|
const ambient = new THREE.AmbientLight(0xffffff, 2)
|
|
|
|
|
const light = new THREE.DirectionalLight(0xffffff, 1)
|
|
|
|
|
const labelRenderer = new CSS2DRenderer()
|
|
|
|
|
const renderer = new THREE.WebGLRenderer({
|
|
|
|
|
antialias: true,
|
|
|
|
|
alpha: true,
|
|
|
|
|
logarithmicDepthBuffer: true,
|
|
|
|
|
})
|
|
|
|
|
renderer.setClearColor(0x000000, 0)
|
|
|
|
|
controls = new OrbitControls(camera, renderer.domElement)
|
|
|
|
|
renderer.setSize(window.innerWidth, window.innerHeight * 0.82)
|
|
|
|
|
tween = TWEEN
|
|
|
|
|
scene = new THREE.Scene()
|
|
|
|
|
// scene.background = new THREE.Color(0x000000,0)
|
|
|
|
|
camera = new THREE.PerspectiveCamera(75, window.innerWidth / (window.innerHeight), 0.1, 100000);
|
|
|
|
|
const pointLight = new THREE.PointLight(0xffffff, 10) //光源颜色 光照强度
|
|
|
|
|
const ambient = new THREE.AmbientLight(0xffffff, 2)
|
|
|
|
|
const light = new THREE.DirectionalLight(0xffffff, 1)
|
|
|
|
|
const labelRenderer = new CSS2DRenderer()
|
|
|
|
|
const renderer = new THREE.WebGLRenderer({
|
|
|
|
|
antialias: true,
|
|
|
|
|
alpha: true,
|
|
|
|
|
logarithmicDepthBuffer: true,
|
|
|
|
|
})
|
|
|
|
|
renderer.setClearColor(0x000000, 0)
|
|
|
|
|
controls = new OrbitControls(camera, renderer.domElement)
|
|
|
|
|
renderer.setSize(window.innerWidth, window.innerHeight * 0.82)
|
|
|
|
|
|
|
|
|
|
camera.position.set(-363, 3719, 585)
|
|
|
|
|
camera.rotation.x = -1.57
|
|
|
|
|
camera.rotation.y = 0
|
|
|
|
|
camera.rotation.z = 0
|
|
|
|
|
camera.position.set(-363, 3719, 585)
|
|
|
|
|
camera.rotation.x = -1.57
|
|
|
|
|
camera.rotation.y = 0
|
|
|
|
|
camera.rotation.z = 0
|
|
|
|
|
|
|
|
|
|
camera.updateProjectionMatrix()
|
|
|
|
|
controls.target = new THREE.Vector3(-363, 612, 585)
|
|
|
|
|
controls.update()
|
|
|
|
|
// scene.add(pointLight)
|
|
|
|
|
scene.add(ambient)
|
|
|
|
|
light.position.set(-250, 872, 1814)
|
|
|
|
|
light.target.position.set(-1218, 2326, 3986)
|
|
|
|
|
// scene.add(light)
|
|
|
|
|
console.log(renderer)
|
|
|
|
|
document.getElementById('three').appendChild(renderer.domElement)
|
|
|
|
|
labelRenderer.setSize(window.innerWidth, window.innerHeight)
|
|
|
|
|
labelRenderer.domElement.style.position = 'absolute'
|
|
|
|
|
labelRenderer.domElement.style.top = '0'
|
|
|
|
|
labelRenderer.domElement.style.pointerEvents = 'none'
|
|
|
|
|
document.body.appendChild(labelRenderer.domElement)
|
|
|
|
|
camera.updateProjectionMatrix()
|
|
|
|
|
controls.target = new THREE.Vector3(-363, 612, 585)
|
|
|
|
|
controls.update()
|
|
|
|
|
// scene.add(pointLight)
|
|
|
|
|
scene.add(ambient)
|
|
|
|
|
light.position.set(-250, 872, 1814)
|
|
|
|
|
light.target.position.set(-1218, 2326, 3986)
|
|
|
|
|
// scene.add(light)
|
|
|
|
|
console.log(renderer)
|
|
|
|
|
document.getElementById('three').appendChild(renderer.domElement)
|
|
|
|
|
labelRenderer.setSize(window.innerWidth, window.innerHeight)
|
|
|
|
|
labelRenderer.domElement.style.position = 'absolute'
|
|
|
|
|
labelRenderer.domElement.style.top = '0'
|
|
|
|
|
labelRenderer.domElement.style.pointerEvents = 'none'
|
|
|
|
|
document.body.appendChild(labelRenderer.domElement)
|
|
|
|
|
|
|
|
|
|
let sign1 = new CSS2DObject(document.getElementById('sign1'))
|
|
|
|
|
let sign2 = new CSS2DObject(document.getElementById('sign2'))
|
|
|
|
|
let sign3 = new CSS2DObject(document.getElementById('sign3'))
|
|
|
|
|
let sign4 = new CSS2DObject(document.getElementById('sign4'))
|
|
|
|
|
let sign5 = new CSS2DObject(document.getElementById('sign5'))
|
|
|
|
|
let sign6 = new CSS2DObject(document.getElementById('sign6'))
|
|
|
|
|
let sign7 = new CSS2DObject(document.getElementById('sign7'))
|
|
|
|
|
let sign8 = new CSS2DObject(document.getElementById('sign8'))
|
|
|
|
|
let sign9 = new CSS2DObject(document.getElementById('sign9'))
|
|
|
|
|
sign1.position.set(-3008, -0.131, -908)
|
|
|
|
|
sign2.position.set(-1462, -0.131, -809)
|
|
|
|
|
sign3.position.set(-1757, -0.11, -1312)
|
|
|
|
|
sign4.position.set(1320, -0 / 131, -1014)
|
|
|
|
|
sign5.position.set(829, -0.51, 128)
|
|
|
|
|
sign6.position.set(-704, -0.131, 1140)
|
|
|
|
|
sign7.position.set(-1232, -0.109, 1724)
|
|
|
|
|
sign8.position.set(-1102, -0.131, 1861)
|
|
|
|
|
sign9.position.set(1308, -2.7, 1974)
|
|
|
|
|
scene.add(sign1)
|
|
|
|
|
scene.add(sign2)
|
|
|
|
|
scene.add(sign3)
|
|
|
|
|
scene.add(sign4)
|
|
|
|
|
scene.add(sign5)
|
|
|
|
|
scene.add(sign6)
|
|
|
|
|
scene.add(sign7)
|
|
|
|
|
scene.add(sign8)
|
|
|
|
|
scene.add(sign9)
|
|
|
|
|
let sign1 = new CSS2DObject(document.getElementById('sign1'))
|
|
|
|
|
let sign2 = new CSS2DObject(document.getElementById('sign2'))
|
|
|
|
|
let sign3 = new CSS2DObject(document.getElementById('sign3'))
|
|
|
|
|
let sign4 = new CSS2DObject(document.getElementById('sign4'))
|
|
|
|
|
let sign5 = new CSS2DObject(document.getElementById('sign5'))
|
|
|
|
|
let sign6 = new CSS2DObject(document.getElementById('sign6'))
|
|
|
|
|
let sign7 = new CSS2DObject(document.getElementById('sign7'))
|
|
|
|
|
let sign8 = new CSS2DObject(document.getElementById('sign8'))
|
|
|
|
|
let sign9 = new CSS2DObject(document.getElementById('sign9'))
|
|
|
|
|
sign1.position.set(-3008, -0.131, -908)
|
|
|
|
|
sign2.position.set(-1462, -0.131, -809)
|
|
|
|
|
sign3.position.set(-1757, -0.11, -1312)
|
|
|
|
|
sign4.position.set(1320, -0 / 131, -1014)
|
|
|
|
|
sign5.position.set(829, -0.51, 128)
|
|
|
|
|
sign6.position.set(-704, -0.131, 1140)
|
|
|
|
|
sign7.position.set(-1232, -0.109, 1724)
|
|
|
|
|
sign8.position.set(-1102, -0.131, 1861)
|
|
|
|
|
sign9.position.set(1308, -2.7, 1974)
|
|
|
|
|
scene.add(sign1)
|
|
|
|
|
scene.add(sign2)
|
|
|
|
|
scene.add(sign3)
|
|
|
|
|
scene.add(sign4)
|
|
|
|
|
scene.add(sign5)
|
|
|
|
|
scene.add(sign6)
|
|
|
|
|
scene.add(sign7)
|
|
|
|
|
scene.add(sign8)
|
|
|
|
|
scene.add(sign9)
|
|
|
|
|
|
|
|
|
|
const geometry = new THREE.BoxGeometry(1, 1, 1);
|
|
|
|
|
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
|
|
|
|
|
const cube = new THREE.Mesh(geometry, material);
|
|
|
|
|
scene.add(cube);
|
|
|
|
|
const geometry = new THREE.BoxGeometry(1, 1, 1);
|
|
|
|
|
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
|
|
|
|
|
const cube = new THREE.Mesh(geometry, material);
|
|
|
|
|
scene.add(cube);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function animate() {
|
|
|
|
|
requestAnimationFrame(animate)
|
|
|
|
|
renderer.render(scene, camera)
|
|
|
|
|
labelRenderer.render(scene, camera)
|
|
|
|
|
tween.update()
|
|
|
|
|
// console.log(camera)
|
|
|
|
|
// console.log(controls)
|
|
|
|
|
}
|
|
|
|
|
function animate() {
|
|
|
|
|
requestAnimationFrame(animate)
|
|
|
|
|
renderer.render(scene, camera)
|
|
|
|
|
labelRenderer.render(scene, camera)
|
|
|
|
|
tween.update()
|
|
|
|
|
// console.log(camera)
|
|
|
|
|
// console.log(controls)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
animate()
|
|
|
|
|
animate()
|
|
|
|
|
|
|
|
|
|
let mtlLoader = new MTLLoader()
|
|
|
|
|
mtlLoader.load(`https://ysg-1308998881.cos.ap-nanjing.myqcloud.com/daxingjichang/daxingjichang1/daxingjichang.mtl`,
|
|
|
|
|
materials => {
|
|
|
|
|
let mtlLoader = new MTLLoader()
|
|
|
|
|
mtlLoader.load(`https://ysg-1308998881.cos.ap-nanjing.myqcloud.com/daxingjichang/daxingjichang1/daxingjichang.mtl`,
|
|
|
|
|
materials => {
|
|
|
|
|
materials.preload()
|
|
|
|
|
let loader = new OBJLoader()
|
|
|
|
|
loader.setMaterials(materials)
|
|
|
|
|
loader.load(
|
|
|
|
|
`https://ysg-1308998881.cos.ap-nanjing.myqcloud.com/daxingjichang/daxingjichang1/daxingjichang.obj`,
|
|
|
|
|
object => {
|
|
|
|
|
scene.add(object)
|
|
|
|
|
// 更新渲染器
|
|
|
|
|
renderer.render(scene, camera)
|
|
|
|
|
},
|
|
|
|
|
xhr => {
|
|
|
|
|
`https://ysg-1308998881.cos.ap-nanjing.myqcloud.com/daxingjichang/daxingjichang1/daxingjichang.obj`,
|
|
|
|
|
object => {
|
|
|
|
|
scene.add(object)
|
|
|
|
|
// 更新渲染器
|
|
|
|
|
renderer.render(scene, camera)
|
|
|
|
|
},
|
|
|
|
|
xhr => {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
(err) => {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
(err) => {
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let mouse = new THREE.Vector2()
|
|
|
|
|
let raycaster = new THREE.Raycaster()
|
|
|
|
|
document.addEventListener('dblclick', function (event) {
|
|
|
|
|
// 将鼠标位置转换为二维向量
|
|
|
|
|
mouse.x = (event.clientX / window.innerWidth) * 2 - 1
|
|
|
|
|
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
|
|
|
|
|
let mouse = new THREE.Vector2()
|
|
|
|
|
let raycaster = new THREE.Raycaster()
|
|
|
|
|
document.addEventListener('dblclick', function (event) {
|
|
|
|
|
// 将鼠标位置转换为二维向量
|
|
|
|
|
mouse.x = (event.clientX / window.innerWidth) * 2 - 1
|
|
|
|
|
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
|
|
|
|
|
|
|
|
|
|
// 使用鼠标的位置和相机进行raycasting
|
|
|
|
|
raycaster.setFromCamera(mouse, camera)
|
|
|
|
|
// 使用鼠标的位置和相机进行raycasting
|
|
|
|
|
raycaster.setFromCamera(mouse, camera)
|
|
|
|
|
|
|
|
|
|
// 计算物体和鼠标点的交点
|
|
|
|
|
let intersects = raycaster.intersectObjects(scene.children)
|
|
|
|
|
// 计算物体和鼠标点的交点
|
|
|
|
|
let intersects = raycaster.intersectObjects(scene.children)
|
|
|
|
|
|
|
|
|
|
// 如果有交点
|
|
|
|
|
if (intersects.length > 0) {
|
|
|
|
|
let obj = intersects[0]
|
|
|
|
|
console.log(obj)
|
|
|
|
|
// 如果有交点
|
|
|
|
|
if (intersects.length > 0) {
|
|
|
|
|
let obj = intersects[0]
|
|
|
|
|
console.log(obj)
|
|
|
|
|
|
|
|
|
|
renderer.render(scene, camera)
|
|
|
|
|
}
|
|
|
|
|
}, false)
|
|
|
|
|
renderer.render(scene, camera)
|
|
|
|
|
}
|
|
|
|
|
}, false)
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
const btnClick = (el, id) => {
|
|
|
|
|
$(el).children('.qyBottom').css({display: 'inline-block'})
|
|
|
|
|
$(el).siblings().each(function () {
|
|
|
|
|
$(this).children('.qyBottom').css({display: 'none'})
|
|
|
|
|
})
|
|
|
|
|
const btnClick = (el, id) => {
|
|
|
|
|
$(el).children('.qyBottom').css({display: 'inline-block'})
|
|
|
|
|
$(el).siblings().each(function () {
|
|
|
|
|
$(this).children('.qyBottom').css({display: 'none'})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$.post(ctx + 'api/getCountNumberById', {id: id.toString()}, (e) => {
|
|
|
|
|
$("#threeLabelContent").css('display', 'block')
|
|
|
|
|
$("#threeLabelContent").html(`<div class="rightTable"><div class="rightTH">机坪名称</div><div class="rightTH">机位编码</div><div class="rightTH">轮挡数量</div></div>${e.data.map(v => `<div class="rightTH">${v.areaName}</div><div class="rightTH">${v.locationCode}</div><div class="rightTH">${v.countNumber}</div> `).join('<br>')}`)
|
|
|
|
|
$.post(ctx + 'api/getCountNumberById', {id: id.toString()}, (e) => {
|
|
|
|
|
$("#threeLabelContent").css('display', 'block')
|
|
|
|
|
$("#threeLabelContent").html(`<div class="rightTable"><div class="rightTH">机坪名称</div><div class="rightTH">机位编码</div><div class="rightTH">轮挡数量</div></div>${e.data.map(v => `<div class="rightTH">${v.areaName}</div><div class="rightTH">${v.locationCode}</div><div class="rightTH">${v.countNumber}</div> `).join('<br>')}`)
|
|
|
|
|
|
|
|
|
|
// new tween.Tween(camera.position).to(new THREE.Vector3(383, 439, 3553), 500).start()
|
|
|
|
|
// camera.position.set(383, 439, 3553)
|
|
|
|
|
// camera.rotation.x = -0.9742
|
|
|
|
|
// camera.rotation.y = -0.2454
|
|
|
|
|
// camera.rotation.z = -0.3435
|
|
|
|
|
// controls.target = new THREE.Vector3(832, -1042, 2547)
|
|
|
|
|
// camera.updateProjectionMatrix()
|
|
|
|
|
// controls.update()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// new tween.Tween(camera.position).to(new THREE.Vector3(383, 439, 3553), 500).start()
|
|
|
|
|
// camera.position.set(383, 439, 3553)
|
|
|
|
|
// camera.rotation.x = -0.9742
|
|
|
|
|
// camera.rotation.y = -0.2454
|
|
|
|
|
// camera.rotation.z = -0.3435
|
|
|
|
|
// controls.target = new THREE.Vector3(832, -1042, 2547)
|
|
|
|
|
// camera.updateProjectionMatrix()
|
|
|
|
|
// controls.update()
|
|
|
|
|
})
|
|
|
|
|
$.post(ctx + 'api/getDevice', {id: id.toString()}, (e) => {
|
|
|
|
|
$("#threeLabelContent1").css('display', 'block')
|
|
|
|
|
$("#threeLabelContent1").html(`<div class="rightTable1"><div class="rightTH1">摆放桩位</div><div class="rightTH1">设备编码</div><div class="rightTH1">设备名称</div><div class="rightTH1">设备类型</div><div class="rightTH1">使用状态</div><div class="rightTH1">设备状态</div></div>${e.data.map(v => `<div class="rightTH1">${v.locationName}</div><div class="rightTH1">${v.devicecode}</div><div class="rightTH1">${v.deviceName}</div><div class="rightTH1">${v.deviceType}</div><div class="rightTH1">${v.usestate}</div><div class="rightTH1">${v.devicestate}</div> `).join('<br>')}`)
|
|
|
|
|
|
|
|
|
|
$.post(ctx + 'api/getArea', {}, (e) => {
|
|
|
|
|
let html = ``
|
|
|
|
|
e.data.forEach(v => {
|
|
|
|
|
html += `
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$.post(ctx + 'api/getArea', {}, (e) => {
|
|
|
|
|
let html = ``
|
|
|
|
|
e.data.forEach(v => {
|
|
|
|
|
html += `
|
|
|
|
|
<div class="bottomBtn btn1" onclick="btnClick(this,${v.storeId})" style="font-size: ${v.storeName.length > 5 ? '0.8vw' : '1.03vw'}">
|
|
|
|
|
<div class="qy qyL"></div>
|
|
|
|
|
<div class="qy qyR"></div>
|
|
|
|
|
@ -401,9 +428,9 @@
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
`
|
|
|
|
|
})
|
|
|
|
|
$("#btns").html(html)
|
|
|
|
|
})
|
|
|
|
|
$("#btns").html(html)
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
夜笙歌
1 month ago