-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
117 lines (105 loc) · 6.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<title>Three.js OBJ viewer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<LINK rel="stylesheet" href="meshviewer.css" type="text/css">
<LINK rel="stylesheet" href="lib/jquery-ui/jquery-ui.min.css" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<div id="leftMenu">
<div id="info">
<a href="javascript:jQuery('#viewer').empty()">Three.js OBJ viewer</a>
</div>
<ul>Exemples OBJ :
<li><a href="javascript:meshviewer({'meshFile' : 'examples/cow/mesh.obj','mtlFile' : 'examples/cow/mesh.mtl', 'container':'#viewer', 'format':'obj'})">Cow</a></li>
<li><a href="javascript:meshviewer({'meshFile' : 'examples/rivergod/mesh.obj','mtlFile' : 'examples/rivergod/mesh.mtl', 'container':'#viewer', 'format':'obj'})">RiverGod</a></li>
<li><a href="javascript:meshviewer({'meshFile' : 'examples/santiago/mesh.obj','mtlFile' : 'examples/santiago/mesh.mtl', 'container':'#viewer', 'format':'obj'})">Santiago</a></li>
<li><a href="javascript:meshviewer({'meshFile' : 'examples/mask/mesh.obj','mtlFile' : 'examples/mask/mesh.mtl', 'container':'#viewer', 'format':'obj'})">IndianMask</a></li>
<li><a href="javascript:meshviewer({'meshFile' : 'examples/maya/mesh.obj','mtlFile' : 'examples/maya/mesh.mtl', 'container':'#viewer', 'format':'obj'})">Maya</a></li>
<li><a href="javascript:meshviewer({'meshFile' : 'examples/head/sculpt.obj','mtlFile' : 'examples/head/sculpt.mtl', 'container':'#viewer', 'format':'obj'})">Head</a></li>
<li><a href="javascript:meshviewer({'meshFile' : 'examples/egyptian/sculpt.obj','mtlFile' : 'examples/egyptian/Autodesk123DSculpt.mtl', 'container':'#viewer', 'format':'obj'})">Egyptian</a></li>
<li><a href="javascript:meshviewer({'meshFile' : 'examples/pharaoh/sculpt.obj','mtlFile' : 'examples/pharaoh/Autodesk123DSculpt.mtl', 'container':'#viewer', 'format':'obj'})">Pharaoh</a></li>
</ul>
<ul>Exemples UTF8
<li><a href="javascript:meshviewer({'meshFile' : 'examples/cow/mesh.js','mtlFile' : '', 'container':'#viewer', 'format':'utf8'})">Cow</a></li>
<li><a href="javascript:meshviewer({'meshFile' : 'examples/head/sculpt.js','mtlFile' : '', 'container':'#viewer', 'format':'utf8'})">Head</a></li>
</ul>
</div>
<div id="mainViewer">
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/jquery-ui/jquery-ui.min.js"></script>
<script src="lib/threejs/three.min.js"></script>
<script src="lib/threejs/loaders/BinaryLoader.js"></script>
<script src="lib/threejs/loaders/MTLLoader.js"></script>
<script src="lib/threejs/loaders/OBJMTLLoader.js"></script>
<script src="lib/threejs/loaders/UTF8Loader.js"></script>
<script src="lib/threejs/loaders/ctm/lzma.js"></script>
<script src="lib/threejs/loaders/ctm/CTMLoader.js"></script>
<script src="lib/threejs/Detector.js"></script>
<script src="lib/threejs/TrackballControls.js"></script>
<script src="lib/threejs/libs/stats.min.js"></script>
<script id="objectView" src="meshviewer.js"></script>
<div id="viewer"></div>
<div id="progress"></div>
<div id="timer"></div>
<div id="weight"></div>
<div id="buttons">
<div id="face-buttons">
<div class="buttons-header">VIEW</div>
<div class="buttons-detail">
<div id="face-buttons-table">
<div class="face-button" id="face-button-1"></div>
<div class="face-button" id="face-button-2" onclick="javascript:showTop()"></div>
<div class="face-button" id="face-button-3"></div>
<div class="clearfix"></div>
<div class="face-button" id="face-button-4" onclick="javascript:showLeft()"></div>
<div class="face-button" id="face-button-5" onclick="javascript:showFront()"></div>
<div class="face-button" id="face-button-6" onclick="javascript:showRight()"></div>
<div class="clearfix"></div>
<div class="face-button" id="face-button-7"></div>
<div class="face-button" id="face-button-8" onclick="javascript:showBottom()"></div>
<div class="face-button" id="face-button-9" onclick="javascript:showBack()"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div id="advanced-buttons">
<div class="buttons-header">ADVANCED</div>
<div class="buttons-detail">
<p>ROTATE</p>
<div id="rotate-buttons">
<div id="sphere-button-1" class="sphere-button" onclick="javascript:rotateLeft()"></div>
<div id="sphere-button-2" class="sphere-button" onclick="javascript:rotateRight()"></div>
<div class="clearfix"></div>
</div>
<div id="pan-buttons">
<p>PAN</p>
<img src="assets/icons/24/square_empty_icon&24.png" /><img src="assets/icons/24/sq_br_up_icon&24.png" onclick="javascript:translateUp()"/><br/>
<img src="assets/icons/24/sq_br_prev_icon&24.png" onclick="javascript:translateLeft()"/><img src="assets/icons/24/square_shape_icon&24.png" onclick="javascript:translateReset()"/><img src="assets/icons/24/sq_br_next_icon&24.png" onclick="javascript:translateRight()"/><br/>
<img src="assets/icons/24/square_empty_icon&24.png" /><img src="assets/icons/24/sq_br_down_icon&24.png" onclick="javascript:translateDown()"/><br/>
</div>
<div id="zoom-buttons">
<P>ZOOM</P>
<img src="assets/icons/24/sq_minus_icon&24.png" onclick="javascript:zoomOut()"/>
<img src="assets/icons/24/sq_plus_icon&24.png" onclick="javascript:zoomIn()" /><br/>
</div>
<div id="advanced-toggler-buttons">
<P>TOGGLERS</P>
<a href="javascript:scene.add(axes);">AXIS ON</a>
<a href="javascript:scene.remove(axes);">AXIS OFF</a><br/>
<a href="javascript:scene.add(boundingbox);">BBOX ON</a>
<a href="javascript:scene.remove(boundingbox);">BBOX OFF</a><br/>
<a href="javascript:addPlinth();">PLINTH ON</a>
<a href="javascript:removePlinth();">PLINTH OFF</a><br/>
<a href="javascript:rotateOn();">ROTATE ON</a>
<a href="javascript:rotateOff();">ROTATE OFF</a>
</div>
</div>
</div>
</div>
</body>
</html>