Browse Source

Add b3dm loading example

Garrett Johnson 5 years ago
parent
commit
82c4284709

+ 30 - 0
example/b3dmExample.html

@@ -0,0 +1,30 @@
+<!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 Batch 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="./b3dmExample.js"></script>
+    </body>
+</html>

+ 136 - 0
example/b3dmExample.js

@@ -0,0 +1,136 @@
+import { B3DMLoader } from '../src/index.js';
+import {
+	Scene,
+	DirectionalLight,
+	AmbientLight,
+	WebGLRenderer,
+	PerspectiveCamera,
+	Box3,
+	OrthographicCamera,
+	sRGBEncoding,
+	Group,
+	PCFSoftShadowMap,
+} from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import * as dat from 'three/examples/jsm/libs/dat.gui.module.js';
+
+let camera, controls, scene, renderer, tiles, orthoCamera;
+let offsetParent, box, dirLight;
+let stats;
+
+const params = {
+
+};
+
+init();
+animate();
+
+function init() {
+
+	scene = new Scene();
+
+	// primary camera view
+	renderer = new WebGLRenderer( { antialias: true } );
+	renderer.setPixelRatio( window.devicePixelRatio );
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	renderer.setClearColor( 0x151c1f );
+	renderer.shadowMap.enabled = true;
+	renderer.shadowMap.type = PCFSoftShadowMap;
+	renderer.outputEncoding = sRGBEncoding;
+
+	document.body.appendChild( renderer.domElement );
+
+	camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 4000 );
+	camera.position.set( 400, 400, 400 );
+
+	orthoCamera = new OrthographicCamera();
+
+	// controls
+	controls = new OrbitControls( camera, renderer.domElement );
+	controls.screenSpacePanning = false;
+	controls.minDistance = 1;
+	controls.maxDistance = 2000;
+
+	// lights
+	dirLight = new DirectionalLight( 0xffffff, 1.25 );
+	dirLight.position.set( 1, 2, 3 ).multiplyScalar( 40 );
+	dirLight.castShadow = true;
+	dirLight.shadow.bias = - 0.01;
+	dirLight.shadow.mapSize.setScalar( 2048 );
+
+	const shadowCam = dirLight.shadow.camera;
+	shadowCam.left = - 200;
+	shadowCam.bottom = - 200;
+	shadowCam.right = 200;
+	shadowCam.top = 200;
+	shadowCam.updateProjectionMatrix();
+
+	scene.add( dirLight );
+
+	const ambLight = new AmbientLight( 0xffffff, 0.05 );
+	scene.add( ambLight );
+
+	box = new Box3();
+
+	new B3DMLoader()
+		.load( 'https://raw.githubusercontent.com/CesiumGS/3d-tiles-samples/master/tilesets/TilesetWithRequestVolume/city/lr.b3dm' )
+		.then( res => {
+
+			console.log( res );
+			scene.add( res.scene );
+
+		} );
+
+	onWindowResize();
+	window.addEventListener( 'resize', onWindowResize, false );
+
+	// GUI
+	const gui = new dat.GUI();
+	gui.width = 300;
+	gui.open();
+
+}
+
+function onWindowResize() {
+
+	camera.aspect = window.innerWidth / window.innerHeight;
+	renderer.setPixelRatio( window.devicePixelRatio );
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	camera.updateProjectionMatrix();
+
+	updateOrthoCamera();
+
+}
+
+function updateOrthoCamera() {
+
+	orthoCamera.position.copy( camera.position );
+	orthoCamera.rotation.copy( camera.rotation );
+
+	const scale = camera.position.distanceTo( controls.target ) / 2.0;
+	let aspect = window.innerWidth / window.innerHeight;
+	orthoCamera.left = - aspect * scale;
+	orthoCamera.right = aspect * scale;
+	orthoCamera.bottom = - scale;
+	orthoCamera.top = scale;
+	orthoCamera.near = camera.near;
+	orthoCamera.far = camera.far;
+	orthoCamera.updateProjectionMatrix();
+
+}
+
+function animate() {
+
+	requestAnimationFrame( animate );
+
+	render();
+
+}
+
+function render() {
+
+	updateOrthoCamera();
+
+	renderer.render( scene, params.orthographic ? orthoCamera : camera );
+
+}

+ 28 - 0
example/bundle/b3dmExample.4256bbd5.html

@@ -0,0 +1,28 @@
+<!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 Batch 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="batchExample.ff06acdf.js"></script>
+    </body>
+</html>

File diff suppressed because it is too large
+ 392 - 0
example/bundle/b3dmExample.4256bbd5.js


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


+ 28 - 0
example/bundle/b3dmExample.html

@@ -0,0 +1,28 @@
+<!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 Batch 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="ee35356ba6adcc4b196da8cfff06acdf.js"></script>
+    </body>
+</html>

+ 1 - 1
example/bundle/customMaterial.dd39ecee.js

@@ -45180,7 +45180,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "61723" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "62153" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

+ 1 - 1
example/bundle/customMaterial.js

@@ -212,7 +212,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "61723" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "62153" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

+ 1 - 1
example/bundle/example.e31bb0bc.js

@@ -45960,7 +45960,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "61723" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "62153" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

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


+ 1 - 1
example/bundle/index.js

@@ -212,7 +212,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "61723" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "63798" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

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