-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathImageCloud.html
123 lines (97 loc) · 3.06 KB
/
ImageCloud.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
118
119
120
121
122
123
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Image Cloud</title>
<meta charset="utf-8">
<script src="js/Three.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script src="js/AdditionalShadersCoffee.js"></script>
<script src="js/MeshArea.js"></script>
<script src="js/MeshAreaManager.js"></script>
<script src="js/JQuery.js"></script>
<script src="js/JQueryUI.js"></script>
<script src="js/Animator.js"></script>
<script src ="js/CloudCamera.js"></script>
<script src="js/Postpro.js"></script>
<script src="js/app.js"></script>
<link type="text/css" href="css/vader/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/JQuery.js"></script>
<script type="text/javascript" src="js/JQueryUI.js"></script>
<style type="text/css">
body {
background:#fff;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
}
.webgl{
position: absolute;
top:0;
left:0;
z-index:1;
}
.gui{
position: absolute;
top:0;
left:0;
z-index:2;
}
</style>
</head>
<body>
<div id="webgl_div" class="webgl"/>
<div id="gui" class="gui">
<form>
<div id="radio_dark_bright">
<input type="radio" id="radio1_dark" name="radio_dark_bright" value="dark"/><label for="radio1_dark">Dark Theme</label>
<input type="radio" id="radio2_bright" name="radio_dark_bright" value="bright" checked="checked"/><label for="radio2_bright">Bright Theme</label>
</div>
</form>
<form>
<div id="radio_dof">
<input type="radio" id="radio1_dofOff" name="radio_dof" value="off" checked="checked"/><label for="radio1_dofOff">DOF off</label>
<input type="radio" id="radio2_dofOn" name="radio_dof" value="on" /><label for="radio2_dofOn">DOF on</label>
</div>
</form>
<form>
<div id="check_autoMove">
<input type="checkbox" id="checkOff" name="check_autoMove" value="off"/><label for="checkOff">Auto-move</label>
</div>
</div>
<script type="text/javascript">
var cloudApp = new ImageCloudApp();
$(function() {
$( "#radio_dark_bright" ).buttonset();
$( "#radio_dof" ).buttonset();
$( "#check_autoMove" ).buttonset();
});
$( "#radio_dark_bright" ).offset( { top:window.innerHeight - 50, left: 0 } );
$( "#radio_dof" ).offset( { top:window.innerHeight - 72, left: window.innerWidth - 200 } );
$( "#check_autoMove" ).offset( { top:window.innerHeight - 100, left: window.innerWidth / 2 } );
$("input[name='check_autoMove']").change(function(){
cloudApp.toggleAutoMove();
});
$("input[name='radio_dark_bright']").change(function(){
if ($("input[name='radio_dark_bright']:checked").val() == 'dark')
{
cloudApp.setDarkTheme();
}
else
{
cloudApp.setBrightTheme();
}
});
$("input[name='radio_dof']").change(function(){
if ($("input[name='radio_dof']:checked").val() == 'on')
{
cloudApp.enableDOF( true );
}
else
{
cloudApp.enableDOF( false );
}
});
</script>
</body>
</html>