Dan,
That certainly helped! I played with the multiplications and the negating (not my area of expertise) and I at least have it rendering. But it’s not quite right. Hoping you can take a quick peek at it if you have a smartphone.
If you simply copy the below code into an html file (mobile.html?), and drop it next to a Cesium directory (version b28) and serve it up to a Smartphone (over Wi-Fi in my case), it should take about 10 seconds to load and then start rendering tiles over San Diego. As you move the phone, it should change the Cesium camera angle accordingly.
In theory, it should work on iPhones, but I have not tested it on one. I’m using a Nexus 4 running Android 4.4 and a Chrome browser. All the code is simple Cesium and HTML5. The function that needs help is called onDeviceOrientationChanged.
Any help would be greatly appreciated. I intend to publish the code once we figure this out so everyone will benefit.
Pat.
<title>Cesium Mobile</title>
<script src="Cesium/Cesium.js"></script>
<script>
var widget;
function load() {
"use strict";
var cesiumContainer = document.getElementById('cesiumContainer');
widget = new Cesium.CesiumWidget(cesiumContainer, {
imageryProvider: new Cesium.OpenStreetMapImageryProvider(),
terrainProvider: new Cesium.CesiumTerrainProvider({
url: 'http://cesiumjs.org/smallterrain',
credit: 'Terrain data courtesy Analytical Graphics, Inc.'
}),
contextOptions: {
webgl: {
alpha: true
}
}
});
// MANUALLY SET OWN POSITION
var position={};
position.coords={};
position.coords.latitude=32.71;
position.coords.longitude=-117.16;
position.coords.altitude=100;
setCameraPosition(position);
// ENABLE THIS TO USE GPS SENSOR TO SET OWN POSITION AUTOMATICALLY
// BROWSER WILL PROMPT YOU FOR PERMISSION
// if (navigator.geolocation) {
// navigator.geolocation.watchPosition(setCameraPosition);
// }
// THIS ALLOWS YOU TO USE THE PHONE TO CONTROL THE CESIUM CAMERA VIEW
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', onDeviceOrientationChanged, false);
}
window.addEventListener('resize', onResize, false);
window.setTimeout(onResize, 60);
}
var onResize = function() {
onResizeScene(widget.canvas, widget.scene);
};
// Resize handler
var onResizeScene = function(canvas, scene) {
var width = canvas.clientWidth;
var height = canvas.clientHeight;
if (canvas.width === width && canvas.height === height) {
return;
}
canvas.width = width;
canvas.height = height;
scene.camera.frustum.aspectRatio = width / height;
};
// =====================================================================
// POSITION SENSOR
// =====================================================================
function setCameraPosition(position) {
// console.log("flyTo(" + position.coords.latitude + ", " + position.coords.longitude + ")");
var home = Cesium.Cartographic.fromDegrees(position.coords.longitude, position.coords.latitude, position.coords.altitude);
var destination = Cesium.Ellipsoid.WGS84.cartographicToCartesian(home);
widget.scene.camera.position = destination;
}
// =====================================================================
// ORIENTATION SENSOR
// http://www.w3.org/TR/orientation-event/
// x = beta [-180, 180] (aka pitch)
// y = gamma [-90, 90] (aka roll)
// z = alpha [0, 360] (aka yaw)
// =====================================================================
function onDeviceOrientationChanged(eventData) {
var x = eventData.beta;
var y = eventData.gamma;
var z = eventData.alpha;
x = Cesium.Math.toRadians(x);
y = Cesium.Math.toRadians(y);
z = Cesium.Math.toRadians(180 - z);
var xRotation = Cesium.Matrix3.fromRotationX(x);
var yRotation = Cesium.Matrix3.fromRotationY(y);
var zRotation = Cesium.Matrix3.fromRotationZ(z);
var rotation = Cesium.Matrix3.multiply(yRotation, Cesium.Matrix3.multiply(xRotation, zRotation));
Cesium.Quaternion.normalize(rotation, rotation);
widget.scene.camera.right = Cesium.Matrix3.getRow(rotation, 0);
widget.scene.camera.up = Cesium.Cartesian3.negate(Cesium.Matrix3.getRow(rotation, 1));
widget.scene.camera.direction = Cesium.Cartesian3.negate(Cesium.Matrix3.getRow(rotation, 2));
}
</script>
<style>
@import url(Cesium/Widgets/CesiumWidget/CesiumWidget.css);
#cesiumContainer {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
padding: 0;
font-family: sans-serif;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
<div id="cesiumContainer"></div>