How to use awe.js file in ionic2 .I have include the awe-loader.js file and awe.-v8.js file,but i am getting the error of awe undefined. I have defined awe as global in the project and using it as this.awe .thanks in advance.
here is my code.I have included al the libraries that are neccesary, and also defined the neccesary things.
export class MyApp {
public cube: any;
public rotation: any;
public awe;
rootPage: any = HomePage;
public win: any = window;
constructor(public platform: Platform, public statusBar: StatusBar,
public splashScreen: SplashScreen, private cameraPreview: CameraPreview) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
this.bindEvents();
}
bindEvents() {
alert(“bind”);
this.ondeviceReady();
this.onLoad();
this.createProjection();
this.headingChanged(event);
this.positionChanged(event);
}
ondeviceReady() {
const cameraPreviewOpts: CameraPreviewOptions = {
x: 0,
y: 0,
width: window.screen.width,
height: window.screen.height,
camera: ‘rear’,
tapPhoto: true,
previewDrag: true,
toBack: true,
alpha: 1
};
this.cameraPreview.startCamera(cameraPreviewOpts).then(
(res) => {
alert("camera")
console.log(res)
},
(err) => {
console.log(err)
});
}
onLoad() {
alert(“load”);
var click_plugin: any;
var gyro_plugin: any;
var mouse_plugin: any;
var render_effects_plugin: any;
var p: any;
var poiLocations: any;
this.awe.init({
device_type: this.awe.AUTO_DETECT_DEVICE_TYPE, //error occurs here awe undefined
setting: {
container_id: 'pois',
fps: 30,
default_camera_position: {
x: 0,
y: 0,
z: 0,
},
default_lights: [{
id: 'hemisphere_light',
type: 'hemisphere',
color: 0XCCCCCC
}, ],
},
ready(x) {
var d: any = '?_=' + Date.now();
alert("d");
awe.util.requires([{
capabilities: ['webgl'],
files: [
['./assets/awe/js/awe-standard-dependencies.js' + d,
'./assets/awe/js/awe-standard.js'
],
['./assets/awe/js/plugins_/StereoEffect.js',
'./assets/awe/js/plugins_/VREffect.js'
],
'./assets/awe/js/plugins_/awe.rendering_effects.js' + d,
'./assets/awe/js/plugins_/awe-standard-object_clicked_or_focused.js' + d, // object click/tap handling plugin
'./assets/awe/js/plugins_/awe.gyro.js', // basic gyro handling
'./assets/awe/js/plugins_/awe.mouse.js' + d, // basic mouse handling
'./assets/js/AwePoiPositionHelper.js',
'./assets/js/ecef.js'
],
success() {
alert("success");
this.awe.setup_scene();
click_plugin = this.awe.plugins.view('object-clicked');
if (click_plugin) {
click_plugin.register();
click_plugin.enable();
}
gyro_plugin = this.awe.plugins.view('gyro');
if (this.gyro_plugin) {
gyro_plugin.enable();
}
mouse_plugin = this.awe.plugins.view('mouse');
if (mouse_plugin) {
mouse_plugin.enable();
}
render_effects_plugin = this.awe.plugins.view('render_effect');
if (render_effects_plugin) {
render_effects_plugin.enable();
}
this.win.addEventListener('object_office', function(e) {
p = this.awe.projections.view(e.details.projections_id);
this.awe.projections.update({
data: {
animation: {
duration: 10,
},
rotation: {
y: p.rotation.y + 180,
x: p.rotation.x + 180
}
},
where: {
id: e.detail.projections_id
}
});
}, false);
poiLocations = [{
poi_id: 'north_pt',
polar: {
angle: 0,
radius: 50,
height: 20
}
},
{
poi_id: 'east_pt',
polar: {
angle: 90,
radius: 30,
height: 10
}
},
{
poi_id: 'south_pt',
polar: {
angle: 180,
radius: 20,
height: 5
}
},
{
poi_id: 'west_pt',
polar: {
angle: 270,
radius: 10,
height: 0
}
}
];
this.AwePoiPositionHelper.initialize(
poiLocations, {
povHeight: 20,
showGrid: true,
linkAweRefFrameToCompassHeading: true
}
);
this.AwePoiPositionHelper.start();
}
},
{
capabilities: [],
files: [],
success() {
document.body.innerHTML = '<p>demo</p>'
}
},
]);
}
})
}
createProjection() {
alert(“projecting”);
var awe: any;
this.cube = {
shape: ‘cube’,
x: 5,
y: 5,
z: 5
};
this.rotation = {
x: 30,
y: 30,
z: 0
};
awe.projections.add({
id: 'north_poi',
visible: false,
geometry: this.cube,
rotation: this.rotation,
material: {
type: 'basic',
color: 0x0000ff, //blue
wireframe: false
},
}, {
poi_id: 'north_pt'
});
alert("projected");
awe.projections.add({
id: 'south_poi',
visible: false,
geometry: this.cube,
rotation: this.rotation,
material: {
type: 'basic',
color: 0xff0000, //red
wireframe: false
}
}, {
poi_id: 'south_pt'
});
awe.projections.add({
id: 'east_poi',
visible: false,
geometry: this.cube,
rotation: this.rotation,
material: {
type: 'basic',
color: 0x00ff00, //green
wireframe: false
}
}, {
poi_id: 'east_pt'
});
awe.projections.add({
id: 'west_poi',
visible: false,
geometry: this.cube,
rotation: this.rotation,
material: {
type: 'basic',
color: 0xff8010, //orange
wireframe: false
}
}, {
poi_id: 'west_pt'
});
}