Skip to content

Commit

Permalink
Fixed up the basic demos to work with both gyro and mouse.
Browse files Browse the repository at this point in the history 
Split index.htm into vr.html and ar.html.
Included gyro and mouse plugins.
Moved key quaternion functions to awe.util in awe-standard.js.
  • Loading branch information
Rob Manson authored and Rob Manson committed Oct 24, 2016
1 parent e8fe1e5 commit 37d5fd5
Show file tree
Hide file tree
Showing 5 changed files with 725 additions and 2 deletions.
201 changes: 201 additions & 0 deletions examples/basic/ar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
<!DOCTYPE html>
<html>
<head>
<title>AWE GEO AR demo</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<meta charset="utf-8"/>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="../../js/awe-v8.js"></script>
<script type="text/javascript" src="../../js/awe-loader.js"></script>
<script type="text/javascript">
window.addEventListener('load', function() {
// initialize awe after page loads
window.awe.init({
// automatically detect the device type
device_type: awe.AUTO_DETECT_DEVICE_TYPE,
// populate some default settings
settings: {
container_id: 'container',
fps: 30,
default_camera_position: { x:0, y:0, z:0 },
default_lights:[
{
id: 'hemisphere_light',
type: 'hemisphere',
color: 0xCCCCCC
},
],
},
ready: function() {
var d = '?_='+Date.now();

// load js files based on capability detection then setup the scene if successful
awe.util.require([
{
capabilities: ['webgl','gum'],
files: [
[ '../../js/awe-standard-dependencies.js'+d, '../../js/awe-standard.js'+d ], // core dependencies for this app
['../../js/plugins/StereoEffect.js'+d, '../../js/plugins/VREffect.js'+d], // dependencies for render effects
'../../js/plugins/awe.rendering_effects.js'+d,
'../../js/plugins/awe-standard-object_clicked_or_focused.js'+d, // object click/tap handling plugin
'awe.gyro.js'+d, // basic gyro handling
'awe.mouse.js'+d, // basic mouse handling
],
success: function() {
// setup and paint the scene
awe.setup_scene();

var click_plugin = awe.plugins.view('object_clicked');
if (click_plugin) {
click_plugin.register();
click_plugin.enable();
}
var gyro_plugin = awe.plugins.view('gyro');
if (gyro_plugin) {
gyro_plugin.enable();
}
var mouse_plugin = awe.plugins.view('gyro');
if (gyro_plugin) {
gyro_plugin.enable();
}

awe.settings.update({data:{value: 'ar'}, where:{id: 'view_mode'}})
var render_effects_plugin = awe.plugins.view('render_effects');
if (render_effects_plugin) {
render_effects_plugin.enable();
}

// setup some code to handle when an object is clicked/tapped
window.addEventListener('object_clicked', function(e) {
var p = awe.projections.view(e.detail.projection_id);
awe.projections.update({ // rotate clicked object by 180 degrees around x and y axes over 10 seconds
data:{
animation: {
duration: 10,
},
rotation:{ y: p.rotation.y+180, x: p.rotation.x+180 }
},
where:{ id:e.detail.projection_id }
});
}, false);

// add some points of interest (poi) for each of the compass points
awe.pois.add({ id:'north', position: { x:0, y:0, z:200 } });
awe.pois.add({ id:'north_east', position: { x:200, y:0, z:200 } });
awe.pois.add({ id:'east', position: { x:200, y:0, z:0 } });
awe.pois.add({ id:'south_east', position: { x:200, y:0, z:-200 } });
awe.pois.add({ id:'south', position: { x:0, y:0, z:-200 } });
awe.pois.add({ id:'south_west', position: { x:-200, y:0, z:-200 } });
awe.pois.add({ id:'west', position: { x:-200, y:0, z:0 } });
awe.pois.add({ id:'north_west', position: { x:-200, y:0, z:200 } });

// add projections to each of the pois
awe.projections.add({
id:'n',
geometry:{ shape:'cube', x:50, y:50, z:50 },
rotation:{ x:30, y:30, z:0 },
material:{
type: 'phong',
color:0xFF0000,
},
}, { poi_id: 'north' });

awe.projections.add({
id:'ne',
geometry:{ shape:'sphere', radius:10 },
material:{
type: 'phong',
color:0xCCCCCC,
},
}, { poi_id: 'north_east' });

awe.projections.add({
id:'e',
geometry:{ shape:'cube', x:50, y:50, z:50 },
rotation:{ x:30, y:30, z:0 },
material:{
type: 'phong',
color:0x00FF00,
},
}, { poi_id: 'east' });

awe.projections.add({
id:'se',
geometry:{ shape:'sphere', radius:10 },
material:{
type: 'phong',
color:0xCCCCCC,
},
}, { poi_id: 'south_east' });

awe.projections.add({
id:'s',
geometry:{ shape:'cube', x:50, y:50, z:50 },
rotation:{ x:30, y:30, z:0 },
material:{
type: 'phong',
color:0xFFFFFF,
},
}, { poi_id: 'south' });

awe.projections.add({
id:'sw',
geometry:{ shape:'sphere', radius:10 },
material:{
type: 'phong',
color:0xCCCCCC,
},
}, { poi_id: 'south_west' });

awe.projections.add({
id:'w',
geometry:{ shape:'cube', x:50, y:50, z:50 },
rotation:{ x:30, y:30, z:0 },
material:{
type: 'phong',
color:0x0000FF,
},
}, { poi_id: 'west' });

awe.projections.add({
id:'nw',
geometry:{ shape:'sphere', radius:10 },
material:{
type: 'phong',
color:0xCCCCCC,
},
}, { poi_id: 'north_west' });

},
},
{ // else create a fallback
capabilities: [],
files: [],
success: function() {
document.body.innerHTML = '<p>This demo currently requires a standards compliant mobile browser.';
return;
},
},
]);
}
});
});
</script>
</body>
</html>
83 changes: 83 additions & 0 deletions examples/basic/awe.gyro.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
;(function(awe) {
var device_orientation_data,
current_screen_orientation = window.orientation;

var last_update = performance.now();
var enabled = false;
var zoom = 700;
var zoom_delta = 0;
var ready = false;
var gyro_mode = 'point'; // none|point|sphere
function setup(){
ready = true;
}

awe.plugins.add([{
id: 'gyro',
capabilities: ['gyro'],
auto_register: true,
register: function(plugin_data){
awe.events.add([
{
id: 'update_pov',
register: function(handler) {
window.addEventListener('tick', handler, false);
},
unregister: function(handler){
window.removeEventListener('tick', handler, false);
},
handler: function(e) {
if (!ready) {
setup();
}
if (device_orientation_data && enabled && gyro_mode != 'none') {
awe.util.update_pov_quaternion( device_orientation_data, current_screen_orientation, zoom, zoom_delta, last_update, gyro_mode );
}
}
},
{
id: 'gyro_screenorientation',
register: function(handler) {
current_screen_orientation = window.orientation;
window.addEventListener('orientationchange', handler, false);
},
unregister: function(handler){
window.removeEventListener('orientationchange', handler, false);
},
handler: function(e) {
current_screen_orientation = window.orientation || 0;
}
},
{
id: 'deviceorientation',
register: function(handler) {
window.addEventListener('deviceorientation', handler, false);
},
unregister: function(handler){
window.removeEventListener('deviceorientation', handler, false);
},
handler: function(e) {
device_orientation_data = {
alpha: e.alpha,
beta: e.beta,
gamma: e.gamma
};
}
}
]);
},
unregister: function(plugin_data){
awe.events.delete('update_pov');
awe.events.delete('gyro_screenorientation');
awe.events.delete('deviceorientation');
},
enable: function(){
console.log('enable gyro')
enabled = true;
},
disable: function(){
console.log('disable gyro')
enabled = false;
},
}]);
})(window.awe);

0 comments on commit 37d5fd5

Please sign in to comment.