<!doctype html>
|
<html>
|
<head>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
<title>模型预览</title>
|
|
<script src="js/jquery.min.js"></script>
|
<script src="js/jqueryUI.js"></script>
|
<link rel="stylesheet" href="css/jquery-ui.css" />
|
|
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet" />
|
<link rel="shortcut icon" href="favicon.ico" />
|
|
<link rel="stylesheet" href="css/spectrum.css" />
|
<link rel="stylesheet" href="css/font-awesome.min.css" />
|
|
<link rel="stylesheet" href="css/main_style.css" />
|
|
<!--Three.js scripts-->
|
<script src="js/three.js"></script>
|
|
<script src="js/Projector.js"></script>
|
<script src="js/Detector.js"></script>
|
|
<script src="js/loaders/MTLLoader.js"></script>
|
<script src="js/loaders/OBJLoader.js"></script>
|
<script src="js/loaders/ColladaLoader.js"></script>
|
<script src="js/loaders/inflate.min.js"></script>
|
<script src="js/loaders/FBXLoader.js"></script>
|
<script src="js/loaders/GLTFLoader.js"></script>
|
<script src="js/loaders/STLLoader.js"></script>
|
<script src="js/loaders/DDSLoader.js"></script>
|
|
<script src="js/OrbitControls.js"></script>
|
<script src="js/TransformControls.js"></script>
|
|
<script src="js/THREEx.FullScreen.js"></script>
|
<script src="js/THREEx.WindowResize.js"></script>
|
<script src="js/screenfull.min.js"></script>
|
|
<!--Post-Processing-->
|
<script src="js/effects/EffectComposer.js"></script>
|
<script src="js/effects/ShaderPass.js"></script>
|
<script src="js/effects/RenderPass.js"></script>
|
<script src="js/effects/CopyShader.js"></script>
|
<script src="js/effects/OutlinePass.js"></script>
|
<script src="js/effects/FXAAShader.js"></script>
|
|
<script src="js/jquery.nicescroll.js"></script>
|
<script src="js/spectrum.js"></script>
|
|
<meta
|
name="viewport"
|
charset="UTF-8"
|
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
|
/>
|
|
<script>
|
$(function () {
|
$('#red, #green, #blue, #ambient_red, #ambient_green, #ambient_blue').slider({
|
orientation: 'horizontal',
|
range: 'min',
|
max: 255,
|
value: 127 //Default value, Light colour of model set to median value (grey colour)
|
})
|
})
|
</script>
|
|
<script id="vertexShader" type="x-shader/x-vertex">
|
uniform float p;
|
varying float intensity;
|
void main()
|
{
|
vec3 vNormal = normalize( normalMatrix * normal );
|
intensity = pow(1.0 - abs(dot(vNormal, vec3(0, 0, 1))), p);
|
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
}
|
</script>
|
|
<script id="fragmentShader" type="x-shader/x-vertex">
|
uniform vec3 glowColor;
|
varying float intensity;
|
void main()
|
{
|
vec3 glow = glowColor * intensity;
|
gl_FragColor = vec4( glow, 1.0 );
|
}
|
</script>
|
|
<script>
|
$(document).ready(function () {
|
$('#load_help')
|
.dialog({
|
autoOpen: false,
|
width: 667
|
})
|
.css('font-size', '16px')
|
|
$('.qBtn').click(function () {
|
$('#load_help').dialog('open')
|
})
|
})
|
</script>
|
</head>
|
|
<body>
|
<div id="container">
|
<div id="stats" style="display: none"></div>
|
<button id="collapse_side" style="display: none" title="Collapse Side Menu">←</button>
|
<!-- <button id="collapse_btm" title="Collapse Bottom Menu">↓</button> -->
|
|
<!--Side Menu Start-->
|
<div style="display: none" id="customSlide" class="side_menu">
|
<ul class="menu_item">
|
<li id="header">
|
<table style="width: 100%">
|
<tr>
|
<th style="font-size: 15px">主题</th>
|
<th style="font-size: 11px"><button id="lightSkin">明亮</button></th>
|
<th style="font-size: 11px"><button id="darkSkin">暗黑</button></th>
|
</tr>
|
</table>
|
</li>
|
|
<li class="dropdown">
|
<a href="#"><img src="images/dir_light_icon.png" class="image" /> 灯光</a>
|
<ul>
|
<div class="customMenu">
|
<li style="margin: 15px 0"><span>环境光</span></li>
|
<li>
|
<label class="switch">
|
<input class="check" type="checkbox" id="ambient_light" />
|
<span class="toggle round"></span>
|
</label>
|
</li>
|
</div>
|
<li><span style="font-size: 12px">R</span></li>
|
<li><div id="ambient_red"></div></li>
|
<li><span style="font-size: 12px">G</span></li>
|
<li><div id="ambient_green"></div></li>
|
<li><span style="font-size: 12px">B</span></li>
|
<li><div id="ambient_blue"></div></li>
|
|
<li><hr style="margin-top: 15px" /></li>
|
<li style="margin: 15px 0">定向光</li>
|
<li><span style="font-size: 12px">R</span></li>
|
<li><div id="red"></div></li>
|
<li><span style="font-size: 12px">G</span></li>
|
<li><div id="green"></div></li>
|
<li><span style="font-size: 12px">B</span></li>
|
<li><div id="blue"></div></li>
|
|
<li><hr style="margin-top: 15px" /></li>
|
<li style="margin: 15px 0">点光源</li>
|
<li style="margin: 15px 0"><span style="font-size: 12px">强度</span></li>
|
<li style="margin: 15px 0"><div id="point_light"></div></li>
|
</ul>
|
</li>
|
|
<li class="dropdown">
|
<a href="#"><img src="images/wireframe_cube.png" class="image" />线框视图</a>
|
<ul>
|
<div class="customMenu">
|
<li style="margin: 15px 0"><span>线框</span></li>
|
<li>
|
<label class="switch">
|
<input class="check" type="checkbox" name="mod_mat" id="wire_check" />
|
<span class="toggle round"></span>
|
</label>
|
</li>
|
</div>
|
<div class="customMenu">
|
<li><span>模型 + 线框</span></li>
|
<li>
|
<label class="switch">
|
<input class="check" type="checkbox" name="mod_mat" id="model_wire" />
|
<span class="toggle round"></span>
|
</label>
|
</li>
|
</div>
|
</ul>
|
</li>
|
|
<!-- <li class="dropdown">
|
<a href="#"><img src="images/phong_icon.png" class="image" />Phong Shading</a>
|
<ul>
|
<li><span>Phong Shading </span></li>
|
|
<li>
|
<label class="switch">
|
<input class="check" type="checkbox" name="mod_phong" id="phong_check" />
|
<span class="toggle round"></span>
|
</label>
|
</li>
|
|
<li><span style="font-size: 12px">Shininess</span></li>
|
<li><div id="shine"></div></li>
|
</ul>
|
</li> -->
|
|
<li class="dropdown">
|
<a href="#"><img src="images/XRay.png" class="image" />X 射线</a>
|
<ul>
|
<div style="margin: 10px 0" class="customMenu">
|
<li><span>X 射线 </span></li>
|
<li>
|
<label class="switch">
|
<input class="check" type="checkbox" name="mod_xray" id="xray_check" />
|
<span class="toggle round"></span>
|
</label>
|
</li>
|
</div>
|
</ul>
|
</li>
|
|
<li class="dropdown">
|
<a href="#"
|
><img src="images/glowing.png" width="32" height="32" class="image" />发光轮廓</a
|
>
|
<ul>
|
<div style="margin: 10px 0" class="customMenu">
|
<li><span>发光轮廓</span></li>
|
<li>
|
<label class="switch">
|
<input class="check" type="checkbox" name="mod_mat" id="glow_check" />
|
<span class="toggle round"></span>
|
</label>
|
</li>
|
</div>
|
|
<li style="margin: 5px 0"><span style="font-size: 12px">边缘强度</span></li>
|
<li style="margin: 10px 0"><div id="edgeStrength"></div></li>
|
|
<div style="margin: 10px 0" class="customMenu">
|
<li><span>选择发光颜色 </span></li>
|
<li><input type="text" class="glow_select" /></li>
|
<!-- <li><em id="basic-log"></em></li> 展示所选的十六进制颜色 -->
|
</div>
|
</ul>
|
</li>
|
|
<li class="dropdown">
|
<a href="#"
|
><img src="images/smoothed.png" width="32" height="32" class="image" />平滑模型</a
|
>
|
<ul>
|
<div style="margin: 15px 0" class="customMenu">
|
<li><span id="smooth-model" style="font-size: 15px">光滑模型</span></li>
|
<li>
|
<label class="switch">
|
<input type="checkbox" id="smooth" />
|
<span class="toggle round"></span>
|
</label>
|
</li>
|
</div>
|
</ul>
|
</li>
|
|
<li class="dropdown">
|
<a href="#"><img src="images/colour_pick.png" class="image" />设置背景色</a>
|
<ul>
|
<div style="margin: 15px 0" class="customMenu">
|
<li><span>选择背景色</span></li>
|
<li><input type="text" class="bg_select" /></li>
|
</div>
|
<!-- <li><em id="basic_log"></em></li> 展示所选的十六进制颜色 -->
|
</ul>
|
</li>
|
|
<li class="dropdown">
|
<a href="#"><img src="images/rotation.png" class="image" />模型旋转</a>
|
<ul>
|
<div style="margin: 15px 0" class="customMenu">
|
<li style="display: inline-block; margin: 0 35px 0 0"><span>自动旋转</span></li>
|
<li>
|
<label class="switch">
|
<input type="checkbox" id="rotation" />
|
<span class="toggle round"></span>
|
</label>
|
</li>
|
</div>
|
<li style="margin: 15px 0" style="display: inline-block">
|
<span>旋转速度</span>
|
<span style="margin: 5px 0" id="rot_slider"></span>
|
</li>
|
<!-- <li>Fix Rotation of Imported Models<hr style="margin-top:0px" /></li>
|
|
<li>
|
<div id="rotation">
|
<div class="radioBtn">
|
<input type="radio" id="r1" name="rotate" value="rotateX"> Rotate X
|
</div>
|
|
<div class="radioBtn">
|
<input type="radio" id="r2" name="rotate" value="rotateY"> Rotate Y
|
</div>
|
|
<div class="radioBtn">
|
<input type="radio" id="r3" name="rotate" value="rotateZ"> Rotate Z
|
</div>
|
</div>
|
</li> -->
|
|
<!-- <li><button class="resetRotateButton" type='reset' id="reset_rot">Reset</button></li> -->
|
</ul>
|
</li>
|
|
<li class="dropdown">
|
<a href="#"><img src="images/scale.png" class="image" />变换模型</a>
|
<ul>
|
<li style="margin: 15px 0; margin-left: 25px; font-size: 15px">
|
<label for="transform" class="customMenu">
|
附加变换控制:
|
<label class="switch helper">
|
<input type="checkbox" id="transform" />
|
<span class="toggle grid round"></span>
|
</label>
|
</label>
|
</li>
|
<li id="transformKey">快捷键: S: (Scale), T: (Translate), R: (Rotate)</li>
|
|
<li style="text-align: center; margin-top: 8px; font-size: 15px">
|
<span>放大:</span> <button
|
id="scale_up"
|
style="margin: 0 35px 0 0"
|
type="button"
|
>
|
+
|
</button>
|
<span>缩小:</span> <button id="scale_down" type="button">-</button>
|
</li>
|
</ul>
|
</li>
|
|
<li class="dropdown">
|
<a href="#"><img src="images/grid.png" class="image" />模型视图助手</a>
|
<ul style="font-size: 13.5px">
|
<li
|
style="
|
display: inline-flex;
|
line-height: 45px;
|
align-items: center;
|
margin: 0 25px 0 0;
|
"
|
>
|
<span style="font-size: 15px">网格</span>
|
<label class="switch helper">
|
<input type="checkbox" id="grid" />
|
<span class="toggle grid round"></span>
|
</label>
|
</li>
|
<li
|
style="
|
display: inline-flex;
|
line-height: 40px;
|
align-items: center;
|
margin: 0 25px 0 0;
|
"
|
>
|
<span style="font-size: 15px">极坐标网格</span>
|
<label class="switch helper">
|
<input type="checkbox" id="polar_grid" />
|
<span class="toggle grid round"></span>
|
</label>
|
</li>
|
<li
|
style="
|
display: inline-flex;
|
line-height: 40px;
|
align-items: center;
|
margin: 0 25px 0 0;
|
"
|
>
|
<span style="font-size: 15px">轴</span>
|
<label class="switch helper">
|
<input type="checkbox" id="axis" />
|
<span class="toggle grid round"></span>
|
</label>
|
</li>
|
<li
|
style="
|
display: inline-flex;
|
line-height: 40px;
|
align-items: center;
|
margin: 0 25px 0 0;
|
"
|
>
|
<span style="font-size: 15px">模型盒子</span>
|
<label class="switch helper">
|
<input type="checkbox" id="bBox" />
|
<span class="toggle grid round"></span>
|
</label>
|
</li>
|
</ul>
|
</li>
|
|
<!-- <li class='dropdown'>
|
<a href='#'><img src="images/folder_icon.png" class="image" />Select/Drop Model File</a>
|
<ul>
|
<li style="background: #d9d9f2; color: black; text-align: center">Select from button or drag and drop model onto the viewer</li>
|
|
<li style="margin-top: 12px; margin-bottom: 16px;">
|
<label for="obj_file" class="model-upload">
|
<i style="margin-right: 5px;" class="fa fa-upload"></i> Load Model
|
</label>
|
<button class="qBtn" id="q_btn" title="Model Loading Help"><i class="fa fa-question-circle q_mark"></i></button>
|
</li>
|
<li><input onclick="this.value=null;" type="file" id="obj_file" /></li>
|
|
<li style="margin-top: 12px; margin-bottom: 16px;">
|
<label for="modelPlusTexture" class="model-upload">
|
<i style="margin-right: 5px;" class="fa fa-upload"></i> Model and Textures
|
</label>
|
</li>
|
<li><input id="modelPlusTexture" type="file" name="files[]" multiple="" class="model-upload"></li>
|
|
<li><button type="button" id="remove"><i style="margin-right: 5px;" class="fa fa-trash"></i> Remove file</button></li>
|
<li><output id="result" /></li>
|
</ul>
|
</li> -->
|
</ul>
|
|
<!-- <div id="load_help" title="Loading Models">
|
<p>Locate the model file you wish to view. Textures/associated images of the model
|
are supported (.obj, .gltf, .fbx and .dae formats), make sure the images and model file are in the same folder
|
on your machine.
|
</p>
|
<h4>Supported File Types</h4>
|
<ul >
|
<li><span style="color: green">.obj (+ .mtl)</span></li>
|
<li><span style="color: green">.stl</span></li>
|
<li><span style="color: green">.dae (Collada)</span></li>
|
<li><span style="color: green">.glTF</span></li>
|
<li><span style="color: green">.FBX</span></li>
|
</ul>
|
<p>
|
<h4>Model Sizes</h4>
|
<hr />
|
Some Models may be out of view of the camera on load. Try to use the mouse wheel and the
|
scale up/scale down buttons to see if the model comes into view.
|
</p>
|
<p>
|
<h4>Object Rotation</h4>
|
<hr />
|
Some Models load with a different up axis, depending on the software used to create the model.
|
The model rotation section contains radio buttons to rotate the model in the x, y or z direction
|
in order to fix the orientation for viewing your model. Most often <b>X axis</b> rotation is the one required.
|
</p>
|
<p>
|
<h4>Model Loads in Black</h4>
|
<hr />
|
Some Models may load in black, try using the smooth model checkbox, to compute the vertex and face Normals.
|
</p>
|
</div> -->
|
|
<div id="disp_tmp_path"></div>
|
</div>
|
<!--Side Menu End-->
|
|
<!--Bottom Menu Start-->
|
<!-- <div id="bottom_menu">
|
<ul class="bottom_menu_item">
|
<li class="dropdown">
|
<a href="#"><img src="images/rotation.png" class="image" />Model Rotation</a>
|
<ul>
|
<li style="display: inline-block; margin: 0 35px 0 0"><span>Auto Rotate</span></li>
|
<li style="display: inline-block">
|
<span>Set Rotation Speed</span>
|
<span id="rot_slider"></span>
|
</li>
|
<li>
|
<label class="switch">
|
<input type="checkbox" id="rotation" />
|
<span class="toggle round"></span>
|
</label>
|
</li>
|
<li>Fix Rotation of Imported Models<hr style="margin-top:0px" /></li>
|
|
<li>
|
<div id="rotation">
|
<div class="radioBtn">
|
<input type="radio" id="r1" name="rotate" value="rotateX"> Rotate X
|
</div>
|
|
<div class="radioBtn">
|
<input type="radio" id="r2" name="rotate" value="rotateY"> Rotate Y
|
</div>
|
|
<div class="radioBtn">
|
<input type="radio" id="r3" name="rotate" value="rotateZ"> Rotate Z
|
</div>
|
</div>
|
</li>
|
|
<li><button class="resetRotateButton" type='reset' id="reset_rot">Reset</button></li>
|
</ul>
|
</li>
|
|
<li class="dropdown">
|
<a href="#"><img src="images/scale.png" class="image" />Transform Model</a>
|
<ul>
|
<li style="margin-left: 25px; font-size: 15px">
|
<label for="transform">
|
Attach Transform Controls:
|
<label class="switch helper">
|
<input type="checkbox" id="transform" />
|
<span class="toggle grid round"></span>
|
</label>
|
</label>
|
</li>
|
<li id="transformKey">Press S: (Scale), T: (Translate), R: (Rotate)</li>
|
|
<li style="text-align: center; margin-top: 8px; font-size: 15px">
|
<span>Scale Up:</span> <button
|
id="scale_up"
|
style="margin: 0 35px 0 0"
|
type="button"
|
>
|
+
|
</button>
|
<span>Scale Down:</span> <button id="scale_down" type="button">-</button>
|
</li>
|
</ul>
|
</li>
|
|
<li class="dropdown">
|
<a href="#"><img src="images/grid.png" class="image" />Model View Helpers</a>
|
<ul style="font-size: 13.5px">
|
<li style="display: inline-block; margin: 0 25px 0 0">
|
<span style="font-size: 18px">Grid</span>
|
<label class="switch helper">
|
<input type="checkbox" id="grid" />
|
<span class="toggle grid round"></span>
|
</label>
|
</li>
|
<li style="display: inline-block; margin: 0 25px 0 0">
|
<span style="font-size: 18px">Polar-grid</span>
|
<label class="switch helper">
|
<input type="checkbox" id="polar_grid" />
|
<span class="toggle grid round"></span>
|
</label>
|
</li>
|
<li style="display: inline-block; margin: 0 25px 0 0">
|
<span style="font-size: 18px">Axis</span>
|
<label class="switch helper">
|
<input type="checkbox" id="axis" />
|
<span class="toggle grid round"></span>
|
</label>
|
</li>
|
<li style="display: inline-block; margin: 0 25px 0 0">
|
<span style="font-size: 18px">Model Box</span>
|
<label class="switch helper">
|
<input type="checkbox" id="bBox" />
|
<span class="toggle grid round"></span>
|
</label>
|
</li>
|
</ul>
|
</li>
|
</ul>
|
</div> -->
|
<!--Bottom Menu End-->
|
|
<div id="main_viewer"></div>
|
|
<div id="fullscreen">
|
<button
|
id="fullscreenBtn"
|
title="Fullscreen Mode"
|
style="border: 0; float: right; background: transparent"
|
>
|
<img src="images/fullscreen.png" width="30" height="30" alt="fullscreen" />
|
</button>
|
</div>
|
|
<div id="sampleMods" style="display: none">
|
Models
|
<br />
|
<div class="select">
|
<select id="scenes_list" onchange="selectModel();">
|
<option>models</option>
|
<!-- <option>Crash Model (165 KB)</option> -->
|
<!-- <option>Bear Model (113 KB)</option>
|
<option>Car Model (1.33 MB)</option>
|
<option>Tiger Model (3.77 MB)</option>
|
<option>Dinosaur Model (5.07 MB)</option>
|
<option>Skeleton Model (5.52 MB)</option> -->
|
</select>
|
<br /><br />
|
</div>
|
</div>
|
|
<div id="anims">
|
<span>Select Animation</span>
|
<div class="select">
|
<select id="animationSelect"></select>
|
</div>
|
<br />
|
<button class="animBtn" id="play">Play</button>
|
<button class="animBtn" id="stop">Stop</button>
|
<button class="animBtn" id="playAll">Play All</button>
|
</div>
|
|
<script src="js/menu.js"></script>
|
<script src="js/utils.js"></script>
|
<script src="js/main.js"></script>
|
<script src="js/userModelTextures.js"></script>
|
<script src="js/userModel.js"></script>
|
</div>
|
<script src="js/ColourTheme.js"></script>
|
<script>
|
$(document).ready(function () {
|
$('html').niceScroll({ styler: 'fb', cursorcolor: '#000' })
|
$('#stats').niceScroll({ horizrailenabled: false })
|
})
|
</script>
|
</body>
|
</html>
|
