개요

사진

환경

샘플 코드

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

아티팩트