<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js-webgl物联网粮仓3D可视化</title>
<style>
body {
margin: 0;
overflow: hidden;
background: rgb(1,3,28);
}
#tan {
position: absolute;
color: #fff;
z-index: 102;
font-size: 16px;
}
#tan0 {
position: absolute;
color: #fff;
background: rgba(2, 4, 27, 0.8);
padding: 20px;
border-radius: 5px;
border: 1px solid #00aeef;
z-index: 102;
width: 180px;
font-size: 16px;
}
#tan0>div {
padding: 5px;
}
#left {
position: absolute;
z-index: 200;
width: 150px;
background: rgba(255, 255, 255, 1.0);
padding: 15px;
height: 100%;
}
[v-cloak] {
display: none;
}
.HUD {
box-shadow: 0 0 2px #00ffff inset;
background: linear-gradient(#00ffff, #00ffff) left top, linear-gradient(#00ffff, #00ffff) left top, linear-gradient(#00ffff, #00ffff) right bottom, linear-gradient(#00ffff, #00ffff) right bottom;
background-repeat: no-repeat;
background-size: 1px 6px, 6px 1px;
background-color: rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 16px;
padding: 4px 10px;
}
</style>
<script src="../../versions/threejsR92/build/three.min.js"></script>
<script src="../../versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
<script src="../../versions/threejsR92/examples/js/loaders/OBJLoader.js"></script>
<script src="../../versions/threejsR92/examples/js/renderers/CSS2DRenderer.js"></script>
<script type="text/javascript" src="../../versions/threejsR92/examples/js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="../../versions/threejsR92/examples/js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="../../versions/threejsR92/examples/js/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="../../versions/threejsR92/examples/js/shaders/CopyShader.js"></script>
<script type="text/javascript" src="../../versions/threejsR92/examples/js/postprocessing/OutlinePass.js"></script>
<script src="../../js/vue@2.5.16.min.js"></script>
<script src="../../js/element-ui/index.js"></script>
<link rel="stylesheet" href="../../js/element-ui/index.css">
<script type="text/javascript" src="../../versions/threejsR92/examples/js/shaders/FXAAShader.js"></script>
</head>
<body>
<div style="z-index:2;text-align:center;font-size: 16px;color:#00ffff;top:4px;position: absolute;width:100%;background: rgba(255, 0, 0, 0.0);">粮仓3D可视化系统
</div>
<div style="z-index:1;position: absolute;width:100%;">
<img src="./UI图/line2.png" alt="" style="width:100%;height:28px">
</div>
<div id="label" style="visibility:hidden">
<div style="position:relative;">
<div style="position: absolute;top:-50px;left:20px;width:100px;color:#03B5B3;"></div>
<div style="position: absolute;top:-30px;left:0px;">
<img src="./UI图/弹窗线/青色弹窗.png" alt="">
</div>
</div>
</div>
<div id="label3" style="visibility:hidden">
<div style="position:relative;">
<div style="position: absolute;top:-120px;left:55px;width:100px;color:#ffffff;"></div>
<div style="position: absolute;top:-100px;left:0px;">
<img src="./UI图/弹窗线/白色弹窗.png" alt="">
</div>
</div>
</div>
<div id="app">
<div style="position: absolute;left: 25px;top: 50px;"></div>
<div>
<div class="HUD" style="background-color:rgba(255,255,255,0.1);padding:12px 20px;position: absolute;left: 50px;top: 65px;z-index:5;line-height:20px;vertical-align:middle">
<el-switch style="margin-top:-3px;" v-model="switchBool" active-color="#00aeef"></el-switch>
<span style="color:#ffffff;font-size:16px">隐藏粮仓</span>
<el-switch style="margin-top:-3px;" v-model="tagBool" active-color="#00aeef"></el-switch>
<span style="color:#ffffff;font-size:16px">显示标签</span>
<br>
<br>
<el-switch style="margin-top:-3px;" v-model="rainBool" active-color="#00aeef"></el-switch>
<span style="color:#ffffff;font-size:16px">天气可视</span>
<el-switch style="margin-top:-3px;" v-model="clipBool" active-color="#00aeef"></el-switch>
<span style="color:#ffffff;font-size:16px">关闭剖切</span>
</div>
</div>
<div v-cloak id="tan" style="width:500px;height:400px;" ref="tan" :style="{left:left + 'px',top:top + 'px'}" v-show="bool">
<div style="position:relative;">
<div style="position: absolute;left: 0px;top: 0px;">
<img src="./UI图/显示面板/2.png" alt="" style="width:400px;opacity: 1.0;">
</div>
<div style="position:absolute;left:25px;top:40px;font-size:16px">{{ currentMesh.name }}</div>
<div style="position:absolute;left:290px;top:25px">
<img src="./UI图/温度/2.png" alt="" style="width:50px;">
</div>
<div style="position:absolute;left:330px;top:40px">{{ currentMesh.温度 }} ℃</div>
<div style="position:absolute;left:170px;top:50px">{{ currentMesh.谷物 }}(吨)</div>
<div style="position:absolute;left:80px;top:85px;font-size:60px;color:#00ffff;vertical-align:middle">
<img :src="currentMesh.iconpath" alt="" style="width:60px;">
</div>
<div style="position:absolute;left:155px;top:80px;font-size:60px;color:#00ffff;vertical-align:middle">{{ Math.floor(S) }}t</div>
<div style="position:absolute;left:70px;top:170px;padding:8px 25px;border-radius:30px;border:1px solid #00ffff;">仓高—{{ currentMesh.仓高 }} m</div>
<div style="position:absolute;left:225px;top:170px;padding:8px 25px;">粮高—{{ currentMesh.粮高 }} m</div>
</div>
</div>
</div>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 orientation; attribute vec3 offset; attribute vec2 scale; attribute float life; attribute float random; varying vec2 vUv; varying float vRandom; varying float vAlpha; float range(float oldValue, float oldMin, float oldMax, float newMin, float newMax) { float oldRange = oldMax - oldMin; float newRange = newMax - newMin; return (((oldValue - oldMin) * newRange) / oldRange) + newMin; }float pcurve(float x, float a, float b) { float k = pow(a + b, a + b) / (pow(a, a) * pow(b, b)); return k * pow(x, a) * pow(1.0 - x, b); } void main() { vUv = uv; vRandom = random; vAlpha = pcurve(life, 1.0, 2.0); vec3 pos = position; pos.xy *= scale * vec2(range(pow(life, 1.5),
Three.js-webgl物联网粮仓3D可视化.zip （39个子文件） 
Three.js-webgl物联网粮仓3D可视化 3D liangcang 粮仓模型 
wall.obj 1KB
003.png 4KB gong001.obj 10KB door.png 8KB 003.obj 1KB 002.obj 10KB 002.png 6KB d001.png 6KB 贴图 水泥地面 floor3.png 34KB 马路 road2.png 1KB 背景 
0.jpg 13KB 火焰 flame.png 3KB 土地 1.png 551KB 树 0.png 8KB 雨雪 rain.png 25KB 围墙 lan2.png 16KB
index.html 42KB UI图 line2.png 4KB 弹窗线 白色弹窗.png 1019B 青色弹窗.png 879B 显示面板 2.png 8KB 温度 2.png 7KB js element-ui index.js 549KB index.css 227KB fonts element-icons.woff 28KB element-icons.ttf 55KB vue@2.5.16.min.js 84KB versions threejsR92 examples js postprocessing RenderPass.js 1KB EffectComposer.js 4KB OutlinePass.js 19KB ShaderPass.js 1KB loaders FBXLoader.js 80KB OBJLoader.js 18KB libs inflate.min.js 7KB renderers CSS2DRenderer.js 2KB shaders CopyShader.js 622B FXAAShader.js 57KB controls OrbitControls.js 24KB build three.min.js 521KB资源评论
布达拉三世
- 粉丝: 459
- 资源: 52
