首頁 探索 說明
註冊 登入
bill
/
3DTilesRendererJS
1
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

Add CMPT loader progress

Garrett Johnson 5 年之前
父節點
9d99ea1419
當前提交
474423a0b1
共有 6 個文件被更改，包括 206 次插入 和 1 次删除
分割檢視 顯示文件統計
  1. 30 0
      example/cmptExample.html
  2. 102 0
      example/cmptExample.js
  3. 1 0
      src/base/B3DMLoaderBase.js
  4. 2 1
      src/base/I3DMLoaderBase.js
  5. 8 0
      src/index.js
  6. 63 0
      src/three/CMPTLoader.js

+ 30 - 0
example/cmptExample.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="./cmptExample.js"></script>
 
+    </body>
 
+</html>

+ 102 - 0
example/cmptExample.js
查看文件 

@@ -0,0 +1,102 @@
 
+import { CMPTLoader } from '../src/index.js';
 
+import {
 
+	Scene,
 
+	DirectionalLight,
 
+	AmbientLight,
 
+	WebGLRenderer,
 
+	PerspectiveCamera,
 
+	Box3,
 
+	sRGBEncoding,
 
+	PCFSoftShadowMap,
 
+} from 'three';
 
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
+
 
+let camera, controls, scene, renderer;
 
+let box, dirLight;
 
+
 
+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 );
 
+
 
+	// 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 CMPTLoader()
 
+		.load( '../bim/0/1/m.cmpt' )
 
+		.then( res => {
 
+
 
+			console.log(res);
 
+
 
+			// console.log( res );
 
+			// scene.add( res.scene );
 
+
 
+		} );
 
+
 
+	onWindowResize();
 
+	window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+}
 
+
 
+function onWindowResize() {
 
+
 
+	camera.aspect = window.innerWidth / window.innerHeight;
 
+	renderer.setPixelRatio( window.devicePixelRatio );
 
+	renderer.setSize( window.innerWidth, window.innerHeight );
 
+	camera.updateProjectionMatrix();
 
+
 
+}
 
+
 
+function animate() {
 
+
 
+	requestAnimationFrame( animate );
 
+
 
+	render();
 
+
 
+}
 
+
 
+function render() {
 
+
 
+	renderer.render( scene, camera );
 
+
 
+}

+ 1 - 0
src/base/B3DMLoaderBase.js
查看文件 

@@ -21,6 +21,7 @@ export class B3DMLoaderBase {
 
 
 	parse( buffer ) {
 
 
+		// TODO: this should be able to take a uint8array with an offset and length
 
 		const dataView = new DataView( buffer );
 
 
 		// 28-byte header

+ 2 - 1
src/base/I3DMLoaderBase.js
查看文件 

@@ -79,7 +79,8 @@ export class I3DMLoaderBase {
 
 		const glbStart = batchTableStart + batchTableJSONByteLength + batchTableBinaryByteLength;
 
 		const bodyBytes = new Uint8Array( buffer, glbStart, byteLength - glbStart );
 
 
-		// TODO: Consider just loading the data here rather than making the follow on function load it.
 
+		// TODO: Load the data directly here and just return a promise from this parser. GLTFLoader has
 
+		// an async parse function, as well.
 
 		let glbBytes = null;
 
 		let externalUri = null;
 
 		if ( gltfFormat ) {

+ 8 - 0
src/index.js
查看文件 

@@ -11,9 +11,13 @@ import {
 
 } from './three/DebugTilesRenderer.js';
 
 import { TilesRenderer } from './three/TilesRenderer.js';
 
 import { B3DMLoader } from './three/B3DMLoader.js';
 
+import { CMPTLoader } from './three/CMPTLoader.js';
 
 
 import { TilesRendererBase } from './base/TilesRendererBase.js';
 
 import { B3DMLoaderBase } from './base/B3DMLoaderBase.js';
 
+import { CMPTLoaderBase } from './base/CMPTLoaderBase.js';
 
+import { I3DMLoaderBase } from './base/I3DMLoaderBase.js';
 
+import { PNTSLoaderBase } from './base/PNTSLoaderBase.js';
 
 
 import { LRUCache } from './utilities/LRUCache.js';
 
 import { PriorityQueue } from './utilities/PriorityQueue.js';
 
@@ -22,9 +26,13 @@ export {
 
 	DebugTilesRenderer,
 
 	TilesRenderer,
 
 	B3DMLoader,
 
+	CMPTLoader,
 
 
 	TilesRendererBase,
 
 	B3DMLoaderBase,
 
+	CMPTLoaderBase,
 
+	I3DMLoaderBase,
 
+	PNTSLoaderBase,
 
 
 	LRUCache,
 
 	PriorityQueue,

+ 63 - 0
src/three/CMPTLoader.js
查看文件 

@@ -0,0 +1,63 @@
 
+import { Group } from 'three';
 
+import { CMPTLoaderBase } from '../base/CMPTLoaderBase.js';
 
+import { B3DMLoader } from './B3DMLoader.js';
 
+
 
+export class CMPTLoader extends CMPTLoaderBase {
 
+
 
+	constructor( manager ) {
 
+
 
+		super();
 
+		this.manager = manager;
 
+
 
+	}
 
+
 
+	parse( buffer ) {
 
+
 
+		const manager = this.manager;
 
+		const result = super.parse( buffer );
 
+		const group = new Group();
 
+		const results = [];
 
+		const promises = [];
 
+
 
+		console.log( result, buffer.byteLength );
 
+		for ( const i in result.tiles ) {
 
+
 
+			const { type, buffer } = result.tiles[ i ];
 
+			switch ( type ) {
 
+				case 'b3dm':
 
+
 
+					const slicedBuffer = buffer.slice();
 
+					console.log( slicedBuffer.buffer.byteLength, buffer.buffer.byteLength );
 
+
 
+					const blob = URL.createObjectURL( new Blob( [ slicedBuffer ] ) );
 
+					const promise =
 
+						new B3DMLoader( manager ).parse( buffer.slice().buffer );
 
+
 
+					promise.then( res => {
 
+
 
+						results.push( res );
 
+						group.add( res.scene );
 
+
 
+					} );
 
+					break;
 
+				case 'i3dm':
 
+				case 'pnts':
 
+				default:
 
+			}
 
+
 
+		}
 
+
 
+		return Promise.all( promises ).then( () => {
 
+
 
+			return {
 
+
 
+				tiles: results,
 
+				scene: group,
 
+
 
+			};
 
+
 
+		} );
 
+
 
+	}
 
+
 
+}