Home Explore Help
Register Sign In
bill
/
3DTilesRendererJS
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fixes, npm run build

Garrett Johnson 4 years ago
parent
0697c66d35
commit
58bf9965d9
27 changed files with 577 additions and 90 deletions
Split View Show Diff Stats
  1. 17 38
      README.md
  2. 60 0
      example/bundle/b3dmExample.89d00500.js
  3. 1 0
      example/bundle/b3dmExample.89d00500.js.map
  4. 1 1
      example/bundle/b3dmExample.html
  5. 60 0
      example/bundle/cmptExample.b72e906a.js
  6. 1 0
      example/bundle/cmptExample.b72e906a.js.map
  7. 1 1
      example/bundle/cmptExample.html
  8. 64 0
      example/bundle/customMaterial.d4dc01f1.js
  9. 1 0
      example/bundle/customMaterial.d4dc01f1.js.map
  10. 1 1
      example/bundle/customMaterial.html
  11. 70 0
      example/bundle/example.ed3f8ca3.js
  12. 1 0
      example/bundle/example.ed3f8ca3.js.map
  13. 60 0
      example/bundle/i3dmExample.7f559267.js
  14. 1 0
      example/bundle/i3dmExample.7f559267.js.map
  15. 1 1
      example/bundle/i3dmExample.html
  16. 1 1
      example/bundle/index.html
  17. 70 0
      example/bundle/ionExample.b009f18d.js
  18. 1 0
      example/bundle/ionExample.b009f18d.js.map
  19. 1 28
      example/bundle/ionExample.html
  20. 64 0
      example/bundle/offscreenShadows.5c60f5a0.js
  21. 1 0
      example/bundle/offscreenShadows.5c60f5a0.js.map
  22. 1 1
      example/bundle/offscreenShadows.html
  23. 60 0
      example/bundle/pntsExample.f535e2db.js
  24. 1 0
      example/bundle/pntsExample.f535e2db.js.map
  25. 1 1
      example/bundle/pntsExample.html
  26. 24 0
      example/ionExample.html
  27. 12 17
      example/ionExample.js

+ 17 - 38
README.md
View File 

@@ -132,7 +132,7 @@ Adding support for DRACO decompression within the GLTF files that are transporte
 
 // We use unpkg here but in practice should be provided by the application.
 
 const dracoLoader = new DRACOLoader();
 
 dracoLoader.setDecoderPath( 'https://unpkg.com/three@0.116.1/examples/js/libs/draco/gltf/' );
 
-		
+
 
 const tilesRenderer = new TilesRenderer( './path/to/tileset.json' );
 
 tilesRenderer.manager.addHandler( /\.gltf$/, {
 
 
@@ -152,56 +152,35 @@ tilesRenderer.manager.addHandler( /\.gltf$/, {
 
 
 Loading from Cesium Ion requires some extra fetching of the ion url endpoint, as well as a temporary bearer access token. A full example is found in the ionExample.js file in the examples folder.
 
 
-Set the desired assetId as well as your Ion AccessToken. [More reading is provided by the Cesium Rest documentation.](https://cesium.com/docs/rest-api/)
 
+Set the desired assetId as well as your Ion AccessToken. [More reading is provided by the Cesium REST API documentation](https://cesium.com/docs/rest-api/).
 
 
 ```js
 
-
 
-url = new URL( `https://api.cesium.com/v1/assets/${assetId}/endpoint` );
 
+// fetch a temporary token for the Cesium Ion asset
 
+const url = new URL( `https://api.cesium.com/v1/assets/${ assetId }/endpoint` );
 
 url.searchParams.append( 'access_token', accessToken );
 
 
 fetch( url, { mode: 'cors' } )
 
-	.then( ( res ) => {
 
-		if ( res.ok ) {
 
-			return res.json();
 
-		} else {
 
-			return Promise.reject( `${res.status} : ${res.statusText}` );
 
-		}
 
-	} )
 
-	.then( ( json ) => {
 
+	.then( res => res.json() )
 
+	.then( json => {
 
+
 
 		url = new URL( json.url );
 
+
 
 		const version = url.searchParams.get( 'v' );
 
 		tiles = new TilesRenderer( url );
 
 		tiles.fetchOptions.headers = {};
 
 		tiles.fetchOptions.headers.Authorization = `Bearer ${json.accessToken}`;
 
-		
-		// Prefilter each model fetch by setting the cesium Ion version to the search parameters of the url
 
+
 
+		// Prefilter each model fetch by setting the cesium Ion version to the search
 
+		// parameters of the url.
 
 		tiles.onPreprocessURL = uri => {
 
+
 
 			uri = new URL( uri );
 
 			uri.searchParams.append( 'v', version );
 
 			return uri;
 
-		};
 
-		
-		// Correct the rotation and position if your Ion asset happens to be on the surface of an ellipsoid i.e. is georeferenced.
 
-		tiles.onLoadTileSet = () => {
 
-			const matrix = new Matrix4();
 
-			tiles.getBoundsTransform( matrix );
 
-			const position = new Vector3().setFromMatrixPosition( matrix );
 
-			const distanceToEllipsoidCenter = position.length();
 
-
 
-			const surfaceDirection = position.normalize();
 
-			const up = new Vector3( 0, 1, 0 );
 
-			const rotationToNorthPole = rotationBetweenDirections( surfaceDirection, up ); //This function can be found in the ionExample file
 
-
 
-			tiles.group.quaternion.x = rotationToNorthPole.x;
 
-			tiles.group.quaternion.y = rotationToNorthPole.y;
 
-			tiles.group.quaternion.z = rotationToNorthPole.z;
 
-			tiles.group.quaternion.w = rotationToNorthPole.w;
 
-
 
-			tiles.group.position.y = - distanceToEllipsoidCenter;
 
+
 
 		};
 
 
-		// Setup draco compression etc. here
 
-	} )
 
+	} );
 
 ```
 
 
 ## Render On Change
 
@@ -218,12 +197,12 @@ function renderLoop() {
 
 
 	requestAnimationFrame( renderLoop );
 
 	if ( needsRerender ) {
 
-	
+
 
 		needsRerender = false;
 
 		camera.updateMatrixWorld();
 
 		tilesRenderer.update();
 
 		renderer.render( camera, scene );
 
-	
+
 
 	}
 
 
 }
 
@@ -266,7 +245,7 @@ if ( intersects.length ) {
 
 		}
 
 
 	}
 
-	
+
 
 }
 
 ```

File diff suppressed because it is too large
+ 60 - 0
example/bundle/b3dmExample.89d00500.js


File diff suppressed because it is too large
+ 1 - 0
example/bundle/b3dmExample.89d00500.js.map


File diff suppressed because it is too large
+ 1 - 1
example/bundle/b3dmExample.html


File diff suppressed because it is too large
+ 60 - 0
example/bundle/cmptExample.b72e906a.js


File diff suppressed because it is too large
+ 1 - 0
example/bundle/cmptExample.b72e906a.js.map


+ 1 - 1
example/bundle/cmptExample.html
View File 

@@ -1 +1 @@
 
-<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta charset="utf-8"><title>3D Tiles Renderer Composite Format Example</title><style>*{margin:0;padding:0}html{overflow:hidden;font-family:Arial,Helvetica,sans-serif;user-select:none}canvas{image-rendering:pixelated;outline:none}</style></head><body> <script src="cmptExample.8f1e4507.js"></script> </body></html>
 
+<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta charset="utf-8"><title>3D Tiles Renderer Composite Format Example</title><style>*{margin:0;padding:0}html{overflow:hidden;font-family:Arial,Helvetica,sans-serif;user-select:none}canvas{image-rendering:pixelated;outline:none}</style></head><body> <script src="cmptExample.b72e906a.js"></script> </body></html>

File diff suppressed because it is too large
+ 64 - 0
example/bundle/customMaterial.d4dc01f1.js


File diff suppressed because it is too large
+ 1 - 0
example/bundle/customMaterial.d4dc01f1.js.map


+ 1 - 1
example/bundle/customMaterial.html
View File 

@@ -1 +1 @@
 
-<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta charset="utf-8"><title>3D Tiles Renderer Material Example</title><style>*{margin:0;padding:0}html{overflow:hidden;font-family:Arial,Helvetica,sans-serif;user-select:none}canvas{image-rendering:pixelated;outline:none}</style></head><body> <script src="customMaterial.3c5f1ac2.js"></script> </body></html>
 
+<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta charset="utf-8"><title>3D Tiles Renderer Material Example</title><style>*{margin:0;padding:0}html{overflow:hidden;font-family:Arial,Helvetica,sans-serif;user-select:none}canvas{image-rendering:pixelated;outline:none}</style></head><body> <script src="customMaterial.d4dc01f1.js"></script> </body></html>

File diff suppressed because it is too large
+ 70 - 0
example/bundle/example.ed3f8ca3.js


File diff suppressed because it is too large
+ 1 - 0
example/bundle/example.ed3f8ca3.js.map


File diff suppressed because it is too large
+ 60 - 0
example/bundle/i3dmExample.7f559267.js


File diff suppressed because it is too large
+ 1 - 0
example/bundle/i3dmExample.7f559267.js.map


+ 1 - 1
example/bundle/i3dmExample.html
View File 

@@ -1 +1 @@
 
-<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta charset="utf-8"><title>3D Tiles Renderer Instanced Example</title><style>*{margin:0;padding:0}html{overflow:hidden;font-family:Arial,Helvetica,sans-serif;user-select:none}canvas{image-rendering:pixelated;outline:none}</style></head><body> <script src="i3dmExample.3768b750.js"></script> </body></html>
 
+<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta charset="utf-8"><title>3D Tiles Renderer Instanced Example</title><style>*{margin:0;padding:0}html{overflow:hidden;font-family:Arial,Helvetica,sans-serif;user-select:none}canvas{image-rendering:pixelated;outline:none}</style></head><body> <script src="i3dmExample.7f559267.js"></script> </body></html>

+ 1 - 1
example/bundle/index.html
View File 

@@ -1 +1 @@
 
-<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta charset="utf-8"><title>3D Tiles Renderer Options Example</title><style>*{margin:0;padding:0}html{overflow:hidden;font-family:Arial,Helvetica,sans-serif;user-select:none}canvas{image-rendering:pixelated;outline:none}</style></head><body> <script src="example.24c987af.js"></script> </body></html>
 
+<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta charset="utf-8"><title>3D Tiles Renderer Options Example</title><style>*{margin:0;padding:0}html{overflow:hidden;font-family:Arial,Helvetica,sans-serif;user-select:none}canvas{image-rendering:pixelated;outline:none}</style></head><body> <script src="example.ed3f8ca3.js"></script> </body></html>

File diff suppressed because it is too large
+ 70 - 0
example/bundle/ionExample.b009f18d.js


File diff suppressed because it is too large
+ 1 - 0
example/bundle/ionExample.b009f18d.js.map


File diff suppressed because it is too large
+ 1 - 28
example/bundle/ionExample.html


File diff suppressed because it is too large
+ 64 - 0
example/bundle/offscreenShadows.5c60f5a0.js


File diff suppressed because it is too large
+ 1 - 0
example/bundle/offscreenShadows.5c60f5a0.js.map


+ 1 - 1
example/bundle/offscreenShadows.html
View File 

@@ -1 +1 @@
 
-<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta charset="utf-8"><title>3D Tiles Renderer Material Example</title><style>*{margin:0;padding:0}html{overflow:hidden;font-family:Arial,Helvetica,sans-serif;user-select:none}canvas{image-rendering:pixelated;outline:none}</style></head><body> <script src="offscreenShadows.dc95112f.js"></script> </body></html>
 
+<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta charset="utf-8"><title>3D Tiles Renderer Material Example</title><style>*{margin:0;padding:0}html{overflow:hidden;font-family:Arial,Helvetica,sans-serif;user-select:none}canvas{image-rendering:pixelated;outline:none}</style></head><body> <script src="offscreenShadows.5c60f5a0.js"></script> </body></html>

File diff suppressed because it is too large
+ 60 - 0
example/bundle/pntsExample.f535e2db.js


File diff suppressed because it is too large
+ 1 - 0
example/bundle/pntsExample.f535e2db.js.map


+ 1 - 1
example/bundle/pntsExample.html
View File 

@@ -1 +1 @@
 
-<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta charset="utf-8"><title>3D Tiles Renderer Points Example</title><style>*{margin:0;padding:0}html{overflow:hidden;font-family:Arial,Helvetica,sans-serif;user-select:none}canvas{image-rendering:pixelated;outline:none}</style></head><body> <script src="pntsExample.89b14e40.js"></script> </body></html>
 
+<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta charset="utf-8"><title>3D Tiles Renderer Points Example</title><style>*{margin:0;padding:0}html{overflow:hidden;font-family:Arial,Helvetica,sans-serif;user-select:none}canvas{image-rendering:pixelated;outline:none}</style></head><body> <script src="pntsExample.f535e2db.js"></script> </body></html>

+ 24 - 0
example/ionExample.html
View File 

@@ -22,9 +22,33 @@
 
 				image-rendering: pixelated;
 
 				outline: none;
 
 			}
 
+
 
+			#info {
 
+				position: absolute;
 
+				top: 0;
 
+				left: 0;
 
+				color: white;
 
+				width: 100%;
 
+				text-align: center;
 
+				padding: 5px;
 
+				pointer-events: none;
 
+				line-height: 1.5em;
 
+			}
 
+
 
+			#info a {
 
+				color: white;
 
+			}
 
         </style>
 
     </head>
 
     <body>
 
+		<div id="info">
 
+			<div>
 
+				Default evaluation Cesium Ion token from the <a href="https://github.com/CesiumGS/cesium/blob/master/Source/Core/Ion.js#L6-L13">Cesium repository</a> and expires with every Cesium release.
 
+				<br/>
 
+				Sign up for a free ion account and get your own access token at <a href="http://cesium.com">cesium.com</a>.
 
+				<br/>
 
+			</div>
 
+		</div>
 
         <script src="./ionExample.js"></script>
 
     </body>
 
 </html>

+ 12 - 17
example/ionExample.js
View File 

@@ -8,7 +8,6 @@ import {
 
 	RELATIVE_DEPTH,
 
 	IS_LEAF,
 
 	RANDOM_COLOR,
 
-	TilesRendererBase,
 
 } from '../src/index.js';
 
 import {
 
 	Scene,
 
@@ -30,7 +29,7 @@ import {
 
 	sRGBEncoding,
 
 	Matrix4
 
 } from 'three';
 
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
+import { FlyOrbitControls } from './FlyOrbitControls.js';
 
 import { BufferGeometryUtils } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 
@@ -49,8 +48,10 @@ let raycaster, mouse, rayIntersect, lastHoveredElement;
 
 let offsetParent;
 
 let statsContainer, stats;
 
 
-// Default token has been taken from the Cesium npm package from "cesium/Source/Ion.js". The token expires with every Cesium release. The default access token is provided for evaluation purposes only.
 
-// Sign up for a free ion account and get your own access token at {@link https://cesium.com}
 
+// Default public token has been taken from the Cesium npm package from "cesium/Source/Ion.js". The token
 
+// expires with every Cesium release. The default access token is provided by Cesium for evaluation purposes
 
+// only. Sign up for a free ion account and get your own access token at https://cesium.com.
 
+// https://github.com/CesiumGS/cesium/blob/master/Source/Core/Ion.js#L6-L13
 
 const defaultIonToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwY2Q2MzQ1OS1kNjI4LTRiZDEtOWVkZC1kMWI4YzAyODU3OGMiLCJpZCI6MjU5LCJpYXQiOjE2MDY4NzMyMTh9.8EwC6vilVHM2yizt8nG6VmbNu66QiCrk3O-1lEDPI9I';
 
 
 let params = {
 
@@ -233,6 +234,7 @@ function init() {
 
 	renderer.outputEncoding = sRGBEncoding;
 
 
 	document.body.appendChild( renderer.domElement );
 
+	renderer.domElement.tabIndex = 1;
 
 
 	camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 4000 );
 
 	camera.position.set( 400, 400, 400 );
 
@@ -259,8 +261,9 @@ function init() {
 
 	secondRenderer.domElement.style.right = '0';
 
 	secondRenderer.domElement.style.top = '0';
 
 	secondRenderer.domElement.style.outline = '#0f1416 solid 2px';
 
+	secondRenderer.domElement.tabIndex = 1;
 
 
-	secondControls = new OrbitControls( secondCamera, secondRenderer.domElement );
 
+	secondControls = new FlyOrbitControls( secondCamera, secondRenderer.domElement );
 
 	secondControls.screenSpacePanning = false;
 
 	secondControls.minDistance = 1;
 
 	secondControls.maxDistance = 2000;
 
@@ -283,14 +286,15 @@ function init() {
 
 	thirdPersonRenderer.domElement.style.position = 'fixed';
 
 	thirdPersonRenderer.domElement.style.left = '5px';
 
 	thirdPersonRenderer.domElement.style.bottom = '5px';
 
+	thirdPersonRenderer.domElement.tabIndex = 1;
 
 
-	thirdPersonControls = new OrbitControls( thirdPersonCamera, thirdPersonRenderer.domElement );
 
+	thirdPersonControls = new FlyOrbitControls( thirdPersonCamera, thirdPersonRenderer.domElement );
 
 	thirdPersonControls.screenSpacePanning = false;
 
 	thirdPersonControls.minDistance = 1;
 
 	thirdPersonControls.maxDistance = 2000;
 
 
 	// controls
 
-	controls = new OrbitControls( camera, renderer.domElement );
 
+	controls = new FlyOrbitControls( camera, renderer.domElement );
 
 	controls.screenSpacePanning = false;
 
 	controls.minDistance = 1;
 
 	controls.maxDistance = 2000;
 
@@ -397,16 +401,7 @@ function init() {
 
 	gui.open();
 
 
 	statsContainer = document.createElement( 'div' );
 
-	statsContainer.style.position = 'absolute';
 
-	statsContainer.style.top = 0;
 
-	statsContainer.style.left = 0;
 
-	statsContainer.style.color = 'white';
 
-	statsContainer.style.width = '100%';
 
-	statsContainer.style.textAlign = 'center';
 
-	statsContainer.style.padding = '5px';
 
-	statsContainer.style.pointerEvents = 'none';
 
-	statsContainer.style.lineHeight = '1.5em';
 
-	document.body.appendChild( statsContainer );
 
+	document.getElementById( 'info' ).appendChild( statsContainer );
 
 
 	// Stats
 
 	stats = new Stats();