Space Apps Challenge 2017

this.mode = "vr"; // OR this.mode = "ar"

this.container = (typeof selector == "string" ? document.querySelector(selector) : selector) || document.body;

this.width = window.innerWidth;
this.height = window.innerHeight;

// Loader
this.loader = new Loader();

// Scene
this.scene = new THREE.Scene();
this.scene.name = "Scene";

// Fog
this.scene.fog = new THREE.FogExp2(0x3400c1, 1);

// Clock
this.clock = new THREE.Clock();

// Renderer
this.renderer = new THREE.WebGLRenderer({
    antialias: true,
alpha: true
});
this.renderer.setClearColor(0xffffff, 0);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(this.width, this.height);

// Shadows map only for normal mode
//this.renderer.shadowMap.enabled = true;
//this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
this.container.appendChild(this.renderer.domElement);

// Events
this.events = new Events(this.renderer);

// Stereo for vr mode
this.stereo = new THREE.OculusRiftEffect(this.renderer);

let hmd = this.stereo.getHMD();

hmd.hResolution = this.width;
hmd.vResolution = this.height;

this.stereo.setHMD(hmd);

this.stereo.setSize(this.width, this.height);

// Camera
this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 1, 10000);
this.camera.name = "Camera";
this.camera.position.set(-400, 1000, 0);
this.scene.add(this.camera);

// Raycaster
this.raycaster = new Raycaster(this.camera, this.renderer);

//// Shadow
this.shadow = new THREE.Mesh(
    new THREE.CylinderBufferGeometry(18, 18, 0.1, 64),
    new THREE.ShadowMaterial()
);
this.shadow.material.opacity = 0.5;
this.shadow.name = "Shadow";
this.shadow.position.set(0, 0.5, 0);
this.shadow.receiveShadow = true;
this.shadow.visible = true;
this.scene.add(this.shadow);

// Model
this.model = new THREE.Object3D();
this.model.name = "Model";

// Controls
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.device = this.mode == "normal";
this.controls.inverse = false;
//this.controls.enableDamping = true;
//this.controls.dampingFactor = 0.25;
//this.controls.minPolarAngle = 0;
//this.controls.maxPolarAngle = Math.PI / 2 - 0.1;
//this.controls.minDistance = 15;
//this.controls.maxDistance = 40;
this.controls.target = new THREE.Vector3(0, 5, 0);
this.controls.update();

// Transform
//this.transform = new THREE.TransformControls(this.camera, this.renderer.domElement);
//this.transform.name = "Transform";
//this.scene.add(this.transform);

// Light
this.hemisphere = new THREE.HemisphereLight(0xffffff, 0x2ffffff, 0.8);
this.hemisphere.name = "Hemisphere";
this.hemisphere.position.set(0, 20, 1);
this.scene.add(this.hemisphere);

this.spotlight = new THREE.SpotLight(0xfffef4, 0.3, 0, Math.PI / 2);
this.spotlight.name = "Spot";
this.spotlight.position.set(12, 12, 10).multiplyScalar(3);
this.spotlight.target.position.set(0, 0, 0);
//this.spotlight.castShadow = true;
//this.spotlight.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(45, 1, 1, 1000));
//this.spotlight.shadow.bias = 0.0001;
//this.spotlight.shadow.mapSize.width = 2048;
//this.spotlight.shadow.mapSize.height = 2048;
this.camera.add(this.spotlight);

// Function
this.listen();
this.render();

this.debug();

Our idea is tell people about NASA missions. But only read about this is boring for most part of people. We create a concept for VR/AR app where people can see how satellites moving around the Earth and about their missions. In VR mode you can see Earth on the background, in AR mode you can see your location (room, street, garden etc.) and the satellites around you :) Next step is share Earth inforamition, about dangerous exents or any important events on the Earth and show their in VR/AR mode. What way is better then this to understand events, like floods or tornado and what you should do when this event near you?

When you move target to satellite you get all info about his mission. I thinks this is good way for share information about missions, this is more interesting.