//MAIN CONTROLLER OF THE WEBSITE

define(["setTheStyle", "../lib/three.js/three", "../lib/three.js/orbitControls", "../lib/three.js/firstPersonControls", "../lib/three.js/projector", "../lib/three.js/canvasRenderer", "../lib/three.js/stereoEffect", "../lib/three.js/deviceOrientationControls", "../lib/three.js/stats.min"], function(setTheStyle, THREE, orbitControls, firstPersonControls, Projector, CanvasRenderer, StereoEffect, DeviceOrientationControls, stats) {

var rloop = {

mobile: undefined,

portrait:undefined,

camera: undefined,

renderer: undefined,

scene: undefined,

content3D: undefined,

frameID: undefined,

textures: undefined,

speedFactor: undefined,

particles:undefined,

bufferParticles:undefined,

particlesOld:undefined,

animating:undefined,

animatingTween:undefined,

whiteColor:undefined,

animationStep:undefined,

goForward:undefined,

goBack:undefined,

tweensArray:undefined,

webglAvailable: undefined,

geometriesArray: undefined,

idleWithParticles: undefined

}

/***private vars***/

var camFOV = 45;

var width, height;

var camNear = 0.01;

var camFar = 300;

var controls;

var controlsFPS;

var container;

var raycaster;

var mouse;

var clock;

var cubeContainer = null;

var cubeArray = [];

var w = 20;

var h = 15;

var debugging = false;

var imagesArray = [];

var countLoading = 0;

var t;

var imageSteps = ['theraceison.png', 'hyperloop.png', 'earthmap.png', 'justdots.png', 'ppl.png', 'arrow_small.png', 'backdots.png', 'arrow_small_3.png', 'arrow_small_3_rev.png', 'musk_sm.png', 'brain.png' ,'infinity.png'];

var loadedSteps = {};

var imageAssets = [];

var currentStage = 0;

var scrollMagicController;

var firstTextAnimationsNotComplete = true;

var newGeometry;

var shaderMaterial;

var material;

var prevValue = {

width: 0,

height: 0

}

var iconImages = ['ico__01.png', 'ico__02.png', 'ico__03.png', 'ico__04.png'];

var iconImages2 = ['ico__large_01.png', 'ico__large_03.png', 'ico__large_02.png', 'ico__large_04.png', 'rocket.png', 'infinity.png', 'projectX.png', 'coins.png', 'earth.png'];

var iconLogoImages = ['logoP.png', 'logoDungi.png', 'logoTata.png', 'logoSlack.png', 'logoTE.png', 'logoArx.png', 'logoDigi.png', 'logosaAuto.png', 'rsystems.png'];

var iconLogo2Images = ['logosCBS.png', 'logosBBC.png', 'logosForbes.png', 'logosWired.png', 'logosEcono.png', 'logosWSJ.png', 'logosCNBC.png', 'logosEngi.png'];

var coinImage = 'coin.png';

var iconTexts = [{s:780,m:'MPH'}, {s:500,m:'MPH'}, {s:200,m:'MPH'}, {s:80,m:'MPH'}]

var iconMaterials = [];

var iconSprites = [];

var iconSprites2 = [];

var textGeomsArray = [];

var iconObject;

var iconObjectStep2;

var coinObject;

var slidesScenes = [];

var logo1Array = [];

var logo2Array = [];

var logo1Object;

var logo2Object;

var cameraInitialPosition;

var cameraLookAtNeutral = new THREE.Vector3(0,0,0);

var bufferInitialPosition = new THREE.Vector3(0,0,0);

var bufferInitialRotation = new THREE.Vector3(0,0,0);

var tweensContainer = [];

var groupA, groupB, groupC, groupD, groupE, groupF, groupG, groupH, groupI, groupPoints;

var defaultPixedSize = 1;

var slides;

var circleCenter = new THREE.Vector3(15, 0, 0);

var enableNext = true;

var myScroll;

var scenes = [];

var activeScenes = [];

/*** public function ***/

$.fn.bindFirst = function(name, fn) {

var elem, handlers, i, _len;

this.bind(name, fn);

for (i = 0, _len = this.length; i < _len; i++) {

elem = this[i];

handlers = jQuery._data(elem).events[name.split('.')[0]];

handlers.unshift(handlers.pop());

}

};

function createScenes() {

slidesScenes = [];

slides = document.querySelectorAll("section.pageClass")

for (var i=0; i<slides.length; i++) {

var s = new ScrollMagic.Scene({

triggerElement: slides[i]

})

.setPin(slides[i])

.on('enter', function (e){

//leavingScene( e );

//console.log('entered')

startScene( e );

})

.on('start' , function (e){

leavingScene ( e );

})

.on('progress', function (e) {

progressInScene()

})

.on('update', function (e) {

//console.log('should update...?' + e);

var currentMoving = parseInt($(e.target.triggerElement()).attr('id').split('pag')[1]) - 1;

//console.log('current moving: ', currentMoving, 'current stage: ', currentStage)

if (currentMoving != currentStage) return;

sliderUpdate(e);

} )

.on('shift', function(e){

//console.log('shifted: ', $(e.target.triggerElement()).attr('id') );

})

.addTo(scrollMagicController)

//if (!rloop.mobile) s.addIndicators();

slidesScenes.push(s);

}

}

rloop.PreInit = function(isMobile, portrait, data) {

//jq("#header").sticky({topSpacing:0, zIndex:10000});

//jq("#coin").sticky({topSpacing:0, zIndex:10005});

// FUNCTION INITIALIZING ALL USED VARS

var timer;

var scrolling = false;

rloop.mobile = isMobile;

rloop.portrait = portrait;

//ADDING SCROLLMAGIC CONTROLLER TO CONTROL THML SLIDES AND POSITIONS AND EVENTS

if (rloop.mobile)

{

scrollMagicController = new ScrollMagic.Controller({

container: "#containerScroll",

globalSceneOptions: {

triggerHook: 'onLeave',

}

});

}

else {

scrollMagicController = new ScrollMagic.Controller({

//container: "#containerScroll",

// duration: "100%",

globalSceneOptions: {

triggerHook: 'onLeave',

}

});

}

slides = document.querySelectorAll("section.pageClass")

//ADDING SLIDES TO CONTROLLER FROM HTML, ADDING CALLBACK FUNCTIONS ON EVENTS

for (var i=0; i<slides.length; i++) {

var s = new ScrollMagic.Scene({

triggerElement: slides[i]

})

.setPin(slides[i])

.on('enter', function (e){

//leavingScene( e );

//console.log('entered')

startScene( e );

})

.on('start' , function (e){

leavingScene ( e );

})

.on('progress', function (e) {

progressInScene()

})

.on('update', function (e) {

//console.log('should update:..' , e)

var currentMoving = parseInt($(e.target.triggerElement()).attr('id').split('pag')[1]) - 1;

//console.log('current moving: ', currentMoving, 'current stage: ', currentStage)

if (currentMoving != currentStage) return;

sliderUpdate(e);

} )

.on('shift', function(e){

//console.log('shifted: ', $(e.target.triggerElement()).attr('id') );

})

.addTo(scrollMagicController)

//if (!rloop.mobile) s.addIndicators();

slidesScenes.push(s);

}

//IF MOBILE ADDING EXTRA ISCROLL ACORDING TO MAGIKSCROLLER DOCUMENTATION

if (rloop.mobile)

{

myScroll = new IScroll('#containerScroll', {

scrollX: false,

// but do scroll vertical

scrollY: true,

// show scrollbars

scrollbars: false,

snap: false,

// deactivating -webkit-transform because pin wouldn't work because of a webkit bug: https://code.google.com/p/chromium/issues/detail?id=20574

// if you dont use pinning, keep "useTransform" set to true, as it is far better in terms of performance.

useTransform: false,

// deativate css-transition to force requestAnimationFrame (implicit with probeType 3)

useTransition: false,

// set to highest probing level to get scroll events even during momentum and bounce

// requires inclusion of iscroll-probe.js

probeType: 3,

// pass through clicks inside scroll container

click: true

}

);

scrollMagicController.scrollPos(function(){

return -myScroll.y;

});

myScroll.on('scroll', function(){

scrollMagicController.update();

});

}

scrollMagicController.enabled(false);

// SETTING LAYOUT

setTheStyle.set_layout();

rloop.scene = new THREE.Scene();

container = document.getElementById("webGLContent");

width = container.clientWidth;

height = container.clientHeight;

//LINKS TO IMAGES USED

var imageAssets = [

{ name: 'step1', url:'theraceison.png'},

{ name: 'step2', url:'hyperloop.png'},

{ name: 'step3', url:'earthmap.png'}

];

this.textures = {};

this.geometriesArray = [];

this.speedFactor = 0.03;

this.particles = {};

this.animating = false;

this.animationStep = 0;

this.goForward = 1;

this.goBack = -1;

this.animatingTween = false;

this.whiteColor = new THREE.Color('rgb(255,255,255)');

this.idleWithParticles = false;

//rloop.scene.add(iconObject);

groupA = new TWEEN.Group();

groupB = new TWEEN.Group();

groupC = new TWEEN.Group();

groupD = new TWEEN.Group();

groupE = new TWEEN.Group();

groupF = new TWEEN.Group();

groupG = new TWEEN.Group();

groupH = new TWEEN.Group();

groupI = new TWEEN.Group();

groupPoints = new TWEEN.Group();

prevValue.width = window.innerWidth;

prevValue.height = window.innerHeight;

clock = new THREE.Clock();

//CALCULATING ZOOM FOR CAMERA FOV TO FIT ALL PARTICLES ON ALL SCREENS

var zoomFromStandard = window.innerWidth / (1600 ) ;

var heightZoomFromStandard = window.innerHeight / 1000;

defaultPixedSize = defaultPixedSize * (zoomFromStandard*1.2);

if (zoomFromStandard>1 || rloop.mobile) defaultPixedSize = 1;

if (heightZoomFromStandard < 1 && !rloop.mobile && defaultPixedSize>=1 )

defaultPixedSize = 1 * heightZoomFromStandard * 1.2;

if (defaultPixedSize>1.1) defaultPixedSize = 1.1;

//INITIALIZIND THE THREE SCENE

addRenderer3D(container, width, height);

addCamera3D();

addImages();

addIcons();

addLight3D();

addControls();

t = setInterval(function() {

if (imageSteps.length == countLoading) {

//WAITING FOR IMAGES TO LOAD, THEN CREATING THE FIRST GEOMETRY

//AND STARTING FIRST INTRO ANIMATION

clearInterval(t);

rloop.animationStep = 0;

generateAllGeometries();

var partOobj = createGeometryFromInameData(loadedSteps[imageSteps[rloop.animationStep]].imgData, loadedSteps[imageSteps[rloop.animationStep]].img);

rloop.particles = partOobj.particles;

rloop.bufferParticles = partOobj.bParticles;

rloop.scene.add(rloop.bufferParticles);

startAnimationStep(rloop.particles);

}

}, 500)

//addEvents();

onWindowResize();

window.addEventListener( 'resize', onWindowResize, false );

rloop.Animate();

}

var currentPage = 0;

function addEvents()

{

//ADDING EVENT TO INTERFACE

$('#logoCont').on('click', function(e){

//click on logo

var durr = currentPage * 300;

currentPage = 0;

gotoPageAndFade(0, -1, durr);

})

$('#roadmapBtn').on('click', function (e){

var url = 'pdf/roadmap.pdf';

window.open(url,'_blank');

//Clicked on road map

})

$('#onePagerBtn').on('click', function (e){

var url = 'pdf/rLoop_one_pager.pdf';

window.open(url,'_blank');

//Clicked on one pager

})

//watchVideoBtn

$('#btnh1').on('click', function(e){

//Clicked on reddit

var url = 'https://www.reddit.com/r/rLoop/';

window.open(url,'_blank');

})

$('#btnh2').on('click', function(e){

//Clicked on youtube

var url = 'https://www.youtube.com/channel/UCFxqcu0vH567d1F09xso8Tg';

window.open(url,'_blank');

})

$('#btnh3').on('click', function(e){

//Clicked on twitter

var url = 'https://twitter.com/rLoopTeam';

window.open(url,'_blank');

})

$('#btnh4').on('click', function(e){

var url = 'pdf/rLoop_one_pager.pdf';

window.open(url,'_blank');

//Clicked on one pager

})

$('#btnh5').on('click', function(e){

var url = 'https://www.dropbox.com/s/88ikgggqw89i1z5/rloop%20whitepaper%20v1.0.pdf?dl=0';

window.open(url,'_blank');

//Clicked on one pager

})

document.getElementById('btnDown').addEventListener('click', function(event){

var nextPage = currentPage + 1 < slides.length ? currentPage+1 : -1;

if (nextPage >=0) {

//console.log('enableNext: ', enableNext);

if (enableNext) {

runTimer();

}

else return;

if (gotoPageAndFade(nextPage, currentPage)) currentPage = nextPage;

}

});

document.getElementById('btnUp').addEventListener('click', function(event){

var nextPage = currentPage - 1 >= 0 ? currentPage - 1 : -1;

if (nextPage >=0) {

if (enableNext) {

runTimer();

}

else return;

if (gotoPageAndFade(nextPage, currentPage)) currentPage = nextPage;

}

});

// CODE FOR POPUPS:

var div = document.getElementById("popupVid");

var iframe;

var vidHolder;

var isVideo = false;

var p = $(".popup__overlay");

$("#watchVideoBtn").click(function() {

isVideo = true;

p.css("display", "block");

p.css("visibility", "visible").css("opacity", "1");

vidHolder = $(".videoHolder")[0];

disableScroll();

$(vidHolder).css("display", "block");

iframe = div.getElementsByTagName("iframe")[0].contentWindow;

iframe = $('#vidframe1')[0].contentWindow;

document.getElementById('popupVid').style.paddingTop = '0px';

});

$("#watchVideoBtn2").click(function() {

isVideo = true;

p.css("display", "block");

p.css("visibility", "visible").css("opacity", "1");

disableScroll();

vidHolder = $(".videoHolder")[1];

$(vidHolder).css("display", "block");

iframe = div.getElementsByTagName("iframe")[1].contentWindow;

document.getElementById('popupVid').style.paddingTop = '0px';

});

$('#inputNow').click(function(){

isVideo = false;

p.css("display", "block");

p.css("visibility", "visible").css("opacity", "1");

disableScroll();

vidHolder = $(".videoHolder")[2];

$(vidHolder).css("display", "block");

iframe = div.getElementsByTagName("iframe")[2].contentWindow;

document.getElementById('popupVid').style.paddingTop = '40px';

})

p.click(function(event) {

e = event || window.event;

if (e.target == this) {

p.css("visibility", "hidden").css("opacity", "0");

$(vidHolder).css("display", "none");

if (isVideo) toggleVideo("hide");

isVideo = false;

}

});

$(".popup__close").click(function(event) {

p.css("visibility", "hidden").css("opacity", "0");

$(vidHolder).css("display", "none");

if (isVideo) toggleVideo("hide");

isVideo = false;

});

//video popup

function toggleVideo(state) {

func = state == "hide" ? "pauseVideo" : "playVideo";

iframe.postMessage(

'{"event":"command","func":"' + func + '","args":""}',

"*"

);

}

window.addEventListener('wheel', function(event){

event.preventDefault();

event.stopPropagation();

var nextPage;

if (event.deltaY > 0)

{

nextPage = currentPage + 1 < slides.length ? currentPage+1 : -1;

} else {

nextPage = currentPage - 1 >= 0 ? currentPage - 1 : -1;

}

if (nextPage >=0) {

if (enableNext) {

runTimer();

}

else return;

//console.log('goin to: ', nextPage);

if (gotoPageAndFade(nextPage, currentPage)) currentPage = nextPage;

}

});

$(window).on('touchstart', function(e)

{

// if ($(e.target).closest('#mobileMenuHeader').length == 1)

// {

// blockMenuHeaderScroll = true;

// }

});

$(window).on('touchend', function()

{

//blockMenuHeaderScroll = false;

});

$(window).on('touchmove', function(e)

{

e.preventDefault();

});

document.addEventListener('scroll', function(event){

E.preventDefault();

});

}

function generateAllGeometries()

{

//FUNCTION TO GENERATE THE GEOMETRIE FROM IMAGE DATA

//// First Element is THE RACE IS ON

var el = createGeomFromImageData(loadedSteps[imageSteps[0]].imgData);

rloop.geometriesArray.push(el);

//// SECOND ELEMENT IS HYPERLOOPO

el = createGeomFromImageData(loadedSteps[imageSteps[1]].imgData);

rloop.geometriesArray.push(el);

//// THIRD ELEMENT IS CIRCLE

//createThreeCirclesGeometry ( spritesPerCircle, raza1, zDistance, xDistance, numberOfCircles, center, scaleFactor, firstScale, , distort, sameScale, distanceMultiplier

//coinObject.position = circleCenter;

el = createThreeCirclesGeometry(70, 15, 5, 3, 4, circleCenter, 1.4, 1.5, Math.PI/140);

rloop.geometriesArray.push(el);

//// FOURTH ELEMENT IS MAP!!!

el = createGeomFromImageData(loadedSteps[imageSteps[2]].imgData);

rloop.geometriesArray.push(el);

//// Fifth ELEMENT IS the the speed dots

el = createGeomFromImageData(loadedSteps[imageSteps[3]].imgData);

rloop.geometriesArray.push(el);

//// Sixth ELEMENT IS the people

el = createGeomFromImageData(loadedSteps[imageSteps[4]].imgData, 1.8, true);

rloop.geometriesArray.push(el);

//// Seventh ELEMENT IS the arrow

el = createGeomFromImageData(loadedSteps[imageSteps[5]].imgData, 1.8, true);

rloop.geometriesArray.push(el);

// Eight ELEMENT is arrow + logo bg

var temp = createGeomFromImageData(loadedSteps[imageSteps[6]].imgData, 1.8, true);

el = addTwoGeometries(rloop.geometriesArray[6], temp, 37);

rloop.geometriesArray.push(el);

// Ninth ELEMENT is arrow + logo bg + arrow*3

var temp = createGeomFromImageData(loadedSteps[imageSteps[7]].imgData, 1.8, true);

el = addTwoGeometries(rloop.geometriesArray[7], temp, 75);

rloop.geometriesArray.push(el);

// Tenth ELEMENT is arrow + logo bg + arrow*3 + arrow*3 reversed

var temp = createGeomFromImageData(loadedSteps[imageSteps[8]].imgData, 1.8, true);

el = addTwoGeometries(rloop.geometriesArray[8], temp, 123);

rloop.geometriesArray.push(el);

//// Eleventh ELEMENT IS the MUSK

el = createGeomFromImageData(loadedSteps[imageSteps[9]].imgData, 1.5, true);

rloop.geometriesArray.push(el);

//// Twelvth ELEMENT IS the circles inside

var circCent = new THREE.Vector3(0,0,0)

//circCent.y -= 20;

el = createThreeCirclesGeometry(50, 13, 20, 0, 10, circCent, 1, 1.5, 0, true, 1);

rloop.geometriesArray.push(el);

//// Thirteenth ELEMENT IS the BRAIN

el = createGeomFromImageData(loadedSteps[imageSteps[10]].imgData, 1.5, true);

rloop.geometriesArray.push(el);

//// Fourteenth ELEMENT IS the LAST CIRCLES

el = createThreeCirclesGeometry(60, 25, 9, 5.6, 5, new THREE.Vector3(0,0,0), 1.2, 2.2, Math.PI/60, false, 1);

rloop.geometriesArray.push(el);

//console.log('All geometries generated: ', rloop.geometriesArray);

}

var time = 0;

rloop.Animate = function(a) {

//looping animation function

//GROUTS ARE DIFFERENT TWEENING GROUPS THAAT EACH CONTAIN ANIMATIONS THAT NEED TO RUN/STOP AT DIFFERENT TIMES

//console.log('a: ', a);

if (debugging) stats.begin();

TWEEN.update();

groupA.update();

groupB.update();

groupC.update();

groupD.update();

groupE.update();

groupF.update();

groupG.update();

groupH.update();

groupI.update();

groupPoints.update();

if (rloop.animatingTween)

{

//if (rloop.bufferParticles) console.log('animating particles: ', rloop.bufferParticles.geometry.attributes.alpha.array[0])

rloop.particles.geometry.verticesNeedUpdate = true;

rloop.bufferParticles.geometry.attributes.position.needsUpdate = true;

rloop.bufferParticles.geometry.attributes.alpha.needsUpdate = true; // important!

}

if (rloop.idleWithParticles)

{

time++;

rloop.bufferParticles.rotation.y = Math.sin(time / 5000) ;

}

rloop.renderer.render(rloop.scene, rloop.camera);

if (debugging) stats.end();

rloop.frameID = requestAnimationFrame(rloop.Animate);

}

/*** private functions ***/

function addRenderer3D(cont, w, h) {

// adding renderer

rloop.webglAvailable = webglAvailable();

//console.log('webGl available: ', rloop.webglAvailable);

rloop.renderer = rloop.webglAvailable ? new THREE.WebGLRenderer({

antialias: true,

alpha: true,

transparent: true

}) : new THREE.CanvasRenderer({

antialias: true,

alpha: true

});

rloop.renderer.setPixelRatio(window.devicePixelRatio)

rloop.renderer.sortElements = true;

rloop.renderer.setSize(w, h);

rloop.renderer.domElement.id = 'webGLCanv';

rloop.renderer.setClearColor(0x000000, 0 );

rloop.renderer.gammaInput = true;

rloop.renderer.gammaOutput = true;

cont.appendChild(rloop.renderer.domElement);

cont.getShaderInfoLog = function () { return '' };

}

function addCamera3D() {

//adding camera

if (rloop.portrait) {

//camFOV = camFOV * 2.3;

// defaultPixedSize = defaultPixedSize / 1.5;

}

//console.log('cam fov:', camFOV, rloop.mobile, rloop.portrait)

rloop.camera = new THREE.PerspectiveCamera(camFOV, width / height, camNear, camFar);

rloop.camera.position.set(-0, 0, 32.5);

rloop.camera.rememberPosition = rloop.camera.position.clone();

cameraInitialPosition = rloop.camera.position.clone();

//(0, 50, 10);

rloop.scene.add(rloop.camera);

}

function addControls() {

// adding controls

raycaster = new THREE.Raycaster();

mouse = new THREE.Vector2();

controls = new THREE.OrbitControls(rloop.camera, rloop.renderer.domElement);

controls.minDistance = 5;

controls.maxDistance = 23;

controls.enableDamping = true;

controls.dampingFactor = 0.1;

//controls.maxPolarAngle = 1.5 * Math.PI / 2;

//controls.minPolarAngle = 0.4 * Math.PI / 2;

controls.rotateSpeed = 0.1;

controls.target = new THREE.Vector3(0, 0, 0);

controls.target0 = new THREE.Vector3(0, 0, 0);

controls.enableKeys = true;

//controls.enablePan =false;

if (debugging) {

//console.log('debug mode');

controls.enablePan = true;

controls.enableRotate = true;

controls.enableZoom = true;

controls.minDistance = 1;

controls.maxDistance = Infinity;

controls.minZoom = 0;

controls.maxZoom = Infinity;

addStats();

}

controls.autoRotate = true;

controls.autoRotateSpeed = -0.055;

controls.update();

}

function addIcons() {

coinObject = new THREE.Object3D();

var coinTex = new THREE.TextureLoader().load("img/assets/"+ coinImage);

var coinMat = new THREE.MeshBasicMaterial({map:coinTex, transparent: true})

var coinMesh = new THREE.Mesh(new THREE.CylinderGeometry(5,5,0.01,48, 1, false), coinMat);

coinMesh.rotation.x -= Math.PI/2;

coinMesh.rotation.y += Math.PI/2;

//coinMesh.rotation.z -=Math.PI/2;

coinMesh.position.x = 0;

coinMesh.position.y = 0;

coinObject.position.x = circleCenter.x - 7.1;

coinObject.position.y = circleCenter.y + 0.5;

coinObject.rotation.y = Math.PI/2 - Math.PI/11.25;

coinObject.visible = false;

//coinObject.

coinObject.position.z = 3;

coinObject.add(coinMesh);

rloop.scene.add(coinObject);

iconObject = new THREE.Object3D();

for (var q=0;q<iconImages.length;q++)

{

// iconImages[q]

var spriteMaT = new THREE.TextureLoader().load("img/sprites/"+ iconImages[q], function(img){

//console.log('loaded: ', img);

});

var spriteii = new THREE.Sprite( new THREE.SpriteMaterial( {

map:spriteMaT,

color: 0xFFFFFF,

//blending: THREE.AdditiveBlending,

depthTest: false,

depthWrite:false,

transparent: true

}) );

//console.log('generated sprite: ', spriteii);

spriteii.position.set(0,0,0);

spriteii.scale.set(1, 1, 1);

spriteii.visible = false;

//iconArray.push(spriteii);

iconSprites.push(spriteii);

iconObject.add(spriteii);

//rloop.scene.add(spriteii);

}

logo1Object = new THREE.Object3D();

for (q = 0;q<iconLogoImages.length;q++)

{

var spriteM = new THREE.TextureLoader().load("img/sprites/logos/"+iconLogoImages[q]);

var spr = new THREE.Sprite( new THREE.SpriteMaterial( {

map:spriteM,

color: 0xFFFFFF,

depthTest: false,

depthWrite:false,

transparent: true

} ))

spr.scale.set(4.8, 4.8, 4.8);

switch (q) {

case 0:

spr.position.set(5, 4.5, 0);

break;

case 1:

spr.position.set(9.2, 7, 0)

spr.scale.set(3,3,3)

break;

case 2:

spr.position.set(13, 5, 0)

spr.scale.set(3.7,3.7,3.7)

break;

case 3:

spr.position.set(8.2, 0.5, 0)

spr.scale.set(4.1,4.1,4.1)

break;

case 4:

spr.position.set(14.2, -0.1, 0)

spr.scale.set(5.1,5.1,5.1)

break;

case 5:

spr.position.set(5, -5, 0)

spr.scale.set(3.8,3.8,3.8)

break;

case 6:

spr.position.set(10, -4.5, 0)

spr.scale.set(4.1,4.1,4.1)

break;

case 7:

spr.position.set(15, -6.5, 0)

spr.scale.set(4.7,4.7,4.7)

break;

case 8:

spr.position.set(3, -0.5, 0)

spr.scale.set(4.4,4.4,4.4)

break;

}

spr.scaleTo = spr.scale.clone();

spr.scale.set(0,0,0);

logo1Array.push(spr);

logo1Object.add(spr);

}

logo2Object = new THREE.Object3D();

for (q = 0;q<iconLogo2Images.length;q++)

{

var spriteM = new THREE.TextureLoader().load("img/sprites/logos/media/"+iconLogo2Images[q]);

var spr = new THREE.Sprite( new THREE.SpriteMaterial( {

map:spriteM,

color: 0xFFFFFF,

depthTest: false,

depthWrite:false,

transparent: true

} ))

spr.scale.set(4.8, 4.8, 4.8);

switch (q) {

case 0:

spr.position.set(5, 4.5, 0);

break;

case 1:

spr.position.set(9.2, 7, 0)

spr.scale.set(3,3,3)

break;

case 2:

spr.position.set(13, 5, 0)

spr.scale.set(3.7,3.7,3.7)

break;

case 3:

spr.position.set(8.2, 0.5, 0)

spr.scale.set(4.1,4.1,4.1)

break;

case 4:

spr.position.set(14.2, -0.1, 0)

spr.scale.set(5.1,5.1,5.1)

break;

case 5:

spr.position.set(5, -5, 0)

spr.scale.set(3.8,3.8,3.8)

break;

case 6:

spr.position.set(10, -4.5, 0)

spr.scale.set(4.1,4.1,4.1)

break;

case 7:

spr.position.set(15, -6.5, 0)

spr.scale.set(4.7,4.7,4.7)

break;

}

spr.scaleTo = spr.scale.clone();

spr.scale.set(0,0,0);

logo2Array.push(spr);

logo2Object.add(spr);

}

iconObjectStep2 = new THREE.Object3D();

for (q=0;q<iconImages2.length;q++)

{

var spriteMa = new THREE.TextureLoader().load("img/sprites/"+ iconImages2[q], function(img){

});

var spriteiii = new THREE.Sprite( new THREE.SpriteMaterial( {

map:spriteMa,

color: 0xFFFFFF,

depthTest: false,

depthWrite:false,

transparent: true

}) );

spriteiii.position.set(q*12 - 36,0,0);

spriteiii.scale.set(12, 12, 12);

if (q==1) spriteiii.scale.set(5, 5, 5);

if (q==3)

{

spriteiii.scale.set(20, 13, 20);

spriteiii.position.x += 20;

spriteiii.position.y += 1;

}

if (q==4)

{

spriteiii.position.x = 50;

spriteiii.position.y += 16;

spriteiii.scale.set(10, 12, 12);

}

if (q==5)

{

spriteiii.position.x = 50;

spriteiii.position.y = 0;

spriteiii.scale.set(14, 8, 1);

}

if (q==6)

{

spriteiii.position.x = 50;

spriteiii.position.y -= 16;

spriteiii.scale.set(15, 15, 1);

}

if (q==7)

{

spriteiii.position.x = 75;

}

if (q==8)

{

var plusSprite = iconSprites2[1].clone();

plusSprite.scaleTo = iconSprites2[1].scaleTo;

plusSprite.position.x = 87;

iconSprites2.push(plusSprite);

iconObjectStep2.add(plusSprite);

spriteiii.position.x = 99;

}

spriteiii.scaleTo = spriteiii.scale.clone();

spriteiii.visible = false;

iconSprites2.push(spriteiii);

iconObjectStep2.add(spriteiii);

}

var loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

for (q = 0;q<iconImages.length;q++)

{

var bothGeoms = new THREE.Object3D();

var geometry = new THREE.TextGeometry( iconTexts[q].s, {

font: font,

size: 0.9,

height: 0.01