-
Notifications
You must be signed in to change notification settings - Fork 16
/
index.html
85 lines (80 loc) · 3.12 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
<!DOCTYPE html>
<html>
<script src="./js/vendor/aframe.min.js"></script>
<script src="./js/vendor/aframe-ar.js"></script>
<script src="./js/vendor/zingtouch.min.js"></script>
<script src="./js/3d-ops.js"></script>
<script src="./js/ar-cam.js"></script>
<script src="./js/image-processor.js"></script>
<script src="./js/ui-utils.js"></script>
<!-- <script src="./js/debug.js"></script> -->
<link rel="stylesheet" href="./css/styles.css">
<body style="margin : 0px; overflow: hidden;">
<div class="overlay" id="fullscreen-overlay">
<div class="lato">enter fullscreen</div>
<button id="fullscreen-button" onclick="requestFullScreen()"></button>
<div class="lato">for the best experience</div>
</div>
<div class="overlay" id="loading-overlay">
<div class="cssload-wrap">
<div class="cssload-cssload-spinner"></div>
</div>
</div>
<div class="overlay" id="rotate-overlay">
<div class="phone shadow">
<div class="screen"></div>
</div>
<div class="phone rotate90">
<div class="screen"></div>
</div>
<div class="arrow-wrap">
<div class="arrow-circle">
<div class="arrow"></div>
</div>
<div class="arrow-head"></div>
</div>
<span class="lato">rotate device</span>
</div>
<div class="overlay" id="snap-overlay">
<span class="lato">capturing...</span>
</div>
<div class="overlay" id="preview-overlay">
<div class="preview-container">
<img id="preview-img" src="" alt="preview">
<div class="preview-actions">
<span class="lato">preview</span>
<button id="save-capture-button">save</button>
<button id="retake-button">retake</button>
</div>
</div>
</div>
<!-- <div id="log"></div> -->
<section class="log" style="display: none;">
<div id="positionLog">Position: 0 -0.75 0</div>
<div id="rotationLog">Rotation: 0 0 0</div>
<div id="zoomLog">Scale: 0.35</div>
</section>
<section class="controls">
<!--
<button onclick="X()">X</button>
<button onclick="Y()">Y</button>
<button onclick="Z()">Z</button>
<button onclick="P()">P</button>
-->
<button id="move-button" class="toggler" onclick="toggleMove()"></button>
<button id="snap-button" onclick="getSnap()"></button>
<button id="rotate-button" class="toggler" onclick="toggleRotate()"></button>
</section>
<a-scene id="scene" embedded arjs vr-mode-ui="enabled: false"
renderer="antialias: true; logarithmicDepthBuffer: true; colorManagement: true; sortObjects: true;">
<a-marker preset="hiro" smooth="true">
<a-entity position="0 0 0" rotation="270 0 0">
<a-entity id='theModel' position="0 -0.5 0" rotation="0 0 0" scale="12.5 12.5 12.5"
gltf-model="./assets/3d-models/doggy.glb">
</a-entity>
</a-entity>
</a-marker>
<a-entity id="camera" camera></a-entity>
</a-scene>
</body>
</html>