Add support to the DebugTilesRenderer and examples for tilesets which only have bounding spheres, but no bounding boxes.

example/customMaterial.js

@@ -12,13 +12,14 @@ import {
 	ShaderMaterial,
 	MeshStandardMaterial,
 	PCFSoftShadowMap,
+	Sphere,
 } from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import * as dat from 'three/examples/jsm/libs/dat.gui.module.js';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 
 let camera, controls, scene, renderer, tiles, orthoCamera;
-let offsetParent, box, dirLight, statsContainer;
+let offsetParent, box, sphere, dirLight, statsContainer;
 let stats;
 
 const DEFAULT = 0;
@@ -258,6 +259,7 @@ function init() {
 	scene.add( ambLight );
 
 	box = new Box3();
+	sphere = new Sphere();
 
 	offsetParent = new Group();
 	scene.add( offsetParent );
@@ -359,6 +361,11 @@ function animate() {
 		box.getCenter( tiles.group.position );
 		tiles.group.position.multiplyScalar( - 1 );
 
+	} else if ( tiles.getBoundingSphere(sphere) ) {
+
+		tiles.group.position.copy(sphere.center);
+		tiles.group.position.multiplyScalar(-1);
+
 	}
 
 	// update tiles

example/index.js

@@ -27,6 +27,7 @@ import {
 	TorusBufferGeometry,
 	OrthographicCamera,
 	sRGBEncoding,
+	Sphere,
 } from 'three';
 import { FlyOrbitControls } from './FlyOrbitControls.js';
 import { BufferGeometryUtils } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
@@ -43,7 +44,7 @@ let camera, controls, scene, renderer, tiles, cameraHelper;
 let thirdPersonCamera, thirdPersonRenderer, thirdPersonControls;
 let secondRenderer, secondCameraHelper, secondControls, secondCamera;
 let orthoCamera, orthoCameraHelper;
-let box;
+let box, sphere;
 let raycaster, mouse, rayIntersect, lastHoveredElement;
 let offsetParent;
 let statsContainer, stats;
@@ -190,6 +191,7 @@ function init() {
 	scene.add( ambLight );
 
 	box = new Box3();
+	sphere = new Sphere();
 
 	offsetParent = new Group();
 	scene.add( offsetParent );
@@ -497,6 +499,11 @@ function animate() {
 		box.getCenter( tiles.group.position );
 		tiles.group.position.multiplyScalar( - 1 );
 
+	} else if ( tiles.getBoundingSphere(sphere) ) {
+
+		tiles.group.position.copy(sphere.center);
+		tiles.group.position.multiplyScalar(-1);
+
 	}
 
 	if ( parseFloat( params.raycast ) !== NONE && lastHoveredElement !== null ) {

example/offscreenShadows.js

@@ -11,13 +11,14 @@ import {
 	Group,
 	MeshStandardMaterial,
 	PCFSoftShadowMap,
+	Sphere,
 } from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import * as dat from 'three/examples/jsm/libs/dat.gui.module.js';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 
 let camera, controls, scene, renderer, tiles, orthoCamera;
-let offsetParent, box, dirLight;
+let offsetParent, box, sphere, dirLight;
 let stats;
 
 const NONE = 0;
@@ -110,6 +111,7 @@ function init() {
 	scene.add( ambLight );
 
 	box = new Box3();
+	sphere = new Sphere();
 
 	offsetParent = new Group();
 	scene.add( offsetParent );
@@ -224,6 +226,11 @@ function animate() {
 		box.getCenter( tiles.group.position );
 		tiles.group.position.multiplyScalar( - 1 );
 
+	} else if ( tiles.getBoundingSphere(sphere) ) {
+
+		tiles.group.position.copy(sphere.center);
+		tiles.group.position.multiplyScalar(-1);
+
 	}
 
 	// update tiles

example/vr.js

@@ -30,6 +30,7 @@ import {
 	Line,
 	Vector3,
 	RingBufferGeometry,
+	Sphere,
 } from 'three';
 import * as dat from 'three/examples/jsm/libs/dat.gui.module.js';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
@@ -37,7 +38,7 @@ import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerM
 
 let camera, scene, renderer, tiles;
 let workspace;
-let box, grid;
+let box, sphere, grid;
 let raycaster, fwdVector, intersectRing;
 let offsetParent;
 let controller, controllerGrip;
@@ -92,6 +93,7 @@ function init() {
 
 	// tile set
 	box = new Box3();
+	sphere = new Sphere();
 
 	// parent for centering the tileset
 	offsetParent = new Group();
@@ -227,6 +229,11 @@ function render() {
 		box.getCenter( tiles.group.position );
 		tiles.group.position.multiplyScalar( - 1 );
 
+	} else if ( tiles.getBoundingSphere(sphere) ) {
+
+		tiles.group.position.copy(sphere.center);
+		tiles.group.position.multiplyScalar(-1);
+
 	}
 
 	// remove all cameras so we can use the VR camera instead

src/three/DebugTilesRenderer.js

@@ -372,11 +372,19 @@ export class DebugTilesRenderer extends TilesRenderer {
 
 		} else {
 
-			boxGroup.add( boxHelperGroup );
-			boxHelperGroup.updateMatrixWorld( true );
+			if ( boxHelperGroup ) {
 
-			sphereGroup.add( sphereHelper );
-			sphereHelper.updateMatrixWorld( true );
+				boxGroup.add( boxHelperGroup );
+				boxHelperGroup.updateMatrixWorld( true );
+
+			}
+
+			if ( sphereHelper ) {
+
+				sphereGroup.add( sphereHelper );
+				sphereHelper.updateMatrixWorld( true );
+
+			}
 
 		}
 
@@ -392,40 +400,49 @@ export class DebugTilesRenderer extends TilesRenderer {
 				const scene = cached.scene;
 				if ( scene ) {
 
-					const cachedBox = cached.box;
-					const cachedBoxMat = cached.boxTransform;
 
-					// Create debug bounding box
-					// In some cases the bounding box may have a scale of 0 in one dimension resulting
-					// in the NaNs in an extracted rotation so we disable matrix updates instead.
-					const boxHelperGroup = new Group();
-					boxHelperGroup.name = 'DebugTilesRenderer.boxHelperGroup';
-					boxHelperGroup.matrix.copy( cachedBoxMat );
-					boxHelperGroup.matrixAutoUpdate = false;
+					if ( cached.box && cached.boxTransform ) {
+
+						const cachedBox = cached.box;
+						const cachedBoxMat = cached.boxTransform;
 
-					const boxHelper = new Box3Helper( cachedBox, getIndexedRandomColor( tile.__depth ) );
-					boxHelper.raycast = emptyRaycast;
-					boxHelperGroup.add( boxHelper );
+						// Create debug bounding box
+						// In some cases the bounding box may have a scale of 0 in one dimension resulting
+						// in the NaNs in an extracted rotation so we disable matrix updates instead.
+						const boxHelperGroup = new Group();
+						boxHelperGroup.name = 'DebugTilesRenderer.boxHelperGroup';
+						boxHelperGroup.matrix.copy( cachedBoxMat );
+						boxHelperGroup.matrixAutoUpdate = false;
 
-					cached.boxHelperGroup = boxHelperGroup;
+						const boxHelper = new Box3Helper( cachedBox, getIndexedRandomColor( tile.__depth ) );
+						boxHelper.raycast = emptyRaycast;
+						boxHelperGroup.add( boxHelper );
 
-					if ( this.visibleTiles.has( tile ) && this.displayBoxBounds ) {
+						cached.boxHelperGroup = boxHelperGroup;
 
-						this.boxGroup.add( boxHelperGroup );
-						boxHelperGroup.updateMatrixWorld( true );
+						if ( this.visibleTiles.has( tile ) && this.displayBoxBounds ) {
+
+							this.boxGroup.add( boxHelperGroup );
+							boxHelperGroup.updateMatrixWorld( true );
+
+						}
 
 					}
 
-					// Create debugbounding sphere
-					const cachedSphere = cached.sphere;
-					const sphereHelper = new SphereHelper( cachedSphere );
-					sphereHelper.raycast = emptyRaycast;
-					cached.sphereHelper = sphereHelper;
+					if ( cached.sphere ) {
 
-					if ( this.visibleTiles.has( tile ) && this.displaySphereBounds ) {
+						// Create debugbounding sphere
+						const cachedSphere = cached.sphere;
+						const sphereHelper = new SphereHelper( cachedSphere );
+						sphereHelper.raycast = emptyRaycast;
+						cached.sphereHelper = sphereHelper;
 
-						this.sphereGroup.add( sphereHelper );
-						sphereHelper.updateMatrixWorld( true );
+						if ( this.visibleTiles.has( tile ) && this.displaySphereBounds ) {
+
+							this.sphereGroup.add( sphereHelper );
+							sphereHelper.updateMatrixWorld( true );
+
+						}
 
 					}
 

src/three/TilesRenderer.js

@@ -166,6 +166,29 @@ export class TilesRenderer extends TilesRendererBase {
 		}
 
 	}
+	
+	getBoundingSphere(sphere) {
+
+		if ( ! this.root ) {
+
+			return false;
+
+		}
+
+		const boundingSphere = this.root.cached.sphere;
+
+		if ( boundingSphere ) {
+
+			sphere.copy( boundingSphere );
+			return true;
+
+		} else {
+
+			return false;
+
+		}
+
+	}
 
 	forEachLoadedModel( callback ) {