/**
* Combining PIXI.js and THREE.js in one <canvas> Element
*
* Check the DOM, There's just one! 
* 
* The rotating image on top is just a PIXI Sprite to show that PIXI is present, ;-)
*
* Thanx and respect to Luigi Mannoni for the awesome THREE WebGL Tunnel 
* I've changed almost nothing. Only added some PIXI things in your THREE scene function 
* @see the original at: https://codepen.io/luigimannoni/pen/bdPVVz
*/

// Setup a PIXI stage and add it (canvas element) to the DOM
// settings don't really matter for the combi, only the dimensions

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.LINEAR;

this.app = new PIXI.Application( window.innerWidth, window.innerHeight , {
	//backgroundColor   : 0x000000,
	//transparent       : true,
	//resolution		  : 1, 
	antialias         : false,
	legacy            : true,
	clearBeforeRender : true,
	autoResize        : true,
	powerPreference   : 'high-performance'
});
document.body.appendChild(this.app.view);

// Set up the THREE scene that will be 'integrated' in PIXI.JS

function deg2rad(_degrees) { 
	return (_degrees * Math.PI / 180);
}
var mouseX = 0;
var mouseY = 0;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var innerColor = 0x2222ff; 
var cubecam = new THREE.CubeCamera(0.1, 120, 256);
cubecam.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
scene.add(cubecam);

		
// setup THREE WebGL renderer
var renderer = new THREE.WebGLRenderer({ 
	antialias: true
});
renderer.setClearColor(0x000000, 0);
renderer.setSize(window.innerWidth, window.innerHeight);
		
	/**
	* For the combi to work with only one <canvas> element,
	* Do not add the THREE <canvas> element to the DOM
 	*
	*	document.body.appendChild(renderer.domElement);   // Leave this out!
	*
	*/

camera.position.z = -110;
camera.lookAt(scene.position);

// Mesh
var group = new THREE.Group();
scene.add(group);

// Lights
var light = new THREE.AmbientLight(0x404040); // Soft white light
scene.add(light);

var directionalLight = new THREE.DirectionalLight(0xffffff, 1); 
directionalLight.position.set(0, 128, 128);
scene.add(directionalLight);

// Load texture first
THREE.ImageUtils.crossOrigin = '';
		 
var tunnelTexture = THREE.ImageUtils.loadTexture('https://luigimannoni.github.io/assets/001_electric.jpg');
tunnelTexture.wrapT = tunnelTexture.wrapS = THREE.RepeatWrapping;
tunnelTexture.repeat.set(1, 2);

// Tunnel Mesh
var tunnelMesh = new THREE.Mesh(
	new THREE.CylinderGeometry(50, 50, 1024, 16, 32, true),
	new THREE.MeshBasicMaterial({ 
		color       : innerColor,
		ambient     : innerColor,
		transparent : true,
		alphaMap    : tunnelTexture,
		shininess   : 0,
		side        : THREE.BackSide
	})
);
tunnelMesh.rotation.x = deg2rad(90);
tunnelMesh.position.z = 128;
scene.add(tunnelMesh);

// Cube Mesh
var cubeMesh = new THREE.Mesh(
	new THREE.BoxGeometry(32, 32, 32),
	new THREE.MeshPhongMaterial({ 
		color       : 0xffffff,
		ambient     : 0xffffff,
		transparent : false,
		envMap      : cubecam.renderTarget,
		shininess   : 100
	})
);
cubecam.position.z = cubeMesh.position.z = 5;
scene.add(cubeMesh);

// Starfield
var geometry = new THREE.Geometry();
for(i = 0; i < 5000; i++) {
	var vertex = new THREE.Vector3();
	vertex.x = Math.random() * 3000 - 1500;
	vertex.y = Math.random() * 3000 - 1500;
	vertex.z = Math.random() * 200 - 100;
	geometry.vertices.push(vertex)
}
var starField = new THREE.PointCloud(
	geometry, 
	new THREE.PointCloudMaterial({
		size  : 0.5,
		color : 0xffff99
	})
);
scene.add(starField);
starField.position.z = 400;

var time = new THREE.Clock();

		
/**
* Here comes PIXI again:
* Creating a PIXI.BaseTexture from the THREE scene 
*
* 'renderer.domElement' is the what would normally be added by THREE as/in a <canvas> to the DOM
*/
var THREE_TEXTURE = PIXI.BaseTexture.fromCanvas(renderer.domElement, PIXI.SCALE_MODES.LINEAR); 
var THREE_SPRITE = new PIXI.Sprite.from(new PIXI.Texture(THREE_TEXTURE));
this.app.stage.addChild(THREE_SPRITE); 

// Adding just some PIXI sprite based on the same image the Tunnel is based on:
// (animating it later on a little)
var somePIXIsprite = new PIXI.Sprite.fromImage('https://luigimannoni.github.io/assets/001_electric.jpg');
	somePIXIsprite.scale.set(0.2);
	somePIXIsprite.x = window.innerWidth/3;
	somePIXIsprite.y = window.innerHeight/3;
	somePIXIsprite.anchor.set(0.5);
this.app.stage.addChild(somePIXIsprite); 


// Then a requestAnimationFrame function, that will loop.... forever
// Inside THREE does its thing, animating the WebGL tunnel
// And because of PIXI's `RIDE THE LIGHTNING` SPEED .. it (PIXI) captures THREE's changes every frame, 60 times a second, and....

var render = function() {  
	
	// First THREE
	camera.position.x = mouseX * 0.05;
	camera.position.y = -mouseY * 0.05;
	camera.lookAt(scene.position);
	
	cubeMesh.rotation.x += 0.01;
	cubeMesh.rotation.y += 0.01;
	cubeMesh.rotation.z += 0.01;
	
	starField.rotation.z += 0.005;
	
	var innerShift = Math.abs(Math.cos(((time.getElapsedTime() + 2.5) / 20)));
	var outerShift = Math.abs(Math.cos(((time.getElapsedTime() + 5) / 10)));
	
	starField.material.color.setHSL(Math.abs(Math.cos((time.getElapsedTime() / 10))), 1, 0.8);
	
	tunnelMesh.material.color.setHSL(Math.abs(Math.cos((time.getElapsedTime() / 10))), 1, 0.5);
	
	tunnelTexture.offset.y = time.getElapsedTime() / 2;
	tunnelTexture.offset.x = time.getElapsedTime() / 6;
	
	cubeMesh.visible = false;
	cubecam.updateCubeMap(renderer, scene);
	cubeMesh.visible = true;

	// THREE Renders (updates its scene) at 60 FPS		
	
	renderer.render(scene, camera);  
	
		/**
		* And here is it,
		* one simple short magic piece of code 
		* PIXI updates the created BaseTexture every Frame, at 60 FPS 
		*/
		THREE_TEXTURE.update(); 
		
		
		// animate the PIXI Sprite image a little
		somePIXIsprite.rotation += 0.01;
	
	
	// making the Render function loop
	requestAnimationFrame(render)  
};

render(); // init the render (requestAnimationFrame) function



// Then some mouse and resize events 
// These will remain to work, because PIXI renders and captures every move THREE makes

document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
	var vw = window.innerWidth;
	var vh = window.innerHeight;
	
	camera.aspect = vw / vh;
	camera.updateProjectionMatrix();
	renderer.setSize(vw, vh);
	
	// Resizing for PIXI 
	this.app.renderer.resize(vw, vh);
}

function onDocumentMouseMove( event ) {
	mouseX = event.clientX - window.innerWidth/2;
	mouseY = event.clientY - window.innerHeight/2;
}


// That's it!!!