jsdoでdeviceorientation その２

概要

jsdoでdeviceorientationやってみた。
threeで、やってみた。

写真

環境

nexus 7

サンプルコード

THREE.DeviceOrientationControls = function(object) {
	var scope = this;
	this.object = object;
	this.object.rotation.reorder('YXZ');
	this.enabled = true;
	this.deviceOrientation = {};
	this.screenOrientation = 0;
	this.alphaOffset = 0;
	var onDeviceOrientationChangeEvent = function(event) {
		scope.deviceOrientation = event;
	};
	var onScreenOrientationChangeEvent = function() {
		scope.screenOrientation = window.orientation || 0;
	};
	var setObjectQuaternion = function() {
		var zee = new THREE.Vector3(0, 0, 1);
		var euler = new THREE.Euler();
		var q0 = new THREE.Quaternion();
		var q1 = new THREE.Quaternion(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5));
		return function(quaternion, alpha, beta, gamma, orient) {
			euler.set(beta, alpha, -gamma, 'YXZ'); 
			quaternion.setFromEuler(euler);
			quaternion.multiply(q1);
			quaternion.multiply(q0.setFromAxisAngle(zee, -orient));
		};
	}();
	this.connect = function() {
		onScreenOrientationChangeEvent();
		window.addEventListener('orientationchange', onScreenOrientationChangeEvent, false);
		window.addEventListener('deviceorientation', onDeviceOrientationChangeEvent, false);
		scope.enabled = true;
	};
	this.disconnect = function() {
		window.removeEventListener('orientationchange', onScreenOrientationChangeEvent, false);
		window.removeEventListener('deviceorientation', onDeviceOrientationChangeEvent, false);
		scope.enabled = false;
	};
	this.update = function() {
		if (scope.enabled === false) return;
		var device = scope.deviceOrientation;
		if (device) 
        {
			var alpha = device.alpha ? THREE.Math.degToRad(device.alpha) + scope.alphaOffset : 0;
			var beta = device.beta ? THREE.Math.degToRad(device.beta) : 0;
			var gamma = device.gamma ? THREE.Math.degToRad(device.gamma) : 0; 
			var orient = scope.screenOrientation ? THREE.Math.degToRad(scope.screenOrientation) : 0; 
			setObjectQuaternion(scope.object.quaternion, alpha, beta, gamma, orient);
		}
	};
	this.dispose = function() {
		scope.disconnect();
	};
	this.connect();
};

var container = document.createElement('div');
document.body.appendChild(container);
var scene = new THREE.Scene();
var renderer = new THREE.CanvasRenderer();
renderer.setSize(800, 450);
container.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(45, 450 / 450, 1, 100000);
camera.position.set(0, 50, 200);
var controls = new THREE.DeviceOrientationControls(camera);
var gridHelper = new THREE.GridHelper(200, 50); 
scene.add(gridHelper);
var axisHelper = new THREE.AxisHelper(1000);
scene.add(axisHelper);
var geometry = new THREE.Geometry();
var zoukaY = 0.03;
var laps = 8;
var split = 10;
var radius = 20;
var totalDeg = laps * 360;
for (var i = 0; i <= totalDeg; i = i + split)
{
	var x = radius * Math.cos(Math.PI / 180 * i);
	var z = radius * Math.sin(Math.PI / 180 * i);
	var y = i * zoukaY;
	geometry.vertices.push(new THREE.Vector3(x, y, z));
}
var line = new THREE.LineBasicMaterial({ 
    color: 0x000000
});
var mesh = new THREE.Line(geometry, line);
scene.add(mesh)

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

成果物

以上。