HTML
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>model_load</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
*{
margin:0;
padding:0;
}
#canvas_view {
width: 100%;
height: 80%;
cursor: pointer;
position: relative;
/*background-image:url(img/bg.png);*/
}
.box{
height: 20%;
background: #EDEDED;
display: flex;
}
.box div{
width: 50%;
height: 100%;
}
.box>.left>p{
margin:15px auto;
}
.box>.left{
border-right:1px solid #4D4D4D;
}
.box>.left>input{
display:block;margin:15px auto;
}
</style>
// 运行模型所需要的第三方 js 文件
<script src="js/threejs/three.js"></script>
<script src="js/threejs/Detector.js"></script>
<script src="js/threejs/stats.min.js"></script>
<script src="js/threejs/ColladaLoader.js"></script><!--3D模型加载器-->
<script src="js/threejs/DDSLoader.js"></script>
<script src="js/threejs/OrbitControls.js"></script>
<script src="js/threejs/VTKloader.js"></script>
<script src="js/threejs/TrackballControls.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body style="height: 100%;">
// 初始化 canvas
<div >
<div >请上传模型</div>
</div>
<div class="box">
<div class="left">
<p> 上传模型:</p>
<div class="model_box" style="width:90%;padding: 10px 20px;height: auto;">
<button class="model" style="display: none;"></button>
</div>
</div>
<div class="right" style="overflow: scroll">
<div class="bg_color_box" style="width: 100%;height:50px;background:lightcoral;display: flex;">
<div style="text-align: center;line-height: 50px;">设置背景颜色：</div>
<div style="line-height: 50px;text-align: left;">
<input type="color" class="bg_color" value="#c0c0c0">
</div>
</div>
<!--循环-->
<div class="show_element" style="width: 100%;display: none;">
<div style="border-bottom: 2px solid #ccc;width: 100%;height: 86px;display: flex;">
<div class="model_text" style="width: 100px;text-align: center;line-height: 86px;"></div>
<div >
<div style="width: 100%;height:45px;">
<div style="width: 100%;height:auto;padding:10px 0;display: flex;">
<span> 设置颜色： </span>
<input type="color" class="color" value="#400000" style="display: block;margin:0;">
</div>
</div>
<div style="width: 100%;height: 45px;">
<div style="width: 100%;height:auto;padding:10px 0;display: flex;">
<span> 设置透明度： </span>
<input type="range" class="range" value="80" style="background: red;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
//加载模型 构造函数的方法
<script src="resources/model.js"></script>
//初始化 调用 函数
<script src="resources/controller.js"></script>
</body>
</html>