-
Notifications
You must be signed in to change notification settings - Fork 92
/
index.html
136 lines (118 loc) · 5.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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<title>Absolute orientation sensor demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- Origin Trial Token, feature = Generic Sensors, origin = https://intel.github.io, expires = 2018-02-27 -->
<meta http-equiv="origin-trial" data-feature="Generic Sensors" data-expires="2018-02-27" content="AjL+UlBzLjx+0FPXrML6IMA/Ax9GsO/7rUvV/aaKkh3KknUSwDBgymn0d3NhGeRMNS7FlYD73ernqvZNoqzNMw4AAABWeyJvcmlnaW4iOiJodHRwczovL2ludGVsLmdpdGh1Yi5pbzo0NDMiLCJmZWF0dXJlIjoiR2VuZXJpY1NlbnNvciIsImV4cGlyeSI6MTUxOTczOTAwNX0=">
<style>
body {
margin: 0px;
overflow: hidden;
}
#console {
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/OBJLoader.js"></script>
<script src="js/MTLLoader.js"></script>
<script type="module">
import {
AbsoluteOrientationSensor,
RelativeOrientationSensor
} from '../sensor-polyfills/motion-sensors.js';
const params = new URLSearchParams(new URL(window.location.href).search.slice(1));
const relative = !!Number(params.get("relative"));
const coordinateSystem = params.get("coord");
let container, sensor, camera, scene, renderer, model;
initScene();
if (navigator.permissions) {
// https://w3c.github.io/orientation-sensor/#model
Promise.all([navigator.permissions.query({ name: "accelerometer" }),
navigator.permissions.query({ name: "magnetometer" }),
navigator.permissions.query({ name: "gyroscope" })])
.then(results => {
if (results.every(result => result.state === "granted")) {
initSensor();
} else {
console.log("Permission to use sensor was denied.");
}
}).catch(err => {
console.log("Integration with Permissions API is not enabled, still try to start app.");
initSensor();
});
} else {
console.log("No Permissions API, still try to start app.");
initSensor();
}
renderScene();
function initScene() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 200);
camera.position.z = 10;
scene = new THREE.Scene();
var ambientLight = new THREE.AmbientLight(0x404040, 6);
scene.add(ambientLight);
var manager = new THREE.LoadingManager();
var mtlLoader = new THREE.MTLLoader(manager);
mtlLoader.setTexturePath('resources/');
mtlLoader.load('resources/phone.mtl', materials => {
materials.preload();
var objLoader = new THREE.OBJLoader(manager);
objLoader.setMaterials(materials);
objLoader.load('resources/phone.obj', object => {
model = object;
scene.add(model);
});
});
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}, false);
document.addEventListener('mousedown', () => document.documentElement.requestFullscreen());
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement != null) {
screen.orientation.lock("natural")
}
});
}
function initSensor() {
const options = { frequency: 60, coordinateSystem };
console.log(JSON.stringify(options));
sensor = relative ? new RelativeOrientationSensor(options) : new AbsoluteOrientationSensor(options);
sensor.onreading = () => model.quaternion.fromArray(sensor.quaternion).inverse();
sensor.onerror = (event) => {
if (event.error.name == 'NotReadableError') {
console.log("Sensor is not available.");
}
}
sensor.start();
}
function renderScene() {
requestAnimationFrame(renderScene);
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
let log = console.log;
console.log = (message, ...rest) => {
const div = document.querySelector('#console');
div.innerText = message;
log.call(console, message, ...rest);
}
</script>
<div id="console"></div>
</body>
</html>