Support the latest version of three.js using ES6 modules

src/controls/Controls.Orbit.js

@@ -1,5 +1,5 @@
 import EventEmitter from 'eventemitter3';
-import THREE from 'three';
+import * as THREE from 'three';
 import OrbitControls from '../vendor/OrbitControls';
 import TweenLite from 'TweenLite';
 

src/engine/Camera.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 
 // This can only be accessed from Engine.camera if you want to reference the
 // same scene in multiple places

src/engine/DOMRenderer2D.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import {CSS2DRenderer} from '../vendor/CSS2DRenderer';
 import DOMScene2D from './DOMScene2D';
 

src/engine/DOMRenderer3D.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import {CSS3DRenderer} from '../vendor/CSS3DRenderer';
 import DOMScene3D from './DOMScene3D';
 

src/engine/DOMScene2D.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 
 // This can be imported from anywhere and will still reference the same scene,
 // though there is a helper reference in Engine.scene

src/engine/DOMScene3D.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 
 // This can be imported from anywhere and will still reference the same scene,
 // though there is a helper reference in Engine.scene

src/engine/EffectComposer.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import EffectComposer from '../vendor/EffectComposer';
 
 export default function(renderer, container) {

src/engine/Engine.js

@@ -1,5 +1,5 @@
 import EventEmitter from 'eventemitter3';
-import THREE from 'three';
+import * as THREE from 'three';
 import Scene from './Scene';
 import DOMScene3D from './DOMScene3D';
 import DOMScene2D from './DOMScene2D';

src/engine/Picking.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import {point as Point} from '../geo/Point';
 import PickingScene from './PickingScene';
 import throttle from 'lodash.throttle';

src/engine/PickingMaterial.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import PickingShader from './PickingShader';
 
 // FROM: https://github.com/brianxu/GPUPicker/blob/master/GPUPicker.js

src/engine/PickingScene.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 
 // This can be imported from anywhere and will still reference the same scene,
 // though there is a helper reference in Engine.pickingScene

src/engine/Renderer.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import Scene from './Scene';
 
 // This can only be accessed from Engine.renderer if you want to reference the

src/engine/Scene.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 
 // This can be imported from anywhere and will still reference the same scene,
 // though there is a helper reference in Engine.scene

src/layer/Layer.js

@@ -1,7 +1,7 @@
 import EventEmitter from 'eventemitter3';
 import extend from 'lodash.assign';
 import shortid from 'shortid';
-import THREE from 'three';
+import * as THREE from 'three';
 import Scene from '../engine/Scene';
 import {CSS3DObject} from '../vendor/CSS3DRenderer';
 import {CSS2DObject} from '../vendor/CSS2DRenderer';

src/layer/environment/EnvironmentLayer.js

@@ -1,6 +1,6 @@
 import Layer from '../Layer';
 import extend from 'lodash.assign';
-import THREE from 'three';
+import * as THREE from 'three';
 import Skybox from './Skybox';
 
 // TODO: Make sure nothing is left behind in the heap after calling destroy()

src/layer/environment/Sky.js

@@ -17,7 +17,7 @@
  * Three.js integration by zz85 http://twitter.com/blurspline
 */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 THREE.ShaderLib[ 'sky' ] = {
 

src/layer/environment/Skybox.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import Sky from './Sky';
 import throttle from 'lodash.throttle';
 

src/layer/geometry/PointLayer.js

@@ -24,7 +24,7 @@
 
 import Layer from '../Layer';
 import extend from 'lodash.assign';
-import THREE from 'three';
+import * as THREE from 'three';
 import Geo from '../../geo/Geo';
 import {latLon as LatLon} from '../../geo/LatLon';
 import {point as Point} from '../../geo/Point';

src/layer/geometry/PolygonLayer.js

@@ -16,7 +16,7 @@
 
 import Layer from '../Layer';
 import extend from 'lodash.assign';
-import THREE from 'three';
+import * as THREE from 'three';
 import Geo from '../../geo/Geo';
 import {latLon as LatLon} from '../../geo/LatLon';
 import {point as Point} from '../../geo/Point';

src/layer/geometry/PolylineLayer.js

@@ -18,7 +18,7 @@
 
 import Layer from '../Layer';
 import extend from 'lodash.assign';
-import THREE from 'three';
+import * as THREE from 'three';
 import Geo from '../../geo/Geo';
 import {latLon as LatLon} from '../../geo/LatLon';
 import {point as Point} from '../../geo/Point';

src/layer/tile/GeoJSONTile.js

@@ -2,7 +2,7 @@ import Tile from './Tile';
 import {geoJSONLayer as GeoJSONLayer} from '../GeoJSONLayer';
 import {geoJSONWorkerLayer as GeoJSONWorkerLayer} from '../GeoJSONWorkerLayer';
 import BoxHelper from '../../vendor/BoxHelper';
-import THREE from 'three';
+import * as THREE from 'three';
 import reqwest from 'reqwest';
 import {point as Point} from '../../geo/Point';
 import {latLon as LatLon} from '../../geo/LatLon';

src/layer/tile/GeoJSONTileLayer.js

@@ -2,7 +2,7 @@ import TileLayer from './TileLayer';
 import extend from 'lodash.assign';
 import GeoJSONTile from './GeoJSONTile';
 import throttle from 'lodash.throttle';
-import THREE from 'three';
+import * as THREE from 'three';
 
 // TODO: Offer on-the-fly slicing of static, non-tile-based GeoJSON files into a
 // tile grid using geojson-vt

src/layer/tile/ImageTile.js

@@ -1,6 +1,6 @@
 import Tile from './Tile';
 import BoxHelper from '../../vendor/BoxHelper';
-import THREE from 'three';
+import * as THREE from 'three';
 
 // TODO: Make sure nothing is left behind in the heap after calling destroy()
 

src/layer/tile/ImageTileLayer.js

@@ -2,7 +2,7 @@ import TileLayer from './TileLayer';
 import ImageTile from './ImageTile';
 import ImageTileLayerBaseMaterial from './ImageTileLayerBaseMaterial';
 import throttle from 'lodash.throttle';
-import THREE from 'three';
+import * as THREE from 'three';
 import extend from 'lodash.assign';
 
 // TODO: Make sure nothing is left behind in the heap after calling destroy()

src/layer/tile/ImageTileLayerBaseMaterial.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 
 export default function(colour, skyboxTarget) {
   var canvas = document.createElement('canvas');

src/layer/tile/Tile.js

@@ -1,6 +1,6 @@
 import {point as Point} from '../../geo/Point';
 import {latLon as LatLon} from '../../geo/LatLon';
-import THREE from 'three';
+import * as THREE from 'three';
 
 // TODO: Make sure nothing is left behind in the heap after calling destroy()
 

src/layer/tile/TileLayer.js

@@ -1,7 +1,7 @@
 import Layer from '../Layer';
 import extend from 'lodash.assign';
 import TileCache from './TileCache';
-import THREE from 'three';
+import * as THREE from 'three';
 
 // TODO: Consider removing picking from TileLayer instances as there aren't
 // (m)any situations where it would be practical

src/util/Buffer.js

@@ -2,7 +2,7 @@
  * BufferGeometry helpers
  */
 
-import THREE from 'three';
+import * as THREE from 'three';
 import {TextEncoder, TextDecoder} from 'text-encoding';
 
 var Buffer = (function() {

src/util/GeoJSON.js

@@ -2,7 +2,7 @@
  * GeoJSON helpers for handling data and generating objects
  */
 
-import THREE from 'three';
+import * as THREE from 'three';
 import * as topojson from 'topojson';
 import geojsonMerge from 'geojson-merge';
 import earcut from 'earcut';

src/vendor/BoxHelper.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author mrdoob / http://mrdoob.com/

src/vendor/CSS2DRenderer.js

@@ -5,7 +5,7 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 var CSS2DObject = function ( element ) {
 
@@ -42,8 +42,6 @@ var CSS2DRenderer = function () {
 	var viewMatrix = new THREE.Matrix4();
 	var viewProjectionMatrix = new THREE.Matrix4();
 
-	var frustum = new THREE.Frustum();
-
 	var domElement = document.createElement( 'div' );
 	domElement.style.overflow = 'hidden';
 
@@ -64,10 +62,10 @@ var CSS2DRenderer = function () {
 
 	var renderObject = function ( object, camera ) {
 
-		if ( object instanceof CSS2DObject ) {
+		if ( object instanceof THREE.CSS2DObject ) {
 
 			vector.setFromMatrixPosition( object.matrixWorld );
-			vector.applyProjection( viewProjectionMatrix );
+			vector.applyMatrix4( viewProjectionMatrix );
 
 			var element = object.element;
 			var style = 'translate(-50%,-50%) translate(' + ( vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - vector.y * _heightHalf + _heightHalf ) + 'px)';
@@ -83,13 +81,6 @@ var CSS2DRenderer = function () {
 
 			}
 
-			// Hide if outside view frustum
-			if (!frustum.containsPoint(object.position)) {
-				element.style.display = 'none';
-			} else {
-				element.style.display = 'block';
-			}
-
 		}
 
 		for ( var i = 0, l = object.children.length; i < l; i ++ ) {
@@ -111,8 +102,6 @@ var CSS2DRenderer = function () {
 		viewMatrix.copy( camera.matrixWorldInverse.getInverse( camera.matrixWorld ) );
 		viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, viewMatrix );
 
-		frustum.setFromMatrix( new THREE.Matrix4().multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse ) );
-
 		renderObject( scene, camera );
 
 	};

src/vendor/CSS3DRenderer.js

@@ -6,7 +6,7 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 var CSS3DObject = function ( element ) {
 
@@ -15,7 +15,7 @@ var CSS3DObject = function ( element ) {
 	this.element = element;
 	this.element.style.position = 'absolute';
 
-	this.addEventListener( 'removed', function ( event ) {
+	this.addEventListener( 'removed', function () {
 
 		if ( this.element.parentNode !== null ) {
 
@@ -58,25 +58,21 @@ var CSS3DRenderer = function () {
 	var domElement = document.createElement( 'div' );
 	domElement.style.overflow = 'hidden';
 
-	domElement.style.WebkitTransformStyle = 'preserve-3d';
-	domElement.style.MozTransformStyle = 'preserve-3d';
-	domElement.style.oTransformStyle = 'preserve-3d';
-	domElement.style.transformStyle = 'preserve-3d';
-
 	this.domElement = domElement;
 
 	var cameraElement = document.createElement( 'div' );
 
 	cameraElement.style.WebkitTransformStyle = 'preserve-3d';
 	cameraElement.style.MozTransformStyle = 'preserve-3d';
-	cameraElement.style.oTransformStyle = 'preserve-3d';
 	cameraElement.style.transformStyle = 'preserve-3d';
 
 	domElement.appendChild( cameraElement );
 
+	var isIE = /Trident/i.test( navigator.userAgent );
+
 	this.setClearColor = function () {};
 
-	this.getSize = function() {
+	this.getSize = function () {
 
 		return {
 			width: _width,
@@ -89,7 +85,6 @@ var CSS3DRenderer = function () {
 
 		_width = width;
 		_height = height;
-
 		_widthHalf = _width / 2;
 		_heightHalf = _height / 2;
 
@@ -101,13 +96,13 @@ var CSS3DRenderer = function () {
 
 	};
 
-	var epsilon = function ( value ) {
+	function epsilon( value ) {
 
-		return Math.abs( value ) < Number.EPSILON ? 0 : value;
+		return Math.abs( value ) < 1e-10 ? 0 : value;
 
-	};
+	}
 
-	var getCameraCSSMatrix = function ( matrix ) {
+	function getCameraCSSMatrix( matrix ) {
 
 		var elements = matrix.elements;
 
@@ -130,13 +125,12 @@ var CSS3DRenderer = function () {
 			epsilon( elements[ 15 ] ) +
 		')';
 
-	};
+	}
 
-	var getObjectCSSMatrix = function ( matrix ) {
+	function getObjectCSSMatrix( matrix, cameraCSSMatrix ) {
 
 		var elements = matrix.elements;
-
-		return 'translate3d(-50%,-50%,0) matrix3d(' +
+		var matrix3d = 'matrix3d(' +
 			epsilon( elements[ 0 ] ) + ',' +
 			epsilon( elements[ 1 ] ) + ',' +
 			epsilon( elements[ 2 ] ) + ',' +
@@ -155,15 +149,26 @@ var CSS3DRenderer = function () {
 			epsilon( elements[ 15 ] ) +
 		')';
 
-	};
+		if ( isIE ) {
 
-	var renderObject = function ( object, camera ) {
+			return 'translate(-50%,-50%)' +
+				'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)' +
+				cameraCSSMatrix +
+				matrix3d;
 
-		if ( object instanceof CSS3DObject ) {
+		}
+
+		return 'translate(-50%,-50%)' + matrix3d;
+
+	}
+
+	function renderObject( object, camera, cameraCSSMatrix ) {
+
+		if ( object instanceof THREE.CSS3DObject ) {
 
 			var style;
 
-			if ( object instanceof CSS3DSprite ) {
+			if ( object instanceof THREE.CSS3DSprite ) {
 
 				// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
 
@@ -177,25 +182,30 @@ var CSS3DRenderer = function () {
 				matrix.elements[ 11 ] = 0;
 				matrix.elements[ 15 ] = 1;
 
-				style = getObjectCSSMatrix( matrix );
+				style = getObjectCSSMatrix( matrix, cameraCSSMatrix );
 
 			} else {
 
-				style = getObjectCSSMatrix( object.matrixWorld );
+				style = getObjectCSSMatrix( object.matrixWorld, cameraCSSMatrix );
 
 			}
 
 			var element = object.element;
-			var cachedStyle = cache.objects[ object.id ];
+			var cachedStyle = cache.objects[ object.id ] && cache.objects[ object.id ].style;
 
 			if ( cachedStyle === undefined || cachedStyle !== style ) {
 
 				element.style.WebkitTransform = style;
 				element.style.MozTransform = style;
-				element.style.oTransform = style;
 				element.style.transform = style;
 
-				cache.objects[ object.id ] = style;
+				cache.objects[ object.id ] = { style: style };
+
+				if ( isIE ) {
+
+					cache.objects[ object.id ].distanceToCameraSquared = getDistanceToSquared( camera, object );
+
+				}
 
 			}
 
@@ -209,21 +219,59 @@ var CSS3DRenderer = function () {
 
 		for ( var i = 0, l = object.children.length; i < l; i ++ ) {
 
-			renderObject( object.children[ i ], camera );
+			renderObject( object.children[ i ], camera, cameraCSSMatrix );
 
 		}
 
-	};
+	}
+
+	var getDistanceToSquared = function () {
+
+		var a = new THREE.Vector3();
+		var b = new THREE.Vector3();
+
+		return function ( object1, object2 ) {
+
+			a.setFromMatrixPosition( object1.matrixWorld );
+			b.setFromMatrixPosition( object2.matrixWorld );
+
+			return a.distanceToSquared( b );
+
+		};
+
+	}();
+
+	function zOrder( scene ) {
+
+		var order = Object.keys( cache.objects ).sort( function ( a, b ) {
+
+			return cache.objects[ a ].distanceToCameraSquared - cache.objects[ b ].distanceToCameraSquared;
+
+		} );
+		var zMax = order.length;
+
+		scene.traverse( function ( object ) {
+
+			var index = order.indexOf( object.id + '' );
+
+			if ( index !== - 1 ) {
+
+				object.element.style.zIndex = zMax - index;
+
+			}
+
+		} );
+
+	}
 
 	this.render = function ( scene, camera ) {
 
-		var fov = 0.5 / Math.tan( THREE.Math.degToRad( camera.fov * 0.5 ) ) * _height;
+		var fov = 0.5 / Math.tan( THREE.Math.degToRad( camera.getEffectiveFOV() * 0.5 ) ) * _height;
 
 		if ( cache.camera.fov !== fov ) {
 
 			domElement.style.WebkitPerspective = fov + 'px';
 			domElement.style.MozPerspective = fov + 'px';
-			domElement.style.oPerspective = fov + 'px';
 			domElement.style.perspective = fov + 'px';
 
 			cache.camera.fov = fov;
@@ -236,21 +284,33 @@ var CSS3DRenderer = function () {
 
 		camera.matrixWorldInverse.getInverse( camera.matrixWorld );
 
-		var style = 'translate3d(0,0,' + fov + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse ) +
-			' translate3d(' + _widthHalf + 'px,' + _heightHalf + 'px, 0)';
+		var cameraCSSMatrix = 'translateZ(' + fov + 'px)' +
+			getCameraCSSMatrix( camera.matrixWorldInverse );
 
-		if ( cache.camera.style !== style ) {
+		var style = cameraCSSMatrix +
+			'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)';
+
+		if ( cache.camera.style !== style && ! isIE ) {
 
 			cameraElement.style.WebkitTransform = style;
 			cameraElement.style.MozTransform = style;
-			cameraElement.style.oTransform = style;
 			cameraElement.style.transform = style;
 
 			cache.camera.style = style;
 
 		}
 
-		renderObject( scene, camera );
+		renderObject( scene, camera, cameraCSSMatrix );
+
+		if ( isIE ) {
+
+			// IE10 and 11 does not support 'preserve-3d'.
+			// Thus, z-order in 3D will not work.
+			// We have to calc z-order manually and set CSS z-index for IE.
+			// FYI: z-index can't handle object intersection
+			zOrder( scene );
+
+		}
 
 	};
 

src/vendor/CopyShader.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author alteredq / http://alteredqualia.com/

src/vendor/EffectComposer.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 import CopyShader from './CopyShader';
 import ShaderPass from './ShaderPass';
 import MaskPass, {ClearMaskPass} from './MaskPass';

src/vendor/FXAAShader.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author alteredq / http://alteredqualia.com/

src/vendor/HorizontalTiltShiftShader.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author alteredq / http://alteredqualia.com/

src/vendor/MaskPass.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author alteredq / http://alteredqualia.com/

src/vendor/OrbitControls.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 import Hammer from 'hammerjs';
 
 /**

src/vendor/RenderPass.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author alteredq / http://alteredqualia.com/

src/vendor/ShaderPass.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author alteredq / http://alteredqualia.com/

src/vendor/VerticalTiltShiftShader.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author alteredq / http://alteredqualia.com/