Video360: clean code, don't create the scene at start

Author: mr21

compressed.js

@@ -77,6 +77,8 @@ window.dom = {
 			ctrlTimeDuration: $( ".ctrl .position .duration" ),
 
 		// Right
+			// Video 360
+			ctrl360Btn: $( ".ctrl .btn.video360" ),
 			// Frame capture
 			ctrlCaptureBtn: $( ".ctrl .btn.capture" ),
 			// Visualisations

dom.js

@@ -0,0 +1,3 @@
+"use strict";
+
+dom.ctrl360Btn.click( ui.video360Toggle );

event/video360.js

@@ -103,6 +103,10 @@
 				</span>
 			</div>
 			<div class="right">
+				<a class="btn video360 fa"
+					style="display: none;"
+					data-jquery-element="tooltip"
+					data-tooltip-content="Video 360&deg;"></a>
 				<a class="btn capture fa fa-camera"
 					data-jquery-element="tooltip"
 					data-tooltip-content="Frame capture"></a>
@@ -268,6 +272,7 @@
 	<script src="event/subtitles.js"></script>
 	<script src="event/thumbnail.js"></script>
 	<script src="event/video.js"></script>
+	<script src="event/video360.js"></script>
 	<script src="event/visualisations.js"></script>
 	<script src="event/volume.js"></script>
 <!-- -->

index.html

@@ -47,6 +47,7 @@ api.audio.volume( vol );
 api.playlist.repeat( plMode );
 
 ui
+	.video360Toggle( false )
 	.visualizerSelect( "Oscilloscope" )
 	.visualizerToggle( !!window.AudioContext )
 	.pause()

init.js

@@ -5,7 +5,7 @@
 var loaded = false;
 
 window.api = {
-	version: "0.8.19",
+	version: "0.8.20",
 	thumbnail: {}
 };
 

main.js

@@ -3,81 +3,84 @@
 (function() {
 
 var
-	isReady,
-	isEnable,
-
-	canvas = document.createElement( "canvas" ),
-	canvasCtx = canvas.getContext( "2d" ),
+	sceneCreated,
+	canvas,
+	canvasCtx,
+	scene,
+	renderer,
+	camera,
+	texture,
+	sphere
+;
 
-	scene = new THREE.Scene(),
+function createScene() {
+	// Scene, renderer:
+	scene = new THREE.Scene();
 	renderer = new THREE.WebGLRenderer( {
 		canvas: ui.canvasWebgl.canvas,
 		context: ui.canvasWebgl.ctx
-	}),
-	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ),
-	texture = new THREE.Texture( canvas ),
+	});
+
+	// Camera:
+	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, .5, 2 );
+	camera.rotation.y += -Math.PI / 2;
+	scene.add( camera );
+
+	// Sphere's texture:
+	canvas = document.createElement( "canvas" );
+	canvasCtx = canvas.getContext( "2d" );
+	texture = new THREE.Texture( canvas );
+	texture.minFilter = THREE.LinearFilter;
+	
+	// Sphere, texture:
 	sphere = new THREE.Mesh(
-		new THREE.SphereGeometry( 100, 32, 32, 0, Math.PI * 2, 0, Math.PI ),
+		new THREE.SphereGeometry( 1, 32, 32, 0, Math.PI * 2, 0, Math.PI ),
 		new THREE.MeshBasicMaterial({
 			map: texture,
 			overdraw: true,
 			side: THREE.BackSide
 		})
-	)
-;
-
-function createScene() {
-	lg("create scene");
-
-	// Camera
-	// camera.position.set( 60, 60, 60 );
-	camera.rotation.y += -Math.PI / 2;
-	// camera.lookAt( scene.position );
-	scene.add( camera );
-
-	// var axes = new THREE.AxisHelper(100);
-	// scene.add( axes );
-
-	// Init Sphere video
-	// Init video canvas
-	canvas.width = 854;
-	canvas.height = 480;
-
-	// Init sphere texture ( associate with canvas )
-	texture.minFilter = THREE.LinearFilter;
-
-	// Init sphere mesh
+	);
 	scene.add( sphere );
 }
 
 function frame( obj ) {
-	lg("frame");
-	
+	// Update the renderer's dimensions:
 	renderer.setSize( window.innerWidth, window.innerHeight );
 	camera.aspect = window.innerWidth / window.innerHeight;
 	camera.updateProjectionMatrix();
-	
+
+	// Sphere's texture:
+	canvas.width = api.videoElement.videoWidth;
+	canvas.height = api.videoElement.videoHeight;
 	canvasCtx.save();
 		canvasCtx.scale( -1, 1 );
 			canvasCtx.drawImage( api.videoElement, -canvas.width, 0, canvas.width, canvas.height );
-	canvasCtx.restore();
-	
+	canvasCtx.restore();	
 	texture.needsUpdate = true;
+
+	// Render:
 	renderer.render( scene, camera );
 }
 
+ui.video360Enabled = false;
 ui.video360Toggle = function( b ) {
 	if ( typeof b !== "boolean" ) {
-		b = !isEnable;
+		b = !ui.video360Enabled;
 	}
+	ui.video360Enabled = b;
 	if ( b ) {
-		if ( !isReady ) {
+		if ( !sceneCreated ) {
 			createScene();
-			isReady = true;
+			sceneCreated = true;
 		}
 		ui.canvasWebgl.render( frame );
 	}
 	ui.canvasWebgl.toggle( b );
+	dom.ctrl360Btn
+		.removeClass( "fa-check-circle-o fa-circle-o" )
+		.addClass( b ? "fa-check-circle-o" : "fa-circle-o" )
+	;
 	return ui;
 };