Fix CesiumIon shadeless MeshStandardMaterial and readme typo preprocessURL (#474)

* Update README.md code blocks with preprocessURL instead of onPreprocessURL

* Update ionExample.js for bad meshStandardMaterial tilesets

* bugfix missing brackets and linting

* Linting fixes

* ionExample: Enforce material metalness = 0 for MeshStandardMaterial and add ambient light

* Use 64x64 DataTexture env map

* Only set scene.environment, not background

Author: jo-chemla

README.md

@@ -199,11 +199,11 @@ fetch( url, { mode: 'cors' } )
 
 		// Prefilter each model fetch by setting the cesium Ion version to the search
 		// parameters of the url.
-		tiles.onPreprocessURL = uri => {
+		tiles.preprocessURL = uri => {
 
 			uri = new URL( uri );
 			uri.searchParams.append( 'v', version );
-			return uri;
+			return uri.toString();
 
 		};
 
@@ -368,10 +368,10 @@ If true then the `raycast` functions of the loaded tile objects are overriden to
 
 If you would like to manage raycasting against tiles yourself this behavior can be disabled if needed by setting `optizeRaycast` to false.
 
-### .onPreprocessURL
+### .preprocessURL
 
 ```js
-onPreprocessURL = null : ( uri : string | URL ) => string | URL;
+preprocessURL = null : ( uri : string | URL ) => string | URL;
 ```
 
 Function to preprocess the url for each individual tile geometry or child tile set to be loaded. If null then the url is used directly.

example/ionExample.js

@@ -5,8 +5,10 @@ import {
 	PerspectiveCamera,
 	Vector3,
 	Quaternion,
-	Group,
 	Sphere,
+	AmbientLight,
+	DataTexture,
+	EquirectangularReflectionMapping
 } from 'three';
 import { FlyOrbitControls } from './src/controls/FlyOrbitControls.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
@@ -16,11 +18,10 @@ import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 let camera, controls, scene, renderer, tiles;
 
 const params = {
-
-	'ionAssetId': '40866',
-	'ionAccessToken': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmYmE2YWEzOS1lZDUyLTQ0YWMtOTlkNS0wN2VhZWI3NTc4MmEiLCJpZCI6MjU5LCJpYXQiOjE2ODU2MzQ0Njl9.AswCMxsN03WYwuZL-r183OZicN64Ks9aPExWhA3fuLY',
-	'reload': reinstantiateTiles,
-
+	ionAssetId: '40866',
+	ionAccessToken:
+		'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmYmE2YWEzOS1lZDUyLTQ0YWMtOTlkNS0wN2VhZWI3NTc4MmEiLCJpZCI6MjU5LCJpYXQiOjE2ODU2MzQ0Njl9.AswCMxsN03WYwuZL-r183OZicN64Ks9aPExWhA3fuLY',
+	reload: reinstantiateTiles,
 };
 
 init();
@@ -47,7 +48,9 @@ function setupTiles() {
 	// Note the DRACO compression files need to be supplied via an explicit source.
 	// We use unpkg here but in practice should be provided by the application.
 	const dracoLoader = new DRACOLoader();
-	dracoLoader.setDecoderPath( 'https://unpkg.com/[email protected]/examples/jsm/libs/draco/gltf/' );
+	dracoLoader.setDecoderPath(
+		'https://unpkg.com/[email protected]/examples/jsm/libs/draco/gltf/'
+	);
 
 	const loader = new GLTFLoader( tiles.manager );
 	loader.setDRACOLoader( dracoLoader );
@@ -99,14 +102,28 @@ function init() {
 
 	scene = new Scene();
 
+	// Add scene light for MeshStandardMaterial to react properly if its metalness is set to 0
+	const light = new AmbientLight( 0xffffff, 1 );
+	scene.add( light );
+
+	const env = new DataTexture( new Uint8Array( 64 * 64 * 4 ).fill( 255 ), 64, 64 );
+	env.mapping = EquirectangularReflectionMapping;
+	env.needsUpdate = true;
+	scene.environment = env;
+
 	// primary camera view
 	renderer = new WebGLRenderer( { antialias: true } );
 	renderer.setClearColor( 0x151c1f );
 
 	document.body.appendChild( renderer.domElement );
 	renderer.domElement.tabIndex = 1;
 
-	camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 4000 );
+	camera = new PerspectiveCamera(
+		60,
+		window.innerWidth / window.innerHeight,
+		1,
+		4000
+	);
 	camera.position.set( 400, 400, 400 );
 
 	// controls