|
|
@@ -1,5 +1,5 @@
|
|
|
import {
|
|
|
- DebugTilesRenderer as TilesRenderer,
|
|
|
+ DebugTilesRenderer as TilesRenderer, InfiniteGridHelper
|
|
|
} from '../src/index.js';
|
|
|
import {
|
|
|
Scene,
|
|
|
@@ -10,23 +10,26 @@ import {
|
|
|
Group,
|
|
|
sRGBEncoding,
|
|
|
FogExp2,
|
|
|
+ CameraHelper,
|
|
|
+ Color
|
|
|
} from 'three';
|
|
|
import { FlyOrbitControls } from './FlyOrbitControls.js';
|
|
|
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
|
|
|
import { LoadingManager } from 'three';
|
|
|
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
|
|
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
|
|
-
|
|
|
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils';
|
|
|
let camera, controls, scene, renderer;
|
|
|
+let thirdPersonCamera, thirdPersonRenderer, thirdPersonControls, cameraHelper
|
|
|
let groundTiles, skyTiles;
|
|
|
let tilesRendererArr = [];
|
|
|
-
|
|
|
+let statsContainer
|
|
|
const params = {
|
|
|
|
|
|
- errorTarget: 12,
|
|
|
+ errorTarget: 45,
|
|
|
displayBoxBounds: false,
|
|
|
fog: false,
|
|
|
-
|
|
|
+ showThirdPerson: false,
|
|
|
};
|
|
|
|
|
|
init();
|
|
|
@@ -49,16 +52,56 @@ function init() {
|
|
|
|
|
|
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 4000 );
|
|
|
camera.position.set( 20, 10, 20 );
|
|
|
-
|
|
|
+ cameraHelper = new CameraHelper( camera );
|
|
|
+ scene.add( cameraHelper );
|
|
|
+
|
|
|
+
|
|
|
// controls
|
|
|
controls = new FlyOrbitControls( camera, renderer.domElement );
|
|
|
controls.screenSpacePanning = false;
|
|
|
controls.minDistance = 1;
|
|
|
controls.maxDistance = 2000;
|
|
|
- controls.maxPolarAngle = Math.PI / 2;
|
|
|
+ //controls.maxPolarAngle = Math.PI / 2;
|
|
|
controls.baseSpeed = 0.1;
|
|
|
controls.fastSpeed = 0.2;
|
|
|
|
|
|
+
|
|
|
+ //加
|
|
|
+
|
|
|
+ // Third person camera view
|
|
|
+ thirdPersonCamera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 4000 );
|
|
|
+ thirdPersonCamera.position.set( 50, 40, 40 );
|
|
|
+ thirdPersonCamera.lookAt( 0, 0, 0 );
|
|
|
+
|
|
|
+ thirdPersonRenderer = new WebGLRenderer( { antialias: true } );
|
|
|
+ thirdPersonRenderer.setPixelRatio( window.devicePixelRatio );
|
|
|
+ thirdPersonRenderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+ thirdPersonRenderer.setClearColor( 0x0f1416 );
|
|
|
+ thirdPersonRenderer.outputEncoding = sRGBEncoding;
|
|
|
+
|
|
|
+ document.body.appendChild( thirdPersonRenderer.domElement );
|
|
|
+ thirdPersonRenderer.domElement.style.position = 'fixed';
|
|
|
+ thirdPersonRenderer.domElement.style.left = '5px';
|
|
|
+ thirdPersonRenderer.domElement.style.bottom = '5px';
|
|
|
+ thirdPersonRenderer.domElement.style.width = '30%';
|
|
|
+ thirdPersonRenderer.domElement.style.height = '50%';
|
|
|
+ thirdPersonRenderer.domElement.tabIndex = 1;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ thirdPersonControls = new FlyOrbitControls( thirdPersonCamera, thirdPersonRenderer.domElement );
|
|
|
+ thirdPersonControls.screenSpacePanning = false;
|
|
|
+ thirdPersonControls.minDistance = 1;
|
|
|
+ thirdPersonControls.maxDistance = 2000;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ let ground = new InfiniteGridHelper(1, 10000, new Color('#fff'), 10000, 0.2, 0.3)
|
|
|
+ scene.add(ground)
|
|
|
+ ground.lookAt(0,1,0)
|
|
|
+
|
|
|
+
|
|
|
// lights
|
|
|
const dirLight = new DirectionalLight( 0xffffff );
|
|
|
dirLight.position.set( 1, 2, 3 );
|
|
|
@@ -102,8 +145,30 @@ function init() {
|
|
|
|
|
|
gui.add( params, 'displayBoxBounds' );
|
|
|
gui.add( params, 'errorTarget', 0, 100 );
|
|
|
+ gui.add( params, 'showThirdPerson' );
|
|
|
+
|
|
|
+
|
|
|
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 );
|
|
|
+
|
|
|
+ /* // Stats
|
|
|
+ stats = new Stats();
|
|
|
+ stats.showPanel( 0 );
|
|
|
+ document.body.appendChild( stats.dom ); */
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
function loadTileSet(qzpath,camera,renderer){
|
|
|
@@ -118,6 +183,7 @@ function loadTileSet(qzpath,camera,renderer){
|
|
|
const tilesetArr = data.root.children
|
|
|
for (const tilese of tilesetArr) {
|
|
|
// console.log(qzpath + tilese.content.uri)
|
|
|
+
|
|
|
const tilesRenderer = new TilesRenderer( qzpath + tilese.content.uri )
|
|
|
|
|
|
const gltfLoader = new GLTFLoader( tilesRenderer.manager );
|
|
|
@@ -133,6 +199,15 @@ function loadTileSet(qzpath,camera,renderer){
|
|
|
tilesObj.rotation.set(-Math.PI / 2, 0, 0)
|
|
|
scene.add( tilesObj )
|
|
|
tilesRendererArr.push(tilesRenderer)
|
|
|
+
|
|
|
+ //xzw: Multiple TilesRenderers with Shared Caches and Queues
|
|
|
+ if(tilesRendererArr[0]){
|
|
|
+ // set the second renderer to share the cache and queues from the first, 否则卡顿.
|
|
|
+ tilesRenderer.lruCache = tilesRendererArr[0].lruCache;
|
|
|
+ tilesRenderer.downloadQueue = tilesRendererArr[0].downloadQueue;
|
|
|
+ tilesRenderer.parseQueue = tilesRendererArr[0].parseQueue;
|
|
|
+ } //但还是比只有一个tileRenderer卡顿
|
|
|
+
|
|
|
}
|
|
|
});
|
|
|
|
|
|
@@ -159,6 +234,12 @@ function onWindowResize() {
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
|
|
|
+ thirdPersonCamera.aspect = thirdPersonRenderer.domElement.clientWidth / thirdPersonRenderer.domElement.clientHeight;
|
|
|
+ thirdPersonCamera.updateProjectionMatrix();
|
|
|
+ thirdPersonRenderer.setSize( thirdPersonRenderer.domElement.clientWidth, thirdPersonRenderer.domElement.clientHeight, false);
|
|
|
+ thirdPersonRenderer.setPixelRatio( window.devicePixelRatio );
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
function render() {
|
|
|
@@ -166,22 +247,120 @@ function render() {
|
|
|
requestAnimationFrame( render );
|
|
|
|
|
|
camera.updateMatrixWorld();
|
|
|
+ cameraHelper.visible = false;
|
|
|
+
|
|
|
+ let downloading = 0, parsing = 0, visibles = 0, count = 0
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
for (const tilesRenderer of tilesRendererArr) {
|
|
|
+ //xzw add ---------
|
|
|
+ tilesRenderer.errorTarget = params.errorTarget;
|
|
|
+ tilesRenderer.displayBoxBounds = params.displayBoxBounds;
|
|
|
+ //-----------------
|
|
|
tilesRenderer.update()
|
|
|
- }
|
|
|
+
|
|
|
+ downloading += tilesRenderer.stats.downloading
|
|
|
+ parsing += tilesRenderer.stats.parsing
|
|
|
+ visibles += tilesRenderer.group.children.length - 2
|
|
|
+
|
|
|
+
|
|
|
+ const geomSet = new Set();
|
|
|
+ tilesRenderer.traverse( tile => {
|
|
|
+ const scene = tile.cached.scene;
|
|
|
+ if ( scene ) {
|
|
|
+ scene.traverse( c => {
|
|
|
+ if ( c.geometry ) {
|
|
|
+ geomSet.add( c.geometry );
|
|
|
+ }
|
|
|
+ } );
|
|
|
+ }
|
|
|
+ } );
|
|
|
+
|
|
|
+ geomSet.forEach( g => {
|
|
|
+ let u = BufferGeometryUtils.estimateBytesUsed( g );
|
|
|
+ count += u
|
|
|
+ //console.log(g.uuid)
|
|
|
+ } );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ let cacheFullness = tilesRendererArr[0] ? tilesRendererArr[0].lruCache.itemList.length / tilesRendererArr[0].lruCache.maxSize : 0;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // render third person view
|
|
|
+ thirdPersonRenderer.domElement.style.visibility = params.showThirdPerson ? 'visible' : 'hidden';
|
|
|
|
|
|
- // groundTiles.errorTarget = params.errorTarget;
|
|
|
- // groundTiles.displayBoxBounds = params.displayBoxBounds;
|
|
|
- // skyTiles.displayBoxBounds = params.displayBoxBounds;
|
|
|
|
|
|
- // groundTiles.setCamera( camera );
|
|
|
- // groundTiles.setResolutionFromRenderer( camera, renderer );
|
|
|
- // groundTiles.update();
|
|
|
+ if ( params.showThirdPerson ) {
|
|
|
+ if(thirdPersonRenderer.domElement.style != 'block'){
|
|
|
+ thirdPersonRenderer.domElement.style.display = 'block'
|
|
|
+ onWindowResize()
|
|
|
+ }
|
|
|
+
|
|
|
+ cameraHelper.update();
|
|
|
+ cameraHelper.visible = true//! params.orthographic;
|
|
|
+
|
|
|
+
|
|
|
+ /* if ( params.showSecondView ) {
|
|
|
+
|
|
|
+ secondCameraHelper.update();
|
|
|
+ secondCameraHelper.visible = true;
|
|
|
+ }
|
|
|
+ */
|
|
|
+ //const dist = thirdPersonCamera.position.distanceTo( rayIntersect.position );
|
|
|
+ //rayIntersect.scale.setScalar( dist * thirdPersonCamera.fov / 6000 );
|
|
|
+ thirdPersonRenderer.render( scene, thirdPersonCamera );
|
|
|
|
|
|
- // skyTiles.setCamera( camera );
|
|
|
- // skyTiles.setResolutionFromRenderer( camera, renderer );
|
|
|
- // skyTiles.update();
|
|
|
+ }else{
|
|
|
+ thirdPersonRenderer.domElement.style.display = 'none'
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ let str = `Downloading: ${ downloading } Parsing: ${ parsing } Visible: ${visibles}`;
|
|
|
+
|
|
|
+ //if ( params.enableCacheDisplay ) {
|
|
|
+
|
|
|
+ str += `<br/>Cache: ${ ( 100 * cacheFullness ).toFixed( 2 ) }% ~${ ( count / 1000 / 1000 ).toFixed( 2 ) }mb`;
|
|
|
+
|
|
|
+ //}
|
|
|
+
|
|
|
+ //if ( params.enableRendererStats ) {
|
|
|
+
|
|
|
+ const memory = renderer.info.memory;
|
|
|
+ const programCount = renderer.info.programs.length;
|
|
|
+ str += `<br/>Geometries: ${ memory.geometries } Textures: ${ memory.textures } Programs: ${ programCount }`;
|
|
|
+
|
|
|
+ //}
|
|
|
+
|
|
|
+ //if ( statsContainer.innerHTML !== str ) {
|
|
|
+
|
|
|
+ statsContainer.innerHTML = str;
|
|
|
+
|
|
|
+ //}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
xzw