Merge branch 'master' into ion-loading

.github/workflows/node.js.yml

@@ -0,0 +1,29 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm run lint
+    - run: npm test

.gitignore

@@ -61,3 +61,4 @@ typings/
 .next
 
 example/local-data
+example/dev-bundle

.travis.yml

@@ -1,6 +0,0 @@
-language: node_js
-node_js:
-  - node
-script:
-  - npm run lint
-  - npm test

README.md

@@ -1,9 +1,10 @@
 # 3d-tiles-renderer
 
 [![npm version](https://img.shields.io/npm/v/3d-tiles-renderer.svg?style=flat-square)](https://www.npmjs.com/package/3d-tiles-renderer)
-[![travis build](https://img.shields.io/travis/com/NASA-AMMOS/3DTilesRendererJS/master.svg?style=flat-square)](https://travis-ci.com/NASA-AMMOS/3DTilesRendererJS)
+[![build](https://img.shields.io/github/workflow/status/NASA-AMMOS/3DTilesRendererJS/Node.js%20CI?style=flat-square&label=build)](https://github.com/NASA-AMMOS/3DTilesRendererJS/actions)
 [![lgtm code quality](https://img.shields.io/lgtm/grade/javascript/g/NASA-AMMOS/3DTilesRendererJS.svg?style=flat-square&label=code-quality)](https://lgtm.com/projects/g/NASA-AMMOS/3DTilesRendererJS/)
 
+
 ![](./images/header.png)
 
 Three.js renderer implementation for the [3D Tiles format](https://github.com/AnalyticalGraphicsInc/3d-tiles/blob/master/specification/). The renderer supports most of the 3D Tiles spec features with a few exceptions. See [Issue #15](https://github.com/NASA-AMMOS/3DTilesRendererJS/issues/15) for information on which features are not yet implemented.

example/FlyOrbitControls.js

@@ -0,0 +1,275 @@
+import { Clock, Vector3, Vector4 } from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+const changeEvent = { type: 'fly-change' };
+const startEvent = { type: 'fly-start' };
+const endEvent = { type: 'fly-end' };
+const tempVector = new Vector4( 0, 0, 0, 0 );
+export class FlyOrbitControls extends OrbitControls {
+
+	constructor( camera, domElement ) {
+
+		// Disable use of shift key so we can use it for acceleration
+		const disableShiftKeyCallback = e => {
+
+			if ( this.enabled ) {
+
+				Object.defineProperty( e, 'shiftKey', { get() { return false } } );
+
+			}
+
+		};
+
+		domElement.addEventListener( 'pointerdown', disableShiftKeyCallback );
+
+		super( camera, domElement );
+
+		this.enableKeys = false;
+		this.enableFlight = true;
+		this.baseSpeed = 1;
+		this.fastSpeed = 4;
+		this.forwardKey = 'w';
+		this.backKey = 's';
+		this.leftKey = 'a';
+		this.rightKey = 'd';
+		this.upKey = 'q';
+		this.downKey = 'e';
+		this.fastKey = 'shift';
+
+		let fastHeld = false;
+		let forwardHeld = false;
+		let backHeld = false;
+		let leftHeld = false;
+		let rightHeld = false;
+		let upHeld = false;
+		let downHeld = false;
+
+		let originalDistance = 0
+		let originalMinDistance = 0;
+		let originalMaxDistance = 0;
+		let rafHandle = - 1;
+		const originalTarget = new Vector3();
+		const clock = new Clock();
+
+		const endFlight = () => {
+
+			if ( rafHandle !== - 1 ) {
+
+				// cancel the animation playing
+				cancelAnimationFrame( rafHandle );
+				rafHandle = - 1;
+
+				// store the original distances for the controls
+				this.minDistance = originalMinDistance;
+				this.maxDistance = originalMaxDistance;
+
+				const targetDistance = Math.min( originalDistance, camera.position.distanceTo( originalTarget ) );
+				tempVector
+					.set( 0, 0, - 1, 0 )
+					.applyMatrix4( camera.matrixWorld );
+				this
+					.target
+					.copy( camera.position )
+					.addScaledVector( tempVector, targetDistance );
+
+				this.dispatchEvent( endEvent );
+
+			}
+
+		};
+
+		const updateFlight = () => {
+
+			if ( ! this.enabled || ! this.enableFlight ) {
+
+				return;
+
+			}
+
+			rafHandle = requestAnimationFrame( updateFlight );
+
+			// get the direction
+			tempVector.set( 0, 0, 0, 0 );
+			if ( forwardHeld ) tempVector.z -= 1;
+			if ( backHeld ) tempVector.z += 1;
+			if ( leftHeld ) tempVector.x -= 1;
+			if ( rightHeld ) tempVector.x += 1;
+			if ( upHeld ) tempVector.y += 1;
+			if ( downHeld ) tempVector.y -= 1;
+			tempVector.applyMatrix4( camera.matrixWorld );
+
+			// apply the movement
+			const delta = 60 * clock.getDelta();
+			const speed = fastHeld ? this.fastSpeed : this.baseSpeed;
+			camera
+				.position
+				.addScaledVector( tempVector, speed * delta );
+			this
+				.target
+				.addScaledVector( tempVector, speed * delta );
+
+			this.dispatchEvent( changeEvent );
+
+		};
+
+		const keyDownCallback = e => {
+
+			const key = e.key.toLowerCase();
+
+			if ( rafHandle === - 1 ) {
+
+				originalMaxDistance = this.maxDistance;
+				originalMinDistance = this.minDistance;
+				originalDistance = camera.position.distanceTo( this.target );
+				originalTarget.copy( this.target );
+
+			}
+
+			switch ( key ) {
+
+				case this.forwardKey:
+					forwardHeld = true;
+					break;
+				case this.backKey:
+					backHeld = true;
+					break;
+				case this.leftKey:
+					leftHeld = true;
+					break;
+				case this.rightKey:
+					rightHeld = true;
+					break;
+				case this.upKey:
+					upHeld = true;
+					break;
+				case this.downKey:
+					downHeld = true;
+					break;
+				case this.fastKey:
+					fastHeld = true;
+					break;
+
+			}
+
+			switch ( key ) {
+
+				case this.fastKey:
+				case this.forwardKey:
+				case this.backKey:
+				case this.leftKey:
+				case this.rightKey:
+				case this.upKey:
+				case this.downKey:
+					e.stopPropagation();
+					e.preventDefault();
+
+			}
+
+			if ( forwardHeld || backHeld || leftHeld || rightHeld || upHeld || downHeld ) {
+
+				this.minDistance = 0.01;
+				this.maxDistance = 0.01;
+
+				// Move the orbit target out to just in front of the camera
+				tempVector
+					.set( 0, 0, - 1, 0 )
+					.applyMatrix4( camera.matrixWorld );
+				this
+					.target
+					.copy( camera.position )
+					.addScaledVector( tempVector, 0.01 );
+
+				if ( rafHandle === - 1 ) {
+
+					// start the flight and reset the clock
+					this.dispatchEvent( startEvent );
+					clock.getDelta();
+					updateFlight();
+
+				}
+
+			}
+
+		};
+
+		const keyUpCallback = e => {
+
+			const key = e.key.toLowerCase();
+
+			switch ( key ) {
+
+				case this.fastKey:
+				case this.forwardKey:
+				case this.backKey:
+				case this.leftKey:
+				case this.rightKey:
+				case this.upKey:
+				case this.downKey:
+					e.stopPropagation();
+					e.preventDefault();
+
+			}
+
+			switch( key ) {
+
+				case this.forwardKey:
+					forwardHeld = false;
+					break;
+				case this.backKey:
+					backHeld = false;
+					break;
+				case this.leftKey:
+					leftHeld = false;
+					break;
+				case this.rightKey:
+					rightHeld = false;
+					break;
+				case this.upKey:
+					upHeld = false;
+					break;
+				case this.downKey:
+					downHeld = false;
+					break;
+				case this.fastKey:
+					fastHeld = false;
+					break;
+
+			}
+
+			if ( ! ( forwardHeld || backHeld || leftHeld || rightHeld || upHeld || downHeld ) ) {
+
+				endFlight();
+
+			}
+
+		};
+
+		const blurCallback = () => {
+
+			endFlight();
+
+		};
+
+		this.blurCallback = blurCallback;
+		this.keyDownCallback = keyDownCallback;
+		this.keyUpCallback = keyUpCallback;
+		this.disableShiftKeyCallback = disableShiftKeyCallback;
+
+		this.domElement.addEventListener( 'blur', blurCallback );
+		this.domElement.addEventListener( 'keydown', keyDownCallback );
+		this.domElement.addEventListener( 'keyup', keyUpCallback );
+
+	}
+
+	dispose() {
+
+		super.dispose();
+
+		this.domElement.removeEventListener( 'blur', this.blurCallback );
+		this.domElement.removeEventListener( 'keydown', this.keyDownCallback );
+		this.domElement.removeEventListener( 'keyup', this.keyUpCallback );
+		this.domElement.removeEventListener( 'pointerdown', this.disableShiftKeyCallback );
+
+	}
+
+}

example/bundle/cmptExample.html

@@ -1,28 +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.4b2a3f0d.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.8f1e4507.js"></script> </body></html>

example/bundle/customMaterial.html

@@ -1,28 +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.dd39ecee.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.3c5f1ac2.js"></script> </body></html>

example/bundle/i3dmExample.html

@@ -1,28 +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.c6cc930a.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.3768b750.js"></script> </body></html>

example/bundle/index.html

@@ -1,28 +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.e31bb0bc.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.24c987af.js"></script> </body></html>

example/bundle/offscreenShadows.html

@@ -1,28 +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.ce0529e7.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.dc95112f.js"></script> </body></html>

example/bundle/pntsExample.html

@@ -1,28 +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.1cabf3ff.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.89b14e40.js"></script> </body></html>

example/index.js

@@ -25,9 +25,11 @@ import {
 	Group,
 	TorusBufferGeometry,
 	OrthographicCamera,
-	sRGBEncoding
+	sRGBEncoding,
+	Vector4,
+	Vector3,
 } 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';
@@ -120,6 +122,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 );
@@ -146,8 +149,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;
@@ -170,14 +174,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;

package.json

@@ -21,7 +21,8 @@
     "src/*"
   ],
   "scripts": {
-    "start": "concurrently \"parcel watch example/*.html --out-dir ./example/bundle/ --public-url . --no-cache\" \"static-server\"",
+    "start": "concurrently \"parcel watch example/*.html --out-dir ./example/dev-bundle/ --public-url . --no-cache\" \"static-server\"",
+    "build": "parcel build example/*.html --out-dir ./example/bundle/ --public-url . --no-cache",
     "lint": "eslint \"src/**/*.js\" \"test/**/*.js\" && tsc -p tsconfig.json --noEmit",
     "test": "jest"
   },