-
Notifications
You must be signed in to change notification settings - Fork 74
/
orientation.html
100 lines (74 loc) 路 2.55 KB
/
orientation.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
background:#000;
color:#fff;
}
.dot {
position: fixed;
left: calc(50% - 10px);
top: calc(50% - 10px);
width:20px;
height:20px;
background:#fff;
}
.log {
display:flex;
}
.log span {
margin:0.5em;
}
</style>
</head>
<body>
<p class="log"></p>
<div class="dot"></div>
<script>
function log() {
p.innerHTML = [].slice.call(arguments).map(function(arg) { return typeof arg === 'number' ? arg.toFixed(3) : arg}).map(function(v) { return '<span>' + v + '</span>'}).join('');
}
var p = document.querySelector('.log');
var div = document.querySelector('.dot');
var PI_DIVIDED_BY_180 = Math.PI / 180;
var degToRad = function(degrees) { return degrees * PI_DIVIDED_BY_180 };
var state = {
origin: null,
center: {
x: 0,
y: 0,
z: 300
}
};
window.addEventListener('deviceorientation', function(e) {
log(e.alpha, e.beta, e.gamma);
if (!(e.beta && e.gamma)) return;
const orientation = {
alpha: e.alpha,
beta: e.beta,
gamma: e.gamma
}
if (state.origin === null) {
state.origin = Object.assign({}, orientation);
}
var alpha = state.origin.alpha - orientation.alpha;
var beta = state.origin.beta - orientation.beta;
var gamma = state.origin.gamma - orientation.gamma;
var x = state.center.x;
var y = state.center.y;
var z = state.center.z;
x = x * Math.cos(-degToRad(alpha)) - y * Math.sin(-degToRad(alpha));
y = y * Math.cos(-degToRad(alpha)) + x * Math.sin(-degToRad(alpha));
y = y * Math.cos(-degToRad(beta)) - z * Math.sin(-degToRad(beta));
z = z * Math.cos(-degToRad(beta)) + y * Math.sin(-degToRad(beta));
z = z * Math.cos(-degToRad(gamma)) - x * Math.sin(-degToRad(gamma));
x = x * Math.cos(-degToRad(gamma)) + z * Math.sin(-degToRad(gamma));
div.style.transform = 'perspective(500px) translate3d(' + x + 'px,' + y + 'px,' + z + 'px)';
});
</script>
</body>
</html>