Xyz imagesource cleanup (#1449)

* Add a configurable "projection" field

* Add support for list of levels

* Update types, pass projection in

Author: gkjohnson

src/three/plugins/images/EPSGTilesPlugin.d.ts

@@ -4,7 +4,7 @@ export class XYZTilesPlugin {
 
 	constructor( options: {
 		center?: boolean,
-		levels?: number,
+		levels?: number|Array<object>,
 		tileDimension?: number,
 		shape?: 'ellipsoid' | 'planar',
 		useRecommendedSettings?: boolean,

src/three/plugins/images/EPSGTilesPlugin.js

@@ -15,14 +15,15 @@ export class XYZTilesPlugin extends EllipsoidProjectionTilesPlugin {
 		const {
 			levels,
 			tileDimension,
+			projection,
 			url,
 			...rest
 		} = options;
 
 		super( rest );
 
 		this.name = 'XYZ_TILES_PLUGIN';
-		this.imageSource = new XYZImageSource( { url, levels, tileDimension } );
+		this.imageSource = new XYZImageSource( { url, levels, tileDimension, projection } );
 
 	}
 

src/three/plugins/images/ImageOverlayPlugin.d.ts

@@ -33,6 +33,7 @@ export class XYZTilesOverlay extends ImageOverlay {
 	constructor( options: {
 		levels: number,
 		dimension: number,
+		projection: string;
 		url: string,
 
 		color: number | Color,

src/three/plugins/images/sources/XYZImageSource.js

@@ -8,6 +8,7 @@ export class XYZImageSource extends TiledImageSource {
 		const {
 			levels = 20,
 			tileDimension = 256,
+			projection = 'EPSG:4326',
 			url = null,
 			...rest
 		} = options;
@@ -16,6 +17,7 @@ export class XYZImageSource extends TiledImageSource {
 
 		this.tileDimension = tileDimension;
 		this.levels = levels;
+		this.projection = projection;
 		this.url = url;
 
 	}
@@ -32,15 +34,34 @@ export class XYZImageSource extends TiledImageSource {
 	init() {
 
 		// transform the url
-		const { tiling, tileDimension, levels, url } = this;
-
+		const { tiling, tileDimension, levels, url, projection } = this;
 		tiling.flipY = ! /{\s*reverseY|-\s*y\s*}/g.test( url );
-		tiling.setProjection( new ProjectionScheme( 'EPSG:3857' ) );
+		tiling.setProjection( new ProjectionScheme( projection ) );
 		tiling.setContentBounds( ...tiling.projection.getBounds() );
-		tiling.generateLevels( levels, tiling.projection.tileCountX, tiling.projection.tileCountY, {
-			tilePixelWidth: tileDimension,
-			tilePixelHeight: tileDimension,
-		} );
+		if ( Array.isArray( levels ) ) {
+
+			levels.forEach( ( info, level ) => {
+
+				if ( info !== null ) {
+
+					tiling.setLevel( level, {
+						tilePixelWidth: tileDimension,
+						tilePixelHeight: tileDimension,
+						...info
+					} );
+
+				}
+
+			} );
+
+		} else {
+
+			tiling.generateLevels( levels, tiling.projection.tileCountX, tiling.projection.tileCountY, {
+				tilePixelWidth: tileDimension,
+				tilePixelHeight: tileDimension,
+			} );
+
+		}
 
 		this.url = url;
 

src/three/renderer/controls/PivotPointMesh.js

@@ -52,7 +52,6 @@ class PivotMaterial extends ShaderMaterial {
 
 			vertexShader: /* glsl */`
 
-				uniform float pixelRatio;
 				uniform float size;
 				uniform float thickness;
 				uniform vec2 resolution;