jsdoでdeviceorientation その2


概要

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();


成果物

http://jsdo.it/ohisama1/Q2Lz

以上。