Skip to content

3
3DWeb
Commit ccc4783e authored by lixiaoyi's avatar lixiaoyi
Browse files
Options

fix 模型重叠

parent 04bf9251
Show whitespace changes
Inline Side-by-side
Showing with 447 additions and 309 deletions
index.html
View file @ ccc4783e
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
<link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/index.css" />
<link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css"> <link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css" />
</head> </head>
<style> <style>
#webgl-output{ #webgl-output {
position: absolute; position: absolute;
top: 0px; top: 0px;
height: 100%; height: 100%;
...@@ -17,48 +18,54 @@ ...@@ -17,48 +18,54 @@
/* width: 1100px; */ /* width: 1100px; */
} }
.dg{ .dg {
display: none; display: none;
} }
body{
body {
position: relative; position: relative;
} }
.fileDragArea1{
.fileDragArea1 {
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 0; left: 0;
margin: auto; margin: auto;
color: #5BFCF4; color: #5bfcf4;
width: 150px; width: 150px;
height: 40px; height: 40px;
} }
.cyxPopup{
.cyxPopup {
z-index: 300; z-index: 300;
position: fixed; position: fixed;
display: none; display: none;
width: 1280px; width: 1280px;
height: 710px; height: 710px;
background: #191A1A; background: #191a1a;
border-radius: 3px; border-radius: 3px;
top: calc(50% - 350px); top: calc(50% - 350px);
left: calc(50% - 640px); left: calc(50% - 640px);
} }
.cyxPopup_head{
.cyxPopup_head {
width: calc(100% - 20px); width: calc(100% - 20px);
padding-left: 20px; padding-left: 20px;
line-height: 36px; line-height: 36px;
height: 36px; height: 36px;
background: #292A2A; background: #292a2a;
color: #c9c9c9; color: #c9c9c9;
} }
.Popupbody{
.Popupbody {
width: 600px; width: 600px;
padding: 0px 0; padding: 0px 0;
height: calc(100% - 86px); height: calc(100% - 86px);
float: left; float: left;
} }
.Popupbodyright{
.Popupbodyright {
float: left; float: left;
height: calc(100% - 76px); height: calc(100% - 76px);
width: calc(100% - 610px); width: calc(100% - 610px);
...@@ -67,36 +74,44 @@ ...@@ -67,36 +74,44 @@
position: relative; position: relative;
top: 35px; top: 35px;
} }
.toptable{
.toptable {
padding: 0 10px; padding: 0 10px;
} }
.th{
.th {
border: none !important; border: none !important;
background: #383a3a !important; background: #383a3a !important;
color: #D7DDE0 !important; color: #d7dde0 !important;
border-bottom:1px solid #000 !important; border-bottom: 1px solid #000 !important;
} }
table{
table {
background: #252727 !important; background: #252727 !important;
color: #949494 !important; color: #949494 !important;
} }
tbody{
tbody {
background: #252727 !important; background: #252727 !important;
color: #949494 !important; color: #949494 !important;
overflow: auto; overflow: auto;
} }
.select_tr{
.select_tr {
background: #3c3529; background: #3c3529;
color: #fff; color: #fff;
border-bottom: 1px solid rgb(183, 157, 113); border-bottom: 1px solid rgb(183, 157, 113);
} }
.layui-select-title>input{
.layui-select-title>input {
background-color: #343434 !important; background-color: #343434 !important;
} }
.select_tr>td>input{
.select_tr>td>input {
background-color: #000000; background-color: #000000;
} }
input{
input {
width: 160px !important; width: 160px !important;
height: 25px !important; height: 25px !important;
background-color: #343434; background-color: #343434;
...@@ -104,30 +119,39 @@ ...@@ -104,30 +119,39 @@
border: 1px solid #343434 !important; border: 1px solid #343434 !important;
text-indent: 0.5em; text-indent: 0.5em;
} }
.select_tr>input{
.select_tr>input {
background-color: #000 !important; background-color: #000 !important;
} }
.layui-unselect,.layui-select-title{
.layui-unselect,
.layui-select-title {
width: 160px !important; width: 160px !important;
} }
.bottomtable{
.bottomtable {
padding: 0 10px; padding: 0 10px;
} }
.layui-anim{
.layui-anim {
background-color: #343434 !important; background-color: #343434 !important;
border: 1px solid #343434 !important; border: 1px solid #343434 !important;
color: #fff; color: #fff;
} }
.b{
.b {
position: absolute; position: absolute;
z-index: 99; z-index: 99;
width: 90px; width: 90px;
height: 30px; height: 30px;
color: #8FE4E9; color: #8fe4e9;
border-radius: 5px; border-radius: 5px;
background-color: #0C1C38; background-color: #0c1c38;
background: #007eaf; background: #007eaf;
background: linear-gradient(-45deg, #2284fb 50%, #0a0e92 60%, #2e59d4 70%); background: linear-gradient(-45deg,
#2284fb 50%,
#0a0e92 60%,
#2e59d4 70%);
background-size: 600% 100%; background-size: 600% 100%;
-webkit-animation: shine 20s infinite; -webkit-animation: shine 20s infinite;
animation: shine 20s infinite; animation: shine 20s infinite;
...@@ -138,13 +162,16 @@ ...@@ -138,13 +162,16 @@
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
@-webkit-keyframes shine { @-webkit-keyframes shine {
0% { 0% {
background-position-x: 400%; background-position-x: 400%;
} }
50% { 50% {
background-position-x: 0%; background-position-x: 0%;
} }
100% { 100% {
background-position-x: -400%; background-position-x: -400%;
} }
...@@ -154,101 +181,117 @@ ...@@ -154,101 +181,117 @@
0% { 0% {
background-position-x: 400%; background-position-x: 400%;
} }
50% { 50% {
background-position-x: 0%; background-position-x: 0%;
} }
100% { 100% {
background-position-x: -400%; background-position-x: -400%;
} }
} }
.b1{
.b1 {
right: 10px; right: 10px;
top:10px; top: 10px;
position: absolute !important; position: absolute !important;
} }
.b2{
.b2 {
right: 120px; right: 120px;
top:10px; top: 10px;
position: absolute !important; position: absolute !important;
} }
.rad1{
.rad1 {
width: 50px !important; width: 50px !important;
height: 15px !important; height: 15px !important;
position: relative; position: relative;
top: 3px; top: 3px;
} }
.b3{
.b3 {
/* width: 50px !important; /* width: 50px !important;
height: 15px !important; */ height: 15px !important; */
position: absolute !important; position: absolute !important;
top: 10px; top: 10px;
right: 230px; right: 230px;
} }
#canvas{
#canvas {
position: absolute; position: absolute;
z-index:999999; z-index: 999999;
top:180px; top: 180px;
left: 0; left: 0;
/* display: none; */ /* display: none; */
} }
#cover{
#cover {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
display: none; display: none;
background-color: rgba(0,0,0,0.3); background-color: rgba(0, 0, 0, 0.3);
/* opacity: 0.3; */ /* opacity: 0.3; */
z-index:99999999999999999999999999999999999999999; z-index: 99999999999999999999999999999999999999999;
} }
td{
padding: 9px 15px;
td {
padding: 9px 15px;
} }
tr{
tr {
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
.select_td{
border-bottom: 1px solid rgba(255,165,0,0.1); .select_td {
background: rgba(255,165,0,0.1); border-bottom: 1px solid rgba(255, 165, 0, 0.1);
background: rgba(255, 165, 0, 0.1);
} }
/*滚动条整体样式*/ /*滚动条整体样式*/
::-webkit-scrollbar { ::-webkit-scrollbar {
/*高宽分别对应横竖滚动条的尺寸*/ /*高宽分别对应横竖滚动条的尺寸*/
width: 16px; width: 16px;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
/*滚动条里面滑块*/ /*滚动条里面滑块*/
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #465880; background: #465880;
} }
// 上箭头 /* // 上箭头 */
::-webkit-scrollbar-button:vertical:single-button:start { ::-webkit-scrollbar-button:vertical:single-button:start {
background-image: url("~@/static/images/AllData/up.png"); background-image: url("~@/static/images/AllData/up.png");
background-size: 100%; background-size: 100%;
cursor: pointer; cursor: pointer;
} }
// 下箭头
/* // 下箭头 */
::-webkit-scrollbar-button:vertical:single-button:end { ::-webkit-scrollbar-button:vertical:single-button:end {
background-image: url("~@/static/images/AllData/down.png"); background-image: url("~@/static/images/AllData/down.png");
background-size: 100%; background-size: 100%;
cursor: pointer; cursor: pointer;
} }
#radio1,#radio2,.w,.w1{
#radio1,
#radio2,
.w,
.w1 {
display: none; display: none;
} }
dd:hover{
background:rgb(183, 157, 113) !important; dd:hover {
} background: rgb(183, 157, 113) !important;
.layui-this{
background:rgb(183, 157, 113) !important;
} }
#i1{
.layui-this {
background: rgb(183, 157, 113) !important;
} }
</style> </style>
<body> <body>
<!-- <input type="" name="" id="i1" value="123213213" /> <!-- <input type="" name="" id="i1" value="123213213" />
<input type="" name="" id="i2" value="123213213" /> --> <input type="" name="" id="i2" value="123213213" /> -->
...@@ -257,20 +300,22 @@ ...@@ -257,20 +300,22 @@
<button class="b b1" data-ripple="ripple">变量运行</button> <button class="b b1" data-ripple="ripple">变量运行</button>
<button class="b b3" data-ripple="ripple">清空模型</button> <button class="b b3" data-ripple="ripple">清空模型</button>
<div class="cyxPopup"> <div class="cyxPopup">
<div class="cyxPopup_head"> <div class="cyxPopup_head">模型配置</div>
模型配置 <div class="Popupcontent" style="position: relative; width: 100%; height: 670px">
</div>
<div class="Popupcontent" style="position: relative;width: 100%;height: 670px">
<div class="Popupbodyright"></div> <div class="Popupbodyright"></div>
<div class="Popupbody"> <div class="Popupbody">
<div style="padding-top:5px !important;color: white;padding:0 10px">模型组:<input checked="" value='rad1' name="sex1" id='radio1' class="rad1" type="radio"/><span class="w">打簧机</span><input value="rad2" name="sex1" id='radio2' class="rad1" type="radio" checked=""/><span class="w1">绕线机</span></div> <div style="padding-top: 5px !important; color: white; padding: 0 10px">
模型组:<input checked="" value="rad1" name="sex1" id="radio1" class="rad1" type="radio" /><span
class="w">打簧机</span><input value="rad2" name="sex1" id="radio2" class="rad1" type="radio" checked="" /><span
class="w1">绕线机</span>
</div>
<div class="toptable"> <div class="toptable">
<table class="layui-table" style="height: 300px;margin: 0;height: 30px;margin-top:10px;"> <table class="layui-table" style="height: 300px; margin: 0; height: 30px; margin-top: 10px">
<colgroup> <colgroup>
<col style="width: 100px;"> <col style="width: 100px" />
<col style="width: 130px;"> <col style="width: 130px" />
<col style="width: 150px;"> <col style="width: 150px" />
<col> <col />
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
...@@ -281,33 +326,35 @@ ...@@ -281,33 +326,35 @@
</tr> </tr>
</thead> </thead>
</table> </table>
<div style="height: 270px;overflow: auto;"> <div style="height: 270px; overflow: auto">
<table> <table>
<colgroup> <colgroup>
<col style="width: 110px;"> <col style="width: 110px" />
<col style="width: 150px;"> <col style="width: 150px" />
<col style="width: 170px;"> <col style="width: 170px" />
<col> <col />
</colgroup> </colgroup>
<tbody class="ontablebody"> <tbody class="ontablebody"></tbody>
</tbody>
</table> </table>
</div> </div>
</div> </div>
<div class="searchlist" style="padding: 10px;height: 25px;line-height: 25px;"> <div class="searchlist" style="padding: 10px; height: 25px; line-height: 25px">
<span style="float: left;color: #fff;margin-right:10px ;">变量类型</span> <span style="float: left; color: #fff; margin-right: 10px">变量类型</span>
<div class="variabletype" style="width: 100px;float: left;height: 25px;margin-right: 70px;"> <div class="variabletype" style="
<div class='layui-form'> width: 100px;
<select name="city" lay-verify="" lay-filrer="test" id='select' value=""> float: left;
height: 25px;
margin-right: 70px;
">
<div class="layui-form">
<select name="city" lay-verify="" lay-filrer="test" id="select" value="">
<option value="不限" selected>不限</option> <option value="不限" selected>不限</option>
<option value="二进制变量">二进制变量</option> <option value="二进制变量">二进制变量</option>
<option value="有符号8位整型" >有符号8位整型</option> <option value="有符号8位整型">有符号8位整型</option>
<option value="无符号8位整型">无符号8位整型</option> <option value="无符号8位整型">无符号8位整型</option>
<option value="有符号16位整型" >有符号16位整型</option> <option value="有符号16位整型">有符号16位整型</option>
<option value="无符号16位整型">无符号16位整型</option> <option value="无符号16位整型">无符号16位整型</option>
<option value="有符号32位整型" >有符号32位整型</option> <option value="有符号32位整型">有符号32位整型</option>
<option value="无符号32位整型">无符号32位整型</option> <option value="无符号32位整型">无符号32位整型</option>
<option value="有符号64位整型">有符号64位整型</option> <option value="有符号64位整型">有符号64位整型</option>
<option value="无符号64位整型">无符号64位整型</option> <option value="无符号64位整型">无符号64位整型</option>
...@@ -319,19 +366,29 @@ ...@@ -319,19 +366,29 @@
</select> </select>
</div> </div>
</div> </div>
<span style="color: #fff;float: left;margin-right: 10px;">变量名称</span> <span style="color: #fff; float: left; margin-right: 10px">变量名称</span>
<div class="variable" style="width: 100px;float: left;"> <div class="variable" style="width: 100px; float: left">
<div class='layui-form'> <div class="layui-form">
<input class="searchinput" value='' placeholder="请输入变量名" style="text-indent: 0.5em;"/> <input class="searchinput" value="" placeholder="请输入变量名" style="text-indent: 0.5em" />
</div> </div>
</div> </div>
<button class="search" style="cursor: pointer;border: 1px solid #3c3529;background-color: #3c3529;width:60px;color: rgb(183, 157, 113);float: right;height: 25px;">查询</button> <button class="search" style="
cursor: pointer;
border: 1px solid #3c3529;
background-color: #3c3529;
width: 60px;
color: rgb(183, 157, 113);
float: right;
height: 25px;
">
查询
</button>
</div> </div>
<div class="bottomtable"> <div class="bottomtable">
<table class="layui-table" style="height: 300px;margin: 0;height: 30px;margin-top:10px;"> <table class="layui-table" style="height: 300px; margin: 0; height: 30px; margin-top: 10px">
<colgroup> <colgroup>
<col style="width: 300px;"> <col style="width: 300px" />
<col style="width: 300px;"> <col style="width: 300px" />
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
...@@ -340,36 +397,58 @@ ...@@ -340,36 +397,58 @@
</tr> </tr>
</thead> </thead>
</table> </table>
<div style="height: 190px;overflow: auto;"> <div style="height: 190px; overflow: auto">
<table style=""> <table>
<colgroup> <colgroup>
<col style="width: 340px;"> <col style="width: 340px" />
<col style="width: 310px;"> <col style="width: 310px" />
</colgroup> </colgroup>
<tbody class="twotablebody"> <tbody class="twotablebody"></tbody>
</tbody>
</table> </table>
</div> </div>
</div> </div>
<button class="cancel" style="cursor: pointer;position: absolute;bottom: 10px;border-radius: 5px;right: 130px;width:100px;height:26px;background-color: #2c2d2d;border: 1px solid rgb(86,87,87);color:#fff">取消</button> <button class="cancel" style="
<button class="confim" style="cursor: pointer;position: absolute;bottom: 10px;border-radius: 5px;right: 20px;width:100px;height:26px;background-color: #3c3529;color:rgb(183,157,113);border: 1px solid rgb(183,157,113);">确定</button> cursor: pointer;
position: absolute;
bottom: 10px;
border-radius: 5px;
right: 130px;
width: 100px;
height: 26px;
background-color: #2c2d2d;
border: 1px solid rgb(86, 87, 87);
color: #fff;
">
取消
</button>
<button class="confim" style="
cursor: pointer;
position: absolute;
bottom: 10px;
border-radius: 5px;
right: 20px;
width: 100px;
height: 26px;
background-color: #3c3529;
color: rgb(183, 157, 113);
border: 1px solid rgb(183, 157, 113);
">
确定
</button>
</div> </div>
<canvas id="canvas" width="700px" height="300px">浏览器不支持canvas</canvas> <canvas id="canvas" width="700px" height="300px" style="display: none">浏览器不支持canvas</canvas>
</div> </div>
</div> </div>
<div id="fileDragArea" class="fileDragArea1" style="position: absolute; z-index: 1000" class="upload-default">
拖拽文件夹导入模型
<div id="fileDragArea" class="fileDragArea1" style="position: absolute;z-index: 1000;" class="upload-default">拖拽文件夹导入模型</div> </div>
<div class="container"> <div class="container">
<!-- <div class="header" > <!-- <div class="header" >
<div>header 部分</div> <div>header 部分</div>
</div> --> </div> -->
<div class="main" > <div class="main">
<div class="main_header" >实时生产预警和安全预警</div> <div class="main_header">实时生产预警和安全预警</div>
<div id="webgl-output"></div> <div id="webgl-output"></div>
<!-- 左右两侧内容 --> <!-- 左右两侧内容 -->
<div class="view-btn view-btn_left btn-active"> <div class="view-btn view-btn_left btn-active">
...@@ -377,9 +456,9 @@ ...@@ -377,9 +456,9 @@
</div> </div>
<div class="view view_left"> <div class="view view_left">
<div class="item"> <div class="item">
<div class="item_header" > <div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt=""> <img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title" >数值显示</span> <span class="item_title">数值显示</span>
</div> </div>
<div class="item_wrap item_val_wrap"> <div class="item_wrap item_val_wrap">
<div class="item_wrap_content"> <div class="item_wrap_content">
...@@ -403,17 +482,17 @@ ...@@ -403,17 +482,17 @@
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="item_header" > <div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt=""> <img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title" >电机功率值</span> <span class="item_title">电机功率值</span>
</div> </div>
<div class="item_wrap" id="act_torque"></div> <div class="item_wrap" id="act_torque"></div>
</div> </div>
<div class="item"> <div class="item">
<div class="item_header" > <div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt=""> <img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title" >功率趋势</span> <span class="item_title">功率趋势</span>
</div> </div>
<div class="item_wrap" id="torque"></div> <div class="item_wrap" id="torque"></div>
</div> </div>
...@@ -423,27 +502,29 @@ ...@@ -423,27 +502,29 @@
</div> </div>
<div class="view view_right"> <div class="view view_right">
<div class="item"> <div class="item">
<div class="item_header" > <div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt=""> <img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title" >转矩趋势</span> <span class="item_title">转矩趋势</span>
</div> </div>
<div class="item_wrap" id="right1"></div> <div class="item_wrap" id="right1"></div>
</div> </div>
<div class="item"> <div class="item">
<div class="item_header" > <div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt=""> <img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title" >电机转矩值</span> <span class="item_title">电机转矩值</span>
</div> </div>
<div class="item_wrap" id="right2"></div> <div class="item_wrap" id="right2"></div>
</div> </div>
<div class="item"> <div class="item">
<div class="item_header item_alarm" > <div class="item_header item_alarm">
<div class="item_title_alarm" >报警信息</div> <div class="item_title_alarm">报警信息</div>
<div class="item_subTitle" >当前报警数：<span class="red" id="alarmData" ></span></div> <div class="item_subTitle">
当前报警数：<span class="red" id="alarmData"></span>
</div> </div>
<div class="item_wrap item_alarm_wrap" id="alarm" > </div>
<div class="item_wrap item_alarm_wrap" id="alarm">
<!-- 渲染报警信息 --> <!-- 渲染报警信息 -->
<!-- <div class="list"> <!-- <div class="list">
<span>2021-11-11 12:36:30 越限报警越限报警...</span> <span>2021-11-11 12:36:30 越限报警越限报警...</span>
...@@ -455,7 +536,6 @@ ...@@ -455,7 +536,6 @@
<div class="list list_red"> <div class="list list_red">
<span>2021-11-11 12:36:30 越限报警越限报警...</span> <span>2021-11-11 12:36:30 越限报警越限报警...</span>
</div> --> </div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -468,46 +548,48 @@ ...@@ -468,46 +548,48 @@
<script src="./js/layerjs/layer.js"></script> <script src="./js/layerjs/layer.js"></script>
<script src="./layui-v2.6.8/layui/layui.js"></script> <script src="./layui-v2.6.8/layui/layui.js"></script>
<script src="./ripple.js"></script> <script src="./ripple.js"></script>
<script > <script>
layui.use('form', function(){ layui.use("form", function () {
var form = layui.form; var form = layui.form;
//监听提交 //监听提交
form.on('submit(formDemo)', function(data){ form.on("submit(formDemo)", function (data) {
layer.msg(JSON.stringify(data.field)); layer.msg(JSON.stringify(data.field));
return false; return false;
}); });
}); });
var onetable = [{ var onetable = [
clipAction:'', {
variable:'配置变量', clipAction: "",
value:'', variable: "配置变量",
oldvalue:'', value: "",
animation:'图片数量', oldvalue: "",
name:'图片' animation: "图片数量",
}] name: "图片",
var twotable = [] },
var oldvararr = [] ];
$(".view-btn_left").click(function(){ var twotable = [];
let viewDis = $(".view_left").css('display') var oldvararr = [];
$(".view_left").css('display', viewDis === 'none' ? 'flex' : 'none') $(".view-btn_left").click(function () {
$(".view-btn_left").toggleClass('btn-active') let viewDis = $(".view_left").css("display");
}) $(".view_left").css("display", viewDis === "none" ? "flex" : "none");
$(".view-btn_right").click(function(){ $(".view-btn_left").toggleClass("btn-active");
let viewDis = $(".view_right").css('display') });
$(".view_right").css('display', viewDis === 'none' ? 'flex' : 'none') $(".view-btn_right").click(function () {
$(".view-btn_right").toggleClass('btn-active') let viewDis = $(".view_right").css("display");
}) $(".view_right").css("display", viewDis === "none" ? "flex" : "none");
</script> $(".view-btn_right").toggleClass("btn-active");
});
</script>
<script src="./new_file.js"></script> <script src="./new_file.js"></script>
<script> new Ripple({ <script>
opacity : 0.6, //水波纹透明度 new Ripple({
speed : 1, //水波纹扩散速度 opacity: 0.6, //水波纹透明度
bgColor : "#fff", //水波纹颜色 speed: 1, //水波纹扩散速度
cursor : true //是否显示手型指针 bgColor: "#fff", //水波纹颜色
})</script> cursor: true, //是否显示手型指针
});
</script>
<script src="./js/index.js"></script> <script src="./js/index.js"></script>
<script type="module" src="./main.js"></script>
<script type="module" src="./main.js">
</script>
</html> </html>
\ No newline at end of file
main.js
View file @ ccc4783e
...@@ -32,6 +32,7 @@ renderer.outputEncoding = THREE.sRGBEncoding; ...@@ -32,6 +32,7 @@ renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement); container.appendChild(renderer.domElement);
const pmremGenerator = new THREE.PMREMGenerator(renderer); const pmremGenerator = new THREE.PMREMGenerator(renderer);
const scene = new THREE.Scene(); const scene = new THREE.Scene();
window.scene = scene
scene.background = new THREE.Color(0x0C1C38); scene.background = new THREE.Color(0x0C1C38);
scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture; scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
var select = '没有选中' //判断table有没有选中变量 var select = '没有选中' //判断table有没有选中变量
...@@ -47,12 +48,13 @@ const controls = new OrbitControls(camera, renderer.domElement); ...@@ -47,12 +48,13 @@ const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0.5, 0); controls.target.set(0, 0.5, 0);
controls.update(); controls.update();
controls.enablePan = true; controls.enablePan = true;
controls.enableDamping = true; // controls.enableDamping = true;
const dracoLoader = new DRACOLoader(); const dracoLoader = new DRACOLoader();
var mixerarr = [] var mixerarr = []
dracoLoader.setDecoderPath('js/libs/draco/gltf/'); dracoLoader.setDecoderPath('js/libs/draco/gltf/');
var variablearr = [] //选中变量的组合 var variablearr = [] //选中变量的组合
var oldvariablearr = [] //变量旧值的组合 var oldvariablearr = [] //变量旧值的组合
let needUpdateModel = false; // 是否需要更新模型
// 打簧机动画下标 // 打簧机动画下标
var numarr = { var numarr = {
num0: 0, num0: 0,
...@@ -94,10 +96,7 @@ function updateEnvironment() { ...@@ -94,10 +96,7 @@ function updateEnvironment() {
scene.environment = envMap; scene.environment = envMap;
}); });
} }
if (localStorage.getItem('moxi1') || localStorage.getItem('moxi2')) { if (localStorage.getItem('moxi1') || localStorage.getItem('moxi2') || $('.b1')[0].innerText == '变量运行') {
document.getElementById('fileDragArea').innerText = '模型载入中。。。'
}
if ($('.b1')[0].innerText == '变量运行') {
document.getElementById('fileDragArea').innerText = '模型载入中。。。' document.getElementById('fileDragArea').innerText = '模型载入中。。。'
} }
//清空模型 //清空模型
...@@ -130,7 +129,6 @@ $('.b1')[0].onclick = function() { ...@@ -130,7 +129,6 @@ $('.b1')[0].onclick = function() {
group3.visible = false group3.visible = false
group2.visible = false group2.visible = false
$('.b1')[0].innerText = '整体运行' $('.b1')[0].innerText = '整体运行'
}
if (localStorage.getItem('moxi2')) { if (localStorage.getItem('moxi2')) {
group1.visible = true group1.visible = true
...@@ -138,6 +136,7 @@ $('.b1')[0].onclick = function() { ...@@ -138,6 +136,7 @@ $('.b1')[0].onclick = function() {
if (localStorage.getItem('moxi1')) { if (localStorage.getItem('moxi1')) {
group.visible = true group.visible = true
} }
}
if (group1.visible !== true && group.visible !== true) { if (group1.visible !== true && group.visible !== true) {
document.getElementById('fileDragArea').innerText == '拖拽文件夹导入模型' document.getElementById('fileDragArea').innerText == '拖拽文件夹导入模型'
document.getElementById('fileDragArea').style.display = 'block' document.getElementById('fileDragArea').style.display = 'block'
...@@ -154,7 +153,6 @@ $('.b1')[0].onclick = function() { ...@@ -154,7 +153,6 @@ $('.b1')[0].onclick = function() {
group.visible = false group.visible = false
} else { } else {
console.log("asdsadas")
group3.visible = false group3.visible = false
group2.visible = false group2.visible = false
$('.b1')[0].innerText = '整体运行' $('.b1')[0].innerText = '整体运行'
...@@ -170,24 +168,24 @@ $('.b1')[0].onclick = function() { ...@@ -170,24 +168,24 @@ $('.b1')[0].onclick = function() {
} }
//模型配置 //模型配置
$('.b2')[0].onclick = function() { $('.b2')[0].onclick = function() {
needUpdateModel = true
scene1.clear()
$('.twotablebody').empty()
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: baseUrl + "/Base/GetSCMSTags", url: baseUrl + "/Base/GetSCMSTags",
dataType: "json", dataType: "json",
contentType: "application/json", contentType: "application/json",
success: function(res) { success: function(res) {
console.log(res.data)
threetable = res.data threetable = res.data
threetable.forEach((item) => { threetable.forEach((item) => {
let tr = `<tr TagName='${item.TagName}'><td>${item.TagName}</td><td>${item.TagType}</td></tr>` let tr = `<tr TagName='${item.TagName}'><td>${item.TagName}</td><td>${item.TagType}</td></tr>`
$('.twotablebody').append(tr) $('.twotablebody').append(tr)
}) })
$('.twotablebody tr').click(async function() {
console.log("select", select) console.log("select", select)
$('.twotablebody tr').click(async function() {
if (select !== '没有选中') { if (select !== '没有选中') {
if ($('#radio2').prop('checked')) { if ($('#radio2').prop('checked')) {
console.log("asdasdasdsadsadasdsadsad")
twotable[select].variable = $(this).attr('TagName') twotable[select].variable = $(this).attr('TagName')
$($('.ontablebody').find('tr')[select]).find('td')[2].innerText = $(this).attr('TagName') $($('.ontablebody').find('tr')[select]).find('td')[2].innerText = $(this).attr('TagName')
} else { } else {
...@@ -201,7 +199,7 @@ $('.b2')[0].onclick = function() { ...@@ -201,7 +199,7 @@ $('.b2')[0].onclick = function() {
}, },
}) })
if (localStorage.getItem('moxi1') || localStorage.getItem('moxi2')) { if (localStorage.getItem('moxi1') || localStorage.getItem('moxi2')) {
console.log("开始时零零商量商量商量商量")
if (document.getElementById('fileDragArea').innerText == '模型载入中。。。') { if (document.getElementById('fileDragArea').innerText == '模型载入中。。。') {
alert('请导入模型') alert('请导入模型')
$('.w1').hide() $('.w1').hide()
...@@ -211,6 +209,7 @@ $('.b2')[0].onclick = function() { ...@@ -211,6 +209,7 @@ $('.b2')[0].onclick = function() {
return return
} }
$('.cyxPopup')[0].style.display = 'block' $('.cyxPopup')[0].style.display = 'block'
scene1.clear()
clearInterval(mxtime1) clearInterval(mxtime1)
scene1.traverse((child) => { scene1.traverse((child) => {
if (child.material) { if (child.material) {
...@@ -248,13 +247,15 @@ $('.b2')[0].onclick = function() { ...@@ -248,13 +247,15 @@ $('.b2')[0].onclick = function() {
onetable[$(this).attr('index')].value = $(this).val() onetable[$(this).attr('index')].value = $(this).val()
}) })
$('.ontablebody tr').click(async function() { $('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index') select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr") $(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr') $(this).addClass('select_tr')
// console.log($(this).children())
let that = this let that = this
initvalue = 0 initvalue = 0
$('#canvas').show() // $('#canvas').show()
for (let i1 in arr) { for (let i1 in arr) {
await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1) await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1)
} }
...@@ -282,13 +283,16 @@ $('.b2')[0].onclick = function() { ...@@ -282,13 +283,16 @@ $('.b2')[0].onclick = function() {
onetable[$(this).attr('index')].value = $(this).val() onetable[$(this).attr('index')].value = $(this).val()
}) })
$('.ontablebody tr').click(async function() { $('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index') select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr") $(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr') $(this).addClass('select_tr')
// console.log($(this).children()) // console.log($(this).children())
let that = this let that = this
initvalue = 0 initvalue = 0
$('#canvas').show() // $('#canvas').show()
for (let i1 in arr) { for (let i1 in arr) {
await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1) await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1)
} }
...@@ -314,13 +318,16 @@ $('.b2')[0].onclick = function() { ...@@ -314,13 +318,16 @@ $('.b2')[0].onclick = function() {
twotable[$(this).attr('index')].value = $(this).val() twotable[$(this).attr('index')].value = $(this).val()
}) })
$('.ontablebody tr').click(async function() { $('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index') select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr") $(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr') $(this).addClass('select_tr')
// console.log($(this).children()) // console.log($(this).children())
let that = this let that = this
initvalue = 0 initvalue = 0
$('#canvas').show() // $('#canvas').show()
for (let i1 in arr1) { for (let i1 in arr1) {
await promise3(arr1[i1], $(this).attr('key'), $(this).attr('index'), i1) await promise3(arr1[i1], $(this).attr('key'), $(this).attr('index'), i1)
...@@ -542,6 +549,7 @@ function animate() { ...@@ -542,6 +549,7 @@ function animate() {
}) })
} else { } else {
console.log("111")
mixerarr.forEach((item) => { mixerarr.forEach((item) => {
item.mixer1.update(delta) item.mixer1.update(delta)
}) })
...@@ -573,7 +581,6 @@ function mxtime() { ...@@ -573,7 +581,6 @@ function mxtime() {
contentType: "application/json", contentType: "application/json",
data: JSON.stringify(variablearr), data: JSON.stringify(variablearr),
success: function(res) { success: function(res) {
console.log(oldvariablearr)
if (res.data.length !== 0) { if (res.data.length !== 0) {
res.data.forEach((item) => { res.data.forEach((item) => {
onetable.forEach((item1) => { onetable.forEach((item1) => {
...@@ -643,6 +650,9 @@ dragDrop.addEventListener("drop", function(e) { ...@@ -643,6 +650,9 @@ dragDrop.addEventListener("drop", function(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
//取消鼠标经过样式 //取消鼠标经过样式
if($('.b1')[0].innerText === '变量运行'){
return
}
$(this).removeClass("upload_drag_hover"); $(this).removeClass("upload_drag_hover");
//获取文件列表对象和文件相对路径 //获取文件列表对象和文件相对路径
var files = e.target.files || e.dataTransfer.files; var files = e.target.files || e.dataTransfer.files;
...@@ -713,6 +723,7 @@ function animate1() { ...@@ -713,6 +723,7 @@ function animate1() {
function promise1(a, b, c, d) { function promise1(a, b, c, d) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
loader.load('models/gltf/打簧机/打簧机分模型/' + a + '.glb', function(gltf) { loader.load('models/gltf/打簧机/打簧机分模型/' + a + '.glb', function(gltf) {
if(scene1.children.length !== arr.length){
if (a == 'a') { if (a == 'a') {
scene1.traverse((child) => { scene1.traverse((child) => {
if (child.material) { if (child.material) {
...@@ -730,8 +741,13 @@ function promise1(a, b, c, d) { ...@@ -730,8 +741,13 @@ function promise1(a, b, c, d) {
const model1 = gltf.scene const model1 = gltf.scene
model1.scale.set(2.6, 1.3, 2.6) model1.scale.set(2.6, 1.3, 2.6)
scene1.add(model1) scene1.add(model1)
}
// const model1 = gltf.scene
// model1.scale.set(2.6, 1.3, 2.6)
// scene1.add(model1)
if (a == onetable[c].name) { if (a == onetable[c].name) {
mixer1 = new THREE.AnimationMixer(model1); mixer1 = new THREE.AnimationMixer(scene1.children[d]);
// mixer1 = new THREE.AnimationMixer(model1);
mixer1.clipAction(gltf.animations[b]).play() mixer1.clipAction(gltf.animations[b]).play()
animate1() animate1()
} }
...@@ -739,7 +755,7 @@ function promise1(a, b, c, d) { ...@@ -739,7 +755,7 @@ function promise1(a, b, c, d) {
}, async (xhr) => { }, async (xhr) => {
if ((xhr.loaded / xhr.total * 100) * (d / (arr.length - 1)) > initvalue) { if ((xhr.loaded / xhr.total * 100) * (d / (arr.length - 1)) > initvalue) {
initvalue = (xhr.loaded / xhr.total * 100) * (d / (arr.length - 1)) initvalue = (xhr.loaded / xhr.total * 100) * (d / (arr.length - 1))
await init(initvalue) await init(initvalue, scene1.children.length !== arr.length)
} }
}) })
}) })
...@@ -748,6 +764,7 @@ function promise1(a, b, c, d) { ...@@ -748,6 +764,7 @@ function promise1(a, b, c, d) {
function promise3(a, b, c, d) { function promise3(a, b, c, d) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
loader.load('models/gltf/绕线机/绕线机分模型/' + a + '.glb', function(gltf) { loader.load('models/gltf/绕线机/绕线机分模型/' + a + '.glb', function(gltf) {
if(scene1.children.length !== arr1.length){
if (a == 'aa') { if (a == 'aa') {
scene1.traverse((child) => { scene1.traverse((child) => {
if (child.material) { if (child.material) {
...@@ -763,8 +780,9 @@ function promise3(a, b, c, d) { ...@@ -763,8 +780,9 @@ function promise3(a, b, c, d) {
const model1 = gltf.scene const model1 = gltf.scene
model1.scale.set(2.6, 1.3, 2.6) model1.scale.set(2.6, 1.3, 2.6)
scene1.add(model1) scene1.add(model1)
}
if (a == twotable[c].name) { if (a == twotable[c].name) {
mixer1 = new THREE.AnimationMixer(model1); mixer1 = new THREE.AnimationMixer(scene1.children[d]);
mixer1.clipAction(gltf.animations[b]).play() mixer1.clipAction(gltf.animations[b]).play()
animate1() animate1()
} }
...@@ -772,7 +790,7 @@ function promise3(a, b, c, d) { ...@@ -772,7 +790,7 @@ function promise3(a, b, c, d) {
}, async (xhr) => { }, async (xhr) => {
if ((xhr.loaded / xhr.total * 100) * (d / (arr1.length - 1)) > initvalue) { if ((xhr.loaded / xhr.total * 100) * (d / (arr1.length - 1)) > initvalue) {
initvalue = (xhr.loaded / xhr.total * 100) * (d / (arr1.length - 1)) initvalue = (xhr.loaded / xhr.total * 100) * (d / (arr1.length - 1))
await init(initvalue) await init(initvalue, scene1.children.length !== arr1.length)
} }
}) })
}) })
...@@ -799,7 +817,7 @@ function allpromise(a, c) { ...@@ -799,7 +817,7 @@ function allpromise(a, c) {
animations animations
}) })
group2.add(model) group2.add(model)
if (localStorage.getItem('moxi1')) { if (localStorage.getItem('moxi1') && localStorage.getItem('b1') == '整体运行') {
group2.visible = false group2.visible = false
} else if ($('.b1')[0].innerText == '变量运行') { } else if ($('.b1')[0].innerText == '变量运行') {
group2.visible = true group2.visible = true
...@@ -921,7 +939,7 @@ function promise(a, c) { ...@@ -921,7 +939,7 @@ function promise(a, c) {
}) })
} }
group.add(model) group.add(model)
if (localStorage.getItem('moxi1')) { if (localStorage.getItem('moxi1') && localStorage.getItem('b1') === '整体运行') {
group.visible = true group.visible = true
} else { } else {
group.visible = false group.visible = false
...@@ -1008,12 +1026,15 @@ function promise2(a, c) { ...@@ -1008,12 +1026,15 @@ function promise2(a, c) {
twotable[$(this).attr('index')].value = $(this).val() twotable[$(this).attr('index')].value = $(this).val()
}) })
$('.ontablebody tr').click(async function() { $('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index') select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr") $(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr') $(this).addClass('select_tr')
let that = this let that = this
initvalue = 0 initvalue = 0
$('#canvas').show() // $('#canvas').show()
}) })
group1.add(model) group1.add(model)
if (localStorage.getItem('moxi2')) { if (localStorage.getItem('moxi2')) {
...@@ -1052,12 +1073,15 @@ $('input[type=radio][name=sex1]').change(function() { ...@@ -1052,12 +1073,15 @@ $('input[type=radio][name=sex1]').change(function() {
onetable[$(this).attr('index')].value = $(this).val() onetable[$(this).attr('index')].value = $(this).val()
}) })
$('.ontablebody tr').click(async function() { $('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index') select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr") $(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr') $(this).addClass('select_tr')
let that = this let that = this
initvalue = 0 initvalue = 0
$('#canvas').show() // $('#canvas').show()
for (let i1 in arr) { for (let i1 in arr) {
await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1) await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1)
} }
...@@ -1078,12 +1102,15 @@ $('input[type=radio][name=sex1]').change(function() { ...@@ -1078,12 +1102,15 @@ $('input[type=radio][name=sex1]').change(function() {
twotable[$(this).attr('index')].value = $(this).val() twotable[$(this).attr('index')].value = $(this).val()
}) })
$('.ontablebody tr').click(async function() { $('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index') select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr") $(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr') $(this).addClass('select_tr')
let that = this let that = this
initvalue = 0 initvalue = 0
$('#canvas').show() // $('#canvas').show()
for (let i1 in arr1) { for (let i1 in arr1) {
await promise3(arr1[i1], $(this).attr('key'), $(this).attr('index'), i1) await promise3(arr1[i1], $(this).attr('key'), $(this).attr('index'), i1)
...@@ -1103,6 +1130,7 @@ renderer1.outputEncoding = THREE.sRGBEncoding; ...@@ -1103,6 +1130,7 @@ renderer1.outputEncoding = THREE.sRGBEncoding;
container1.appendChild(renderer1.domElement); container1.appendChild(renderer1.domElement);
const pmremGenerator1 = new THREE.PMREMGenerator(renderer1); const pmremGenerator1 = new THREE.PMREMGenerator(renderer1);
const scene1 = new THREE.Scene(); const scene1 = new THREE.Scene();
window.scenen1 = scene1
scene1.background = new THREE.Color(0x0C1C38); scene1.background = new THREE.Color(0x0C1C38);
scene1.environment = pmremGenerator1.fromScene(new RoomEnvironment(), 0.04).texture; scene1.environment = pmremGenerator1.fromScene(new RoomEnvironment(), 0.04).texture;
const camera1 = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100); const camera1 = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);
...@@ -1111,7 +1139,7 @@ const controls1 = new OrbitControls(camera1, renderer1.domElement); ...@@ -1111,7 +1139,7 @@ const controls1 = new OrbitControls(camera1, renderer1.domElement);
controls1.target.set(0, 0.5, 0); controls1.target.set(0, 0.5, 0);
controls1.update(); controls1.update();
controls1.enablePan = true; controls1.enablePan = true;
controls1.enableDamping = true; // controls1.enableDamping = true;
$('.cancel')[0].onclick = function() { $('.cancel')[0].onclick = function() {
$('.cyxPopup').hide() $('.cyxPopup').hide()
mxtime() mxtime()
...@@ -1163,6 +1191,7 @@ $('.search')[0].onclick = function() { ...@@ -1163,6 +1191,7 @@ $('.search')[0].onclick = function() {
}) })
console.log(select)
$('.twotablebody tr').click(async function() { $('.twotablebody tr').click(async function() {
if (select !== '没有选中') { if (select !== '没有选中') {
if ($('#radio2').prop('checked')) { if ($('#radio2').prop('checked')) {
...@@ -1223,6 +1252,7 @@ function getold() { ...@@ -1223,6 +1252,7 @@ function getold() {
} }
function tb(a, b) { function tb(a, b) {
console.log(a, b)
a.forEach((item) => { a.forEach((item) => {
if (item.name == '图片' && item.variable !== '配置变量') { if (item.name == '图片' && item.variable !== '配置变量') {
variablearr.push(item.variable) variablearr.push(item.variable)
......
new_file.js
View file @ ccc4783e
//判断是否支持canvaas
//判断是否支持canvaas function isSupportCanvas(canvas) {
function isSupportCanvas(canvas) {
return !!(canvas.getContext && canvas.getContext("2d")); return !!(canvas.getContext && canvas.getContext("2d"));
} }
//requestAnimationFrame会自动使用最优的帧率进行渲染 //requestAnimationFrame会自动使用最优的帧率进行渲染
function setupRAF() { function setupRAF() {
window.lastTime = 0; window.lastTime = 0;
//兼容各个浏览器，Internet Explorer11、Google Chrome(Microsoft Edge)、Mozilla Firefox、Opera //兼容各个浏览器，Internet Explorer11、Google Chrome(Microsoft Edge)、Mozilla Firefox、Opera
var vendors = ["ms", "moz", "webkit", "o"]; var vendors = ["ms", "moz", "webkit", "o"];
for(var i=0; i<vendors.length; i++) { for (var i = 0; i < vendors.length; i++) {
window.requestAnimationFrame = window[vendors[i] + "RequestAnimationFrame"]; window.requestAnimationFrame = window[vendors[i] + "RequestAnimationFrame"];
window.cancelAnimationFrame = window[vendors[i] + "CancelAnimationFrame"] || window[vendors[i] + "CancelRequestAnimationFrame"]; window.cancelAnimationFrame =
window[vendors[i] + "CancelAnimationFrame"] ||
window[vendors[i] + "CancelRequestAnimationFrame"];
//测试浏览器支持哪一张 //测试浏览器支持哪一张
if(window.requestAnimationFrame) { if (window.requestAnimationFrame) {
console.log(vendors[i] + "requestAnimationFrame"); console.log(vendors[i] + "requestAnimationFrame");
} }
if(window[vendors[i] + "CancelAnimationFrame"]) { if (window[vendors[i] + "CancelAnimationFrame"]) {
console.log(vendors[i] + "CancelAnimationFrame"); console.log(vendors[i] + "CancelAnimationFrame");
} }
if(window[vendors[i] + "CancelRequestAnimationFrame"]) { if (window[vendors[i] + "CancelRequestAnimationFrame"]) {
console.log(vendors[i] + "CancelRequestAnimationFrame"); console.log(vendors[i] + "CancelRequestAnimationFrame");
} }
} }
//回退机制 //回退机制
if(!window.requestAnimationFrame) { if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) { window.requestAnimationFrame = function (callback, element) {
var currentTime = new Date().getTime(); var currentTime = new Date().getTime();
var timeToCall = Math.max(0, 16-(currentTime-window.lastTime)); var timeToCall = Math.max(0, 16 - (currentTime - window.lastTime));
var callTime = currentTime + timeToCall; var callTime = currentTime + timeToCall;
var id = window.setTimeout(function() { var id = window.setTimeout(function () {
callback(callTime); callback(callTime);
}, timeToCall); }, timeToCall);
window.lastTime = callTime; window.lastTime = callTime;
...@@ -41,42 +42,42 @@ ...@@ -41,42 +42,42 @@
} }
//回退机制 //回退机制
if(!window.cancelAnimationFrame) { if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) { window.cancelAnimationFrame = function (id) {
clearTimeout(id); clearTimeout(id);
};
} }
} }
}
//在[min, max]中随机取一个数 //在[min, max]中随机取一个数
function rand(min, max) { function rand(min, max) {
return Math.random() * (max - min + 1) + min; return Math.random() * (max - min + 1) + min;
} }
//判断两碰撞盒是否相交 //判断两碰撞盒是否相交
function isHit(x1, y1, w1, h1, x2, y2, w2, h2) { function isHit(x1, y1, w1, h1, x2, y2, w2, h2) {
return !( x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < h2 || y2 + h2 < h1); return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < h2 || y2 + h2 < h1);
} }
//判断点是否在指定区域内 //判断点是否在指定区域内
function isInRect(x, y, rx, ry, rw, rh) { function isInRect(x, y, rx, ry, rw, rh) {
return !(x < rx || x > rx + rw || y < ry || y > ry + rh); return !(x < rx || x > rx + rw || y < ry || y > ry + rh);
} }
//将数限制在某个范围之内 //将数限制在某个范围之内
function limit(value, min, max) { function limit(value, min, max) {
if(value < min) { if (value < min) {
return min; return min;
} else if(value > max) { } else if (value > max) {
return max; return max;
} }
return value; return value;
} }
var CanvasController = function(canvas) { var CanvasController = function (canvas) {
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
//进度条对象 //进度条对象
var Loader = function(data=0,max=30) { var Loader = function (data = 0, max = 30) {
//进度条宽度 //进度条宽度
this.width = canvas.width - 80; this.width = canvas.width - 80;
//进度条高度 //进度条高度
...@@ -86,7 +87,11 @@ ...@@ -86,7 +87,11 @@
//进度条Y坐标 //进度条Y坐标
this.y = (canvas.height - this.height) / 2; this.y = (canvas.height - this.height) / 2;
//进度条当前值 //进度条当前值
this.value = Number(localStorage.getItem("value"))>Number(localStorage.getItem("value1"))?Number(localStorage.getItem("value")):Number(localStorage.getItem("value1")); this.value =
Number(localStorage.getItem("value")) >
Number(localStorage.getItem("value1"))
? Number(localStorage.getItem("value"))
: Number(localStorage.getItem("value1"));
//进度条最大值 //进度条最大值
this.maxValue = max; this.maxValue = max;
//进度条更新速度 //进度条更新速度
...@@ -100,117 +105,132 @@ ...@@ -100,117 +105,132 @@
this.hueEnd = 360; this.hueEnd = 360;
//获取当前值对应的X坐标 //获取当前值对应的X坐标
this.currentPosX = function() { this.currentPosX = function () {
return this.x + this.width * this.value / 100; return this.x + (this.width * this.value) / 100;
} };
console.log('asdsad') console.log("asdsad");
//更新进度条 //更新进度条
this.update = function(a,b,c) { this.update = function (a, b, c) {
$('#canvas').show() $("#canvas").show();
$('#cover').show() $("#cover").show();
this.value += this.speed; this.value += this.speed;
localStorage.setItem('value1',this.value) localStorage.setItem("value1", this.value);
if(this.value >= 100){ if (this.value >= 100) {
this.value = 100 this.value = 100;
c() c();
$('#canvas').hide() $("#canvas").hide();
$('#cover').hide() $("#cover").hide();
localStorage.setItem('value',0) localStorage.setItem("value", 0);
localStorage.setItem('value1',0) localStorage.setItem("value1", 0);
}else if(this.value > this.maxValue) { } else if (this.value > this.maxValue) {
this.value = this.maxValue; this.value = this.maxValue;
localStorage.setItem('value',this.maxValue) localStorage.setItem("value", this.maxValue);
c() c();
}
} }
};
//渲染进度条 //渲染进度条
this.render = function() { this.render = function () {
ctx.globalCompositeOperation = "source-over"; ctx.globalCompositeOperation = "source-over";
var currentWidth = this.width * this.value / 100; var currentWidth = (this.width * this.value) / 100;
this.hue = this.hueStart + (this.hueEnd - this.hueStart) * this.value / 100; this.hue =
this.hueStart + ((this.hueEnd - this.hueStart) * this.value) / 100;
//ctx.fillStyle = "hsl(" + this.hue + ", 100%, 40%)"; //ctx.fillStyle = "hsl(" + this.hue + ", 100%, 40%)";
var linearGradient = ctx.createLinearGradient(this.x, this.y, this.x + currentWidth, this.y); var linearGradient = ctx.createLinearGradient(
this.x,
this.y,
this.x + currentWidth,
this.y
);
linearGradient.addColorStop(0, "hsl(" + this.hueStart + ", 100%, 40%)"); linearGradient.addColorStop(0, "hsl(" + this.hueStart + ", 100%, 40%)");
linearGradient.addColorStop(1, "hsl(" + this.hue + ", 100%, 40%)"); linearGradient.addColorStop(1, "hsl(" + this.hue + ", 100%, 40%)");
ctx.fillStyle = linearGradient; ctx.fillStyle = linearGradient;
ctx.fillRect(this.x, this.y, currentWidth, this.height); ctx.fillRect(this.x, this.y, currentWidth, this.height);
ctx.fillStyle = this.lighterColor; ctx.fillStyle = this.lighterColor;
ctx.globalCompositeOperation = "lighter"; ctx.globalCompositeOperation = "lighter";
ctx.fillRect(this.x, this.y, currentWidth, this.height/2); ctx.fillRect(this.x, this.y, currentWidth, this.height / 2);
} };
} };
//单个粒子对象 //单个粒子对象
var Particle = function(x, y, hue, minX, maxX) { var Particle = function (x, y, hue, minX, maxX) {
//粒子的X坐标 //粒子的X坐标
this.x = x; this.x = x;
//粒子的Y坐标 //粒子的Y坐标
this.y = y; this.y = y;
//粒子的宽度 //粒子的宽度
this.width = rand(1,3); this.width = rand(1, 3);
//粒子的高度 //粒子的高度
this.height = rand(1,2); this.height = rand(1, 2);
//粒子的HSL颜色的hue分量 //粒子的HSL颜色的hue分量
this.hue = limit(hue + rand(-15,15), 0, 360); this.hue = limit(hue + rand(-15, 15), 0, 360);
//粒子在X方向上的速度 //粒子在X方向上的速度
this.velocityX = rand(-1,1); this.velocityX = rand(-1, 1);
//粒子在Y方向上的速度 //粒子在Y方向上的速度
this.velocityY = rand(-30,-20); this.velocityY = rand(-30, -20);
//粒子在X方向上的加速度 //粒子在X方向上的加速度
this.accelerationX = -.5; this.accelerationX = -0.5;
//粒子在Y方向上的加速度 //粒子在Y方向上的加速度
this.accelerationY = 4; this.accelerationY = 4;
//单位时间 //单位时间
this.unitTime = .2; this.unitTime = 0.2;
//更新粒子位置 //更新粒子位置
this.update = function() { this.update = function () {
this.x += (this.velocityX * this.unitTime); this.x += this.velocityX * this.unitTime;
this.y += (this.velocityY * this.unitTime); this.y += this.velocityY * this.unitTime;
this.velocityX += (this.accelerationX * this.unitTime * rand(-1,1)); this.velocityX += this.accelerationX * this.unitTime * rand(-1, 1);
this.velocityY += (this.accelerationY * this.unitTime); this.velocityY += this.accelerationY * this.unitTime;
} };
//渲染粒子 //渲染粒子
this.render = function() { this.render = function () {
ctx.fillStyle = "hsl(" + this.hue + ", 100%, 40%)" ctx.fillStyle = "hsl(" + this.hue + ", 100%, 40%)";
ctx.globalCompositeOperation = "source-over"; ctx.globalCompositeOperation = "source-over";
ctx.fillRect(this.x, this.y, this.width, this.height); ctx.fillRect(this.x, this.y, this.width, this.height);
} };
} };
//所有粒子效果的对象 //所有粒子效果的对象
var Particles = function(minX, maxX) { var Particles = function (minX, maxX) {
//存放生成的所有粒子对象 //存放生成的所有粒子对象
this.values = []; this.values = [];
//粒子生成速率 //粒子生成速率
this.rate = 3; this.rate = 3;
//生成粒子 //生成粒子
this.generate = function(x, y, hue) { this.generate = function (x, y, hue) {
for(var i=0; i<this.rate; i++) { for (var i = 0; i < this.rate; i++) {
this.values.push(new Particle(x, y, hue, minX, maxX)); this.values.push(new Particle(x, y, hue, minX, maxX));
} }
} };
//更新进度值 // 更新进度值
this.update = function() { this.update = function () {
for(var i = this.values.length-1; i >= 0; i--) { for (var i = this.values.length - 1; i >= 0; i--) {
this.values[i].update(); this.values[i].update();
if(!isInRect(this.values[i].x, this.values[i].y, 0, 0, canvas.width, canvas.height)) { if (
!isInRect(
this.values[i].x,
this.values[i].y,
0,
0,
canvas.width,
canvas.height
)
) {
this.values.splice(i, 1); this.values.splice(i, 1);
} }
} }
} };
//渲染进度条 //渲染进度条
this.render = function() { this.render = function () {
for(var i =0; i<this.values.length; i++) { for (var i = 0; i < this.values.length; i++) {
this.values[i].render(); this.values[i].render();
} }
} };
} };
//清空画布 //清空画布
function clearCanvas() { function clearCanvas() {
...@@ -220,32 +240,40 @@ ...@@ -220,32 +240,40 @@
} }
//初始化函数 //初始化函数
this.init = function(data=0,max,resolve) { this.init = function (data = 0, needLoad, max, resolve) {
console.log("----------------------------------------",data, needLoad, max)
var loader = new Loader(); var loader = new Loader();
console.log(loader.x) console.log(loader.x);
console.log(loader.currentPosX()-3, loader.y + loader.height/2, loader.hue) console.log(
loader.currentPosX() - 3,
loader.y + loader.height / 2,
loader.hue
);
var particles = new Particles(loader.x, loader.x + loader.width); var particles = new Particles(loader.x, loader.x + loader.width);
loader.maxValue = data loader.maxValue = data;
var loop = function(data,max) { var loop = function (data, max) {
requestAnimationFrame(loop, canvas); requestAnimationFrame(loop, canvas);
clearCanvas(); clearCanvas();
loader.update(data,max,resolve); if(needLoad){
loader.update(data, max, resolve);
loader.render(); loader.render();
particles.generate(loader.currentPosX()-3, loader.y + loader.height/2, loader.hue); particles.generate(
loader.currentPosX() - 3,
loader.y + loader.height / 2,
loader.hue
);
particles.update(); particles.update();
particles.render(); particles.render();
} }
};
loop(); loop();
} };
} };
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
var canvasController = new CanvasController(canvas); var canvasController = new CanvasController(canvas);
localStorage.setItem("value",0) localStorage.setItem("value", 0);
function init(data,max) { function init(data, needLoad, max) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
canvasController.init(data,max,resolve); canvasController.init(data, needLoad, max, resolve);
}) });
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment