|
|
@@ -24,6 +24,7 @@ import Stats from 'three/examples/jsm/libs/stats.module.js';
|
|
|
|
|
|
let camera, controls, scene, renderer, tiles, cameraHelper;
|
|
|
let thirdPersonCamera, thirdPersonRenderer, thirdPersonControls;
|
|
|
+let secondRenderer, secondCameraHelper, secondControls, secondCamera;
|
|
|
let orthoCamera, orthoCameraHelper;
|
|
|
let box;
|
|
|
let raycaster, mouse, rayIntersect;
|
|
|
@@ -42,11 +43,13 @@ let params = {
|
|
|
'maxDepth': 15,
|
|
|
'loadSiblings': true,
|
|
|
'displayActiveTiles': false,
|
|
|
+ 'resolutionScale': 1.0,
|
|
|
|
|
|
'up': '+Y',
|
|
|
'displayBoxBounds': false,
|
|
|
'colorMode': 0,
|
|
|
'showThirdPerson': false,
|
|
|
+ 'showSecondView': false,
|
|
|
'reload': reinstantiateTiles,
|
|
|
|
|
|
};
|
|
|
@@ -71,6 +74,41 @@ function reinstantiateTiles() {
|
|
|
|
|
|
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.outputEncoding = sRGBEncoding;
|
|
|
+
|
|
|
+ document.body.appendChild( renderer.domElement );
|
|
|
+
|
|
|
+ // secondary camera view
|
|
|
+ secondCamera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 4000 );
|
|
|
+ secondCamera.position.set( 50, 40, 40 );
|
|
|
+ secondCamera.lookAt( 0, 0, 0 );
|
|
|
+
|
|
|
+ secondRenderer = new WebGLRenderer( { antialias: true } );
|
|
|
+ secondRenderer.setPixelRatio( window.devicePixelRatio );
|
|
|
+ secondRenderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+ secondRenderer.setClearColor( 0x0f1416 );
|
|
|
+ secondRenderer.outputEncoding = sRGBEncoding;
|
|
|
+
|
|
|
+ document.body.appendChild( secondRenderer.domElement );
|
|
|
+ secondRenderer.domElement.style.position = 'absolute';
|
|
|
+ secondRenderer.domElement.style.right = '0';
|
|
|
+ secondRenderer.domElement.style.top = '0';
|
|
|
+
|
|
|
+ secondControls = new OrbitControls( secondCamera, secondRenderer.domElement );
|
|
|
+ secondControls.screenSpacePanning = false;
|
|
|
+ secondControls.minDistance = 1;
|
|
|
+ secondControls.maxDistance = 2000;
|
|
|
+
|
|
|
+ secondCameraHelper = new CameraHelper( secondCamera );
|
|
|
+ scene.add( secondCameraHelper );
|
|
|
+
|
|
|
// Third person camera view
|
|
|
thirdPersonCamera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 4000 );
|
|
|
thirdPersonCamera.position.set( 50, 40, 40 );
|
|
|
@@ -80,6 +118,7 @@ function init() {
|
|
|
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';
|
|
|
@@ -91,17 +130,7 @@ function init() {
|
|
|
thirdPersonControls.minDistance = 1;
|
|
|
thirdPersonControls.maxDistance = 2000;
|
|
|
|
|
|
- // primary camera view
|
|
|
- scene = new Scene();
|
|
|
-
|
|
|
- renderer = new WebGLRenderer( { antialias: true } );
|
|
|
- renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
- renderer.setClearColor( 0x151c1f );
|
|
|
- renderer.outputEncoding = sRGBEncoding;
|
|
|
-
|
|
|
- document.body.appendChild( renderer.domElement );
|
|
|
-
|
|
|
+ // scene setup
|
|
|
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 4000 );
|
|
|
camera.position.set( 400, 400, 400 );
|
|
|
|
|
|
@@ -113,7 +142,6 @@ function init() {
|
|
|
orthoCameraHelper = new CameraHelper( orthoCamera );
|
|
|
scene.add( orthoCameraHelper );
|
|
|
|
|
|
-
|
|
|
// controls
|
|
|
controls = new OrbitControls( camera, renderer.domElement );
|
|
|
controls.screenSpacePanning = false;
|
|
|
@@ -163,7 +191,6 @@ function init() {
|
|
|
gui.width = 300;
|
|
|
|
|
|
const tileOptions = gui.addFolder( 'Tiles Options' );
|
|
|
- tileOptions.add( params, 'orthographic' );
|
|
|
tileOptions.add( params, 'loadSiblings' );
|
|
|
tileOptions.add( params, 'displayActiveTiles' );
|
|
|
tileOptions.add( params, 'errorTarget' ).min( 0 ).max( 50 );
|
|
|
@@ -187,12 +214,17 @@ function init() {
|
|
|
} );
|
|
|
debug.open();
|
|
|
|
|
|
- gui.add( params, 'showThirdPerson' );
|
|
|
- gui.add( params, 'enableUpdate' );
|
|
|
- gui.add( params, 'enableRaycast' );
|
|
|
- gui.add( params, 'enableCacheDisplay' );
|
|
|
- gui.add( params, 'reload' );
|
|
|
+ const exampleOptions = gui.addFolder( 'Example Options' );
|
|
|
+ exampleOptions.add( params, 'resolutionScale' ).min( 0.01 ).max( 2.0 ).step( 0.01 ).onChange( onWindowResize );
|
|
|
+ exampleOptions.add( params, 'orthographic' );
|
|
|
+ exampleOptions.add( params, 'showThirdPerson' );
|
|
|
+ exampleOptions.add( params, 'showSecondView' ).onChange( onWindowResize );
|
|
|
+ exampleOptions.add( params, 'enableUpdate' );
|
|
|
+ exampleOptions.add( params, 'enableRaycast' );
|
|
|
+ exampleOptions.add( params, 'enableCacheDisplay' );
|
|
|
+ exampleOptions.open();
|
|
|
|
|
|
+ gui.add( params, 'reload' );
|
|
|
gui.open();
|
|
|
|
|
|
statsContainer = document.createElement( 'div' );
|
|
|
@@ -220,9 +252,28 @@ function onWindowResize() {
|
|
|
thirdPersonCamera.updateProjectionMatrix();
|
|
|
thirdPersonRenderer.setSize( Math.floor( window.innerWidth / 3 ), Math.floor( window.innerHeight / 3 ) );
|
|
|
|
|
|
- camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
+ if ( params.showSecondView ) {
|
|
|
+
|
|
|
+ camera.aspect = 0.5 * window.innerWidth / window.innerHeight;
|
|
|
+ renderer.setSize( 0.5 * window.innerWidth, window.innerHeight );
|
|
|
+
|
|
|
+ secondCamera.aspect = 0.5 * window.innerWidth / window.innerHeight;
|
|
|
+ secondRenderer.setSize( 0.5 * window.innerWidth, window.innerHeight );
|
|
|
+ secondRenderer.domElement.style.display = 'block';
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+
|
|
|
+ secondRenderer.domElement.style.display = 'none';
|
|
|
+
|
|
|
+ }
|
|
|
camera.updateProjectionMatrix();
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+ renderer.setPixelRatio( window.devicePixelRatio * params.resolutionScale );
|
|
|
+
|
|
|
+ secondCamera.updateProjectionMatrix();
|
|
|
+ secondRenderer.setPixelRatio( window.devicePixelRatio );
|
|
|
|
|
|
updateOrthoCamera();
|
|
|
|
|
|
@@ -316,10 +367,30 @@ function animate() {
|
|
|
tiles.displayBoxBounds = params.displayBoxBounds;
|
|
|
tiles.colorMode = parseFloat( params.colorMode );
|
|
|
|
|
|
- tiles.setCamera( params.orthographic ? orthoCamera : camera );
|
|
|
- tiles.setResolutionFromRenderer( orthoCamera, renderer );
|
|
|
- tiles.setResolutionFromRenderer( camera, renderer );
|
|
|
- tiles.deleteCamera( params.orthographic ? camera : orthoCamera );
|
|
|
+ if ( params.orthographic ) {
|
|
|
+
|
|
|
+ tiles.deleteCamera( camera );
|
|
|
+ tiles.setCamera( orthoCamera );
|
|
|
+ tiles.setResolutionFromRenderer( orthoCamera, renderer );
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ tiles.deleteCamera( orthoCamera );
|
|
|
+ tiles.setCamera( camera );
|
|
|
+ tiles.setResolutionFromRenderer( camera, renderer );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if ( params.showSecondView ) {
|
|
|
+
|
|
|
+ tiles.setCamera( secondCamera );
|
|
|
+ tiles.setResolutionFromRenderer( secondCamera, secondRenderer );
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ tiles.deleteCamera( secondCamera );
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
offsetParent.rotation.set( 0, 0, 0 );
|
|
|
if ( params.up === '-Z' ) {
|
|
|
@@ -389,6 +460,7 @@ function animate() {
|
|
|
window.tiles = tiles;
|
|
|
if ( params.enableUpdate ) {
|
|
|
|
|
|
+ secondCamera.updateMatrixWorld();
|
|
|
camera.updateMatrixWorld();
|
|
|
orthoCamera.updateMatrixWorld();
|
|
|
tiles.update();
|
|
|
@@ -404,11 +476,20 @@ function render() {
|
|
|
|
|
|
updateOrthoCamera();
|
|
|
|
|
|
- // render primary view
|
|
|
cameraHelper.visible = false;
|
|
|
orthoCameraHelper.visible = false;
|
|
|
+ secondCameraHelper.visible = false;
|
|
|
+
|
|
|
+ // render primary view
|
|
|
renderer.render( scene, params.orthographic ? orthoCamera : camera );
|
|
|
|
|
|
+ // render secondary view
|
|
|
+ if ( params.showSecondView ) {
|
|
|
+
|
|
|
+ secondRenderer.render( scene, secondCamera );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
// render third person view
|
|
|
thirdPersonRenderer.domElement.style.visibility = params.showThirdPerson ? 'visible' : 'hidden';
|
|
|
if ( params.showThirdPerson ) {
|
|
|
@@ -418,6 +499,14 @@ function render() {
|
|
|
|
|
|
orthoCameraHelper.update();
|
|
|
orthoCameraHelper.visible = params.orthographic;
|
|
|
+
|
|
|
+ if ( params.showSecondView ) {
|
|
|
+
|
|
|
+ secondCameraHelper.update();
|
|
|
+ secondCameraHelper.visible = true;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
thirdPersonRenderer.render( scene, thirdPersonCamera );
|
|
|
|
|
|
}
|
Garrett Johnson