Refactor to ES6

src/lib/controls/DeviceOrientationControls.js

@@ -1,11 +1,6 @@
-/**
- * @author richt / http://richt.me
- * @author WestLangley / http://github.com/WestLangley
- *
- * W3C Device Orientation control (http://w3c.github.io/deviceorientation/spec-source-orientation.html)
- */
+import 'three';
 
-THREE.DeviceOrientationControls = function( camera, domElement ) {
+function DeviceOrientationControls ( camera, domElement ) {
 
 	var scope = this;
 	var changeEvent = { type: 'change' };
@@ -148,15 +143,15 @@ THREE.DeviceOrientationControls = function( camera, domElement ) {
 
 		if ( scope.enabled === false ) return;
 
-		var alpha = scope.deviceOrientation.alpha ? THREE.Math.degToRad( scope.deviceOrientation.alpha ) + this.alphaOffsetAngle : 0; // Z
+		var alpha = scope.deviceOrientation.alpha ? THREE.Math.degToRad( scope.deviceOrientation.alpha ) + scope.alphaOffsetAngle : 0; // Z
 		var beta = scope.deviceOrientation.beta ? THREE.Math.degToRad( scope.deviceOrientation.beta ) : 0; // X'
 		var gamma = scope.deviceOrientation.gamma ? THREE.Math.degToRad( scope.deviceOrientation.gamma ) : 0; // Y''
 		var orient = scope.screenOrientation ? THREE.Math.degToRad( scope.screenOrientation ) : 0; // O
 
 		setCameraQuaternion( scope.camera.quaternion, alpha, beta, gamma, orient );
-		this.alpha = alpha;
+		scope.alpha = alpha;
 
-		ignoreUpdate !== true && this.dispatchEvent( changeEvent );
+		ignoreUpdate !== true && scope.dispatchEvent( changeEvent );
 
 	};
 
@@ -177,5 +172,10 @@ THREE.DeviceOrientationControls = function( camera, domElement ) {
 
 };
 
-THREE.DeviceOrientationControls.prototype = Object.create( THREE.EventDispatcher.prototype );
-THREE.DeviceOrientationControls.prototype.constructor = THREE.DeviceOrientationControls;
+DeviceOrientationControls.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype), {
+
+	constructor: DeviceOrientationControls
+
+} );
+
+export { DeviceOrientationControls };

src/lib/controls/OrbitControls.js

@@ -1,21 +1,6 @@
-/**
- * @author qiao / https://github.com/qiao
- * @author mrdoob / http://mrdoob.com
- * @author alteredq / http://alteredqualia.com/
- * @author WestLangley / http://github.com/WestLangley
- * @author erich666 / http://erichaines.com
- */
-/*global THREE, console */
-
-// This set of controls performs orbiting, dollying (zooming), and panning. It maintains
-// the "up" direction as +Y, unlike the TrackballControls. Touch on tablet and phones is
-// supported.
-//
-//    Orbit - left mouse / touch: one finger move
-//    Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
-//    Pan - right mouse, or arrow keys / touch: three finter swipe
-
-THREE.OrbitControls = function ( object, domElement ) {
+import 'three';
+
+function OrbitControls ( object, domElement ) {
 
 	this.object = object;
 	this.domElement = ( domElement !== undefined ) ? domElement : document;
@@ -833,5 +818,10 @@ THREE.OrbitControls = function ( object, domElement ) {
 
 };
 
-THREE.OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype );
-THREE.OrbitControls.prototype.constructor = THREE.OrbitControls;
+OrbitControls.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype ), {
+
+	constructor: OrbitControls
+
+} );
+
+export { OrbitControls };

src/lib/effects/CardboardEffect.js

@@ -1,8 +1,7 @@
-/**
- * @author mrdoob / http://mrdoob.com/
- */
 
-THREE.CardboardEffect = function ( renderer ) {
+import 'three';
+
+function CardboardEffect ( renderer ) {
 
 	var _camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 
@@ -64,7 +63,6 @@ THREE.CardboardEffect = function ( renderer ) {
 
 	//
 
-	// var material = new THREE.MeshBasicMaterial( { wireframe: true } );
 	var material = new THREE.MeshBasicMaterial( { map: _renderTarget.texture } );
 	var mesh = new THREE.Mesh( geometry, material );
 	_scene.add( mesh );
@@ -92,19 +90,26 @@ THREE.CardboardEffect = function ( renderer ) {
 		var width = _renderTarget.width / 2;
 		var height = _renderTarget.height;
 
+		if ( renderer.autoClear ) renderer.clear();
+
 		_renderTarget.scissor.set( 0, 0, width, height );
 		_renderTarget.viewport.set( 0, 0, width, height );
 		renderer.setRenderTarget( _renderTarget );
 		renderer.render( scene, _stereo.cameraL );
 
+		renderer.clearDepth();
+
 		_renderTarget.scissor.set( width, 0, width, height );
 		_renderTarget.viewport.set( width, 0, width, height );
 		renderer.setRenderTarget( _renderTarget );
 		renderer.render( scene, _stereo.cameraR );
 
+		renderer.clearDepth();
+
 		renderer.setRenderTarget( null );
 		renderer.render( _scene, _camera );
-
 	};
 
-};
+};
+
+export { CardboardEffect };

src/lib/effects/StereoEffect.js

@@ -0,0 +1,48 @@
+import 'three';
+
+const StereoEffect = function ( renderer ) {
+
+	var _stereo = new THREE.StereoCamera();
+	_stereo.aspect = 0.5;
+	var size = new THREE.Vector2();
+
+	this.setEyeSeparation = function ( eyeSep ) {
+
+		_stereo.eyeSep = eyeSep;
+
+	};
+
+	this.setSize = function ( width, height ) {
+
+		renderer.setSize( width, height );
+
+	};
+
+	this.render = function ( scene, camera ) {
+
+		scene.updateMatrixWorld();
+
+		if ( camera.parent === null ) camera.updateMatrixWorld();
+
+		_stereo.update( camera );
+
+		renderer.getSize( size );
+
+		if ( renderer.autoClear ) renderer.clear();
+		renderer.setScissorTest( true );
+
+		renderer.setScissor( 0, 0, size.width / 2, size.height );
+		renderer.setViewport( 0, 0, size.width / 2, size.height );
+		renderer.render( scene, _stereo.cameraL );
+
+		renderer.setScissor( size.width / 2, 0, size.width / 2, size.height );
+		renderer.setViewport( size.width / 2, 0, size.width / 2, size.height );
+		renderer.render( scene, _stereo.cameraR );
+
+		renderer.setScissorTest( false );
+
+	};
+
+};
+
+export { StereoEffect };