-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (110 loc) · 5.87 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" sizes="180x180" href="asset/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="asset/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="asset/favicon/favicon-16x16.png">
<link rel="manifest" href="asset/favicon/site.webmanifest">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="ol3dc/css/openlive3d.css">
</head>
<body>
<!-- layout -->
<div class="vrm" id="divvrm">
<canvas class="foregroundeffect" id="foregroundeffect"></canvas>
<canvas class="vrm" id="canvas"></canvas>
<canvas class="backgroundeffect" id="backgroundeffect"></canvas>
</div>
<div class="bgimg" id="bgimg"></div>
<div class="w3-sidebar w3-animate-left" style="width:270px;background-color:#0006;display:none" id="thesidebar">
<div class="w3-bar-item" style="height:60px;color:#0000"> . </div>
<br/>
<button onclick="hideObj('vrmbox')" id="vrmboxbutton" class="w3-button w3-block w3-left-align w3-text-white"></button>
<div class="w3-bar-item w3-hide" id="vrmbox"></div>
<button onclick="hideObj('dbgbox')" id="videoctlbutton" class="w3-button w3-block w3-left-align w3-text-white"></button>
<div class="w3-bar-item w3-hide" style="background-color:#000a" id="dbgbox">
<select id="videoselect"></select>
<div class="w3-margin-left">
<input type="checkbox" id="dbgimcheck">
<label id="dbgimlabel" style="color:#fff"></label>
<text style="color:#0000"> . </text>
<input type="checkbox" id="dbglmcheck">
<label id="dbglmlabel" style="color:#fff"></label>
</div>
<canvas id="dbg"></canvas>
</div>
<button onclick="hideObj('effectbox')" id="effectboxbutton" class="w3-button w3-block w3-left-align w3-text-white"></button>
<div class="w3-bar-item w3-hide" id="effectbox"></div>
<button onclick="hideObj('confbox')" id="confboxbutton" class="w3-button w3-block w3-left-align w3-text-white"></button>
<div class="w3-bar-item w3-hide" id="confbox"></div>
<button onclick="hideObj('logbox')" id="logboxbutton" class="w3-button w3-block w3-left-align w3-text-white"></button>
<div class="w3-bar-item w3-hide" id="logbox"></div>
<div class="w3-bar-item w3-margin" id="about"></div>
</div>
<div class="w3-sidebar w3-animate-left" style="width:52px;background-color:#00000008;display:block" id="themoodbar">
</div>
<div class="systembox" id="systembox">
<img id="systemimg" src="asset/logo-dark.png" style="height:50px;cursor:pointer"/>
<text class="systemtext" id="systemtext"> OpenLive3D </text>
</div>
<div class="alertbox" id="alertbox">
<img id="alertimg" onclick="displayObj('alerttext')" src="asset/alert/alert.png" style="width:30px;cursor:pointer"/>
<text class="alerttext" style="display:none" id="alerttext"></text>
</div>
<div class="loadbox" id="loadbox">
<div class="w3-display-middle" style="width:280px">
<img id="loadimg" src="asset/logo.png" style="height:50px"/>
<text class="loading"> OpenLive3D </text>
<div><br/> Click LOGO Opens the Menu! <br/></div>
<div id="loadinfo">
<p> ⟳ Initializing </p>
</div>
</div>
</div>
<div class="webcambox">
<video id="webcam" autoplay playsinline></video>
</div>
<!-- three-vrm dependencies -->
<script src="https://unpkg.com/three@0.146.0/build/three.js"></script>
<script src="https://unpkg.com/three@0.146.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/three@0.146.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://unpkg.com/@pixiv/three-vrm@1.0.10/lib/three-vrm.min.js"></script>
<script src="https://pixijs.io/particle-emitter/examples/libs/pixi.js/dist/browser/pixi.js"></script>
<script src="https://pixijs.io/particle-emitter/dist/particle-emitter.js"></script>
<!-- local dependencies -->
<script src="src/js/interface/interface.js"></script>
<script src="ol3dc/face_mesh/face_mesh.js"></script>
<script src="ol3dc/face_mesh/single.js"></script>
<script src="ol3dc/js/camera/media-manager.js"></script>
<script src="ol3dc/js/converter/facekey.js"></script>
<script src="ol3dc/js/converter/posekey.js"></script>
<script src="ol3dc/js/converter/handkey.js"></script>
<script src="ol3dc/js/converter/arm-magic.js"></script>
<script src="ol3dc/js/ml/landmark-manager.js"></script>
<script src="ol3dc/js/ml/meta.js"></script>
<script src="ol3dc/js/ml/log.js"></script>
<script src="ol3dc/js/ml/ml-manager.js"></script>
<script src="ol3dc/js/interpolator/interpolator.js"></script>
<script src="ol3dc/js/entry/entry-manager.js"></script>
<script src="ol3dc/js/effect/blur.js"></script>
<script src="ol3dc/js/effect/frontlight.js"></script>
<script src="ol3dc/js/effect/toplight.js"></script>
<script src="ol3dc/js/effect/backlight.js"></script>
<script src="ol3dc/js/effect/rain.js"></script>
<script src="ol3dc/js/effect/effect-manager.js"></script>
<script src="ol3dc/js/config/config-manager.js"></script>
<script src="ol3dc/js/gui/multi-language.js"></script>
<script src="ol3dc/js/gui/gui-layout.js"></script>
<script src="ol3dc/js/vrm/vrm-manager.js"></script>
<script src="ol3dc/js/control/health-manager.js"></script>
<script src="ol3dc/js/control/control-manager.js"></script>
<script src="ol3dc/js/control/hotkey.js"></script>
<script>
// start camera, load resources, link things
initialize();
// kick off the initialization loop!
requestAnimationFrame(initLoop);
</script>
</body>
</html>