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
|
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
const white = 0xFFFFFF;
const skyColor = 0xB1E1FF; // light blue
const groundColor = 0xB97A20; // brownish orange
const ambient_light = new THREE.HemisphereLight(skyColor, groundColor, 1);
scene.add(ambient_light);
function animate() {
//cube.rotation.x += 0.01;
//cube.rotation.y += 0.01;
renderer.render( scene, camera);
}
renderer.setAnimationLoop(animate);
if ( location.protocol != "https:" ) {
location.href = "https:" + window.location.href.substring( window.location.protocol.length );
}
function permission () {
if ( typeof( DeviceMotionEvent ) !== "undefined" && typeof( DeviceMotionEvent.requestPermission ) === "function" ) {
// (optional) Do something before API request prompt.
DeviceMotionEvent.requestPermission()
.then( response => {
// (optional) Do something after API prompt dismissed.
if ( response == "granted" ) {
window.addEventListener("deviceorientation", (e) => {
//elem.style.transform = `rotateZ(${-e.alpha}deg) rotateX(${-e.beta}deg) rotateY(${
// e.gamma
//}deg)`;
cube.rotation.x = e.beta/15.0; //-front +back
cube.rotation.y = e.gamma/15.0; //-left +right
if(Math.abs(e.beta) > 1) {
cube.position.y += -e.beta / 240
}
if(Math.abs(e.gamma) > 1) {
cube.position.x += e.gamma / 240
}
if(cube.position.x > 4) {
cube.position.x -= 1
cube.position.x = -cube.position.x
}
else if(cube.position.x < -4) {
cube.position.x += 1
cube.position.x = -cube.position.x
}
if(cube.position.y > 6) {
cube.position.y -= 1
cube.position.y = -cube.position.y
}
else if(cube.position.y < -6) {
cube.position.y += 1
cube.position.y = -cube.position.y
}
document.getElementById("info").textContent=`x: ${Math.round(cube.position.x * 10)}, y: ${Math.round(cube.position.y * 10)}`;
});
}
})
.catch( console.error )
} else {
alert( "DeviceMotionEvent is not defined" );
}
}
const btn = document.getElementById( "request" );
btn.addEventListener( "click", permission );
|
