threejs使用
threejs的一个小demo
这是一个小得demo,应为要加载3D模型文件,所以用threejs加载了stl类型文件,如图
话不多说,直接上文件,请各位为大佬看过以后,帮忙处处注意,模型加载后如果不调整位置就存在模型视图不正确的情况,如下图
调整位置后又会出现后面调整模型的旋转角度出现问题。请大佬指教。js文档和STL文件等会儿我发资源包出来,文件免费下载链接
HTMLcode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3Dmodetest</title>
<style>
.bow_shadow {
width: 100%;
height: 100%;
}
.clear {
clear: both;
}
#timeSpan {
height: 5%;
}
#timeSpan > .lis {
float: left;
width: 10%;
min-width: 90px;
min-height: 20px;
height: 20px;
border-radius: 5px;
background-color: #95BB2F;
text-align: center;
cursor: pointer;
margin-left: 1%;
}
.titlebox {
width: 100%;
height: 95%;
}
.jpgBox {
display: inline-block;
position: relative;
width: 100%;
height: 95%;
min-height: 500px;
margin-top: 1%;
}
</style>
</head>
<body>
<div class="left car_center">
<div class="bow_shadow">
<ul id="timeSpan" class="clear" style="list-style: none;">
<li class="lis" style="list-style: none;" onclick="X_Z()">X_正向5°</li>
<li class="lis" style="list-style: none;" onclick="Y_Z()">Y_正向5°</li>
<li class="lis" style="list-style: none;" onclick="Z_Z()">Z_正向5°</li>
<li class="lis" style="list-style: none;" onclick="X_Z1()">X_反向5°</li>
<li class="lis" style="list-style: none;" onclick="Y_Z1()">Y_反向5°</li>
<li class="lis" style="list-style: none;" onclick="Z_Z1()">Z_反向5°</li>
</ul>
<div class="titlebox">
<div class="jpgBox" id="father">
<div id="Loading"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8" src="js/three.js"></script>
<script src="js/STLLoader.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/AsciiEffect.js"></script>
<script src="js/item.js"></script>
<script src="js/test.js"></script>
</body>
</html>