HTML截取定位資訊轉存至THREE.js

if (navigator.geolocation) {
setInterval("enableGeolocation()",5000);
} else {
    alert("Geolocation is not supported by this browser.");
}

function enableGeolocation() {
navigator.geolocation.getCurrentPosition(showPosition);
}

function showPosition(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
}

HTML截取攝影機畫面

來源：http://www.html5rocks.com/en/tutorials/getusermedia/intro/

if (navigator.getUserMedia) {

    if (typeof MediaStreamTrack != 'undefined' && typeof MediaStreamTrack.getSources != 'undefined'){//Chrome 選擇後攝影機
      MediaStreamTrack.getSources(function gotSources(sourceInfos){
          var option = document.createElement("option");
          var hasRearCamera = false;
          for (var i = 0; i != sourceInfos.length; ++i) {
            var sourceInfo = sourceInfos[i];
            if (sourceInfo.kind === 'video') {
                if (!hasRearCamera) {
                    option.value = sourceInfo.id;
                    option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
                };
                if( sourceInfo.facing === 'environment' ) {
                    hasRearCamera = true;
                    option.value = sourceInfo.id;
                    option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
                    navigator.getUserMedia({video: { optional: [{sourceId: option.value}] }}, successCallback, errorCallback);
                }
            }
          }
          if (!hasRearCamera) {
            navigator.getUserMedia({video: { optional: [{sourceId: option.value}] }}, successCallback, errorCallback);
          }
      });
    }else{
        navigator.getUserMedia({video: true}, successCallback, errorCallback);
    }
 
} else {
    sendError('Native web camera streaming (getUserMedia) not supported in this browser.');
}

HTML5 + WebGL 實作小筆記

1.
(1) iOS 7 以前(包含)，無法使用瀏覽器取得攝影機畫面。(navigator.getUserMedia函式)
(2) Chrome on android 可以用程式抓出所有多媒體設備，並且判斷需要的設備做選擇，例如後攝影機。(判斷式：http://kanbear.blogspot.tw/2014/07/htmlthreejs_21.html)
(3) Firefox on android 無法以程式選擇需要的攝影機，在使用者授權攝影機使用時交由使用者決定攝影機。
(4) Opera on android 預設使用後攝影機。

HTML截取陀螺儀轉存至THREE.js

來源：http://w3c.github.io/deviceorientation/spec-source-orientation.html
其實似乎直接用四元素的公式就可以使用了，但因為實作上需要對應實際地標方向，需要做一些旋轉，在測試期間換成矩陣去儲存，後來就沒有改回四元素。

var alpha = 0;
var beta = 0;
var gamma = 0;
var gyroscopeQuaternion = new THREE.Quaternion();
gyroscopeQuaternion.setFromEuler(new THREE.Euler(0,0,0));

if (window.DeviceMotionEvent==undefined) {
}
else {
window.ondeviceorientation = function(event) {
alpha = event.alpha;
beta = event.beta;
gamma = event.gamma;
}

setInterval(function() {

var _x = beta  ? beta  * degtorad : 0; // beta value
var _y = gamma ? gamma * degtorad : 0; // gamma value
var _z = alpha ? alpha * degtorad : 0; // alpha value

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

var rotationMatrix = new THREE.Matrix4(
m11,    m12,    m13,    0,
m21,    m22,    m23,    0,
m31,    m32,    m33,    0,
 0,      0,      0,    1
);

gyroscopeQuaternion = new THREE.Quaternion();
gyroscopeQuaternion.setFromRotationMatrix(rotationMatrix);

}, 100);
}