mayakraft/index.html

## index.html
<!-- 2 terminal windows
one running ngrok
one running localhost server

php -S localhost:8000 -->

<!DOCTYPE html>
<head>
<title>three js</title>
<style>
	/*css goes here*/
html, body {
	margin: 0;
	overflow: hidden;  /*nice to not use this*/
}
</style>
</head>

<body>
<button onclick="getPermission()">start</button>
</body>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>

<script>

var mesh;

window.onload = function () {
	// we're gonna type here
	var camera = new THREE.PerspectiveCamera(
		70,
		window.innerWidth / window.innerHeight,
		0.01,
		1000
	);
	camera.position.z = 10;

	var scene = new THREE.Scene();

	// add geometry here
	var box = new THREE.BoxBufferGeometry(4, 4, 4,2, 2, 2);
	var material = new THREE.MeshBasicMaterial({
		color: 0xff77ff,
		wireframe: true
	});
	mesh = new THREE.Mesh(box, material);
	scene.add(mesh);
	mesh.matrixAutoUpdate = false;

	var renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	function animate() {
		renderer.render(scene, camera);
		requestAnimationFrame(animate);
	}
	animate();

};


var degtorad = Math.PI / 180;

function makeRotationMatrix(alpha, beta, gamma) {
  var _x = beta  ? beta  * degtorad : 0;
  var _y = gamma ? gamma * degtorad : 0;
  var _z = alpha ? alpha * degtorad : 0;

  var cX = Math.cos( _x );
  var cY = Math.cos( _y );
  var cZ = Math.cos( _z );
  var sX = Math.sin( _x );
  var sY = Math.sin( _y );
  var sZ = Math.sin( _z );

  //
  // ZXY-ordered rotation matrix construction.
  //

  var m11 = cZ * cY - sZ * sX * sY;
  var m12 = - cX * sZ;
  var m13 = cY * sZ * sX + cZ * sY;

  var m21 = cY * sZ + cZ * sX * sY;
  var m22 = cZ * cX;
  var m23 = sZ * sY - cZ * cY * sX;

  var m31 = - cX * sY;
  var m32 = sX;
  var m33 = cX * cY;

  return [
    m11, m12, m13, 0,
    m21, m22, m23, 0,
    m31, m32, m33, 0,
    0, 0, 0, 1
  ];
};

function handleOrientation(e) {
  let matrix = makeRotationMatrix(e.alpha, e.beta, e.gamma);
  if (matrix) {
  	mesh.matrix.set(...matrix);
  }
}

function getPermission() {
  if (typeof DeviceOrientationEvent.requestPermission === "function") {
    DeviceOrientationEvent.requestPermission()
      .then(permissionState => {
        if (permissionState === "granted") {
          window.addEventListener("deviceorientation", handleOrientation);
        }
      }).catch(console.error);
  }
}

</script>
	<!-- 2 terminal windows
	one running ngrok
	one running localhost server

	php -S localhost:8000 -->

	<!DOCTYPE html>
	<head>
	<title>three js</title>
	<style>
	/css goes here/
	html, body {
	margin: 0;
	overflow: hidden; /nice to not use this/
	}
	</style>
	</head>

	<body>
	<button onclick="getPermission()">start</button>
	</body>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>

	<script>

	var mesh;

	window.onload = function () {
	// we're gonna type here
	var camera = new THREE.PerspectiveCamera(
	70,
	window.innerWidth / window.innerHeight,
	0.01,
	1000
	);
	camera.position.z = 10;

	var scene = new THREE.Scene();

	// add geometry here
	var box = new THREE.BoxBufferGeometry(4, 4, 4,2, 2, 2);
	var material = new THREE.MeshBasicMaterial({
	color: 0xff77ff,
	wireframe: true
	});
	mesh = new THREE.Mesh(box, material);
	scene.add(mesh);
	mesh.matrixAutoUpdate = false;

	var renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	function animate() {
	renderer.render(scene, camera);
	requestAnimationFrame(animate);
	}
	animate();

	};


	var degtorad = Math.PI / 180;

	function makeRotationMatrix(alpha, beta, gamma) {
	var _x = beta ? beta * degtorad : 0;
	var _y = gamma ? gamma * degtorad : 0;
	var _z = alpha ? alpha * degtorad : 0;

	var cX = Math.cos( _x );
	var cY = Math.cos( _y );
	var cZ = Math.cos( _z );
	var sX = Math.sin( _x );
	var sY = Math.sin( _y );
	var sZ = Math.sin( _z );

	//
	// ZXY-ordered rotation matrix construction.
	//

	var m11 = cZ * cY - sZ * sX * sY;
	var m12 = - cX * sZ;
	var m13 = cY * sZ * sX + cZ * sY;

	var m21 = cY * sZ + cZ * sX * sY;
	var m22 = cZ * cX;
	var m23 = sZ * sY - cZ * cY * sX;

	var m31 = - cX * sY;
	var m32 = sX;
	var m33 = cX * cY;

	return [
	m11, m12, m13, 0,
	m21, m22, m23, 0,
	m31, m32, m33, 0,
	0, 0, 0, 1
	];
	};

	function handleOrientation(e) {
	let matrix = makeRotationMatrix(e.alpha, e.beta, e.gamma);
	if (matrix) {
	mesh.matrix.set(...matrix);
	}
	}

	function getPermission() {
	if (typeof DeviceOrientationEvent.requestPermission === "function") {
	DeviceOrientationEvent.requestPermission()
	.then(permissionState => {
	if (permissionState === "granted") {
	window.addEventListener("deviceorientation", handleOrientation);
	}
	}).catch(console.error);
	}
	}

	</script>