Add sphere helper support

example/index.js

@@ -38,7 +38,7 @@ let params = {
 	'loadSiblings': true,
 
 	'up': '+Y',
-	'displayBounds': false,
+	'displayBoxBounds': false,
 	'colorMode': 0,
 	'showThirdPerson': true,
 	'reload': reinstantiateTiles,
@@ -170,7 +170,7 @@ function init() {
 	tileOptions.open();
 
 	const debug = gui.addFolder( 'Debug Options' );
-	debug.add( params, 'displayBounds' );
+	debug.add( params, 'displayBoxBounds' );
 	debug.add( params, 'colorMode', {
 
 		DEFAULT: 0,
@@ -332,7 +332,7 @@ function animate() {
 	tiles.loadSiblings = params.loadSiblings;
 	tiles.maxDepth = params.maxDepth;
 	tiles.camera = params.orthographic ? orthoCamera : camera;
-	tiles.displayBounds = params.displayBounds;
+	tiles.displayBoxBounds = params.displayBoxBounds;
 
 	tiles.setResolutionFromRenderer( renderer );
 

src/three/DebugTilesRenderer.js

@@ -1,5 +1,6 @@
 import { Box3Helper, Group, MeshBasicMaterial } from 'three';
 import { TilesRenderer } from './TilesRenderer.js';
+import { SphereHelper } from './SphereHelper.js';
 
 const ORIGINAL_MATERIAL = Symbol( 'ORIGINAL_MATERIAL' );
 
@@ -19,9 +20,14 @@ export class DebugTilesRenderer extends TilesRenderer {
 		const boxGroup = new Group();
 		tilesGroup.add( boxGroup );
 
-		this.displayBounds = false;
+		const sphereGroup = new Group();
+		tilesGroup.add( sphereGroup );
+
+		this.displayBoxBounds = false;
+		this.displaySphereBounds = false;
 		this.colorMode = NONE;
 		this.boxGroup = boxGroup;
+		this.sphereGroup = sphereGroup;
 		this.maxDepth = - 1;
 		this.maxDistance = - 1;
 		this.maxError = - 1;
@@ -86,7 +92,8 @@ export class DebugTilesRenderer extends TilesRenderer {
 
 		}
 
-		this.boxGroup.visible = this.displayBounds;
+		this.boxGroup.visible = this.displayBoxBounds;
+		this.sphereGroup.visible = this.displaySphereBounds;
 
 		let maxDepth = - 1;
 		if ( this.maxDepth === - 1 ) {
@@ -165,10 +172,6 @@ export class DebugTilesRenderer extends TilesRenderer {
 							}
 							case SCREEN_ERROR: {
 
-								// TODO
-								// Allow custom scaling and make it work
-								const relativeError = tile.__error - errorTarget;
-
 								const val = tile.__error / errorTarget;
 								if ( val > 1.0 ) {
 
@@ -231,19 +234,25 @@ export class DebugTilesRenderer extends TilesRenderer {
 
 		super.setTileVisible( tile, visible );
 
-		const boxGroup = this.boxGroup;
 		const cached = tile.cached;
+		const sphereGroup = this.sphereGroup;
+		const boxGroup = this.boxGroup;
 		const boxHelperGroup = cached.boxHelperGroup;
+		const sphereHelper = cached.sphereHelper;
 
 		if ( ! visible && boxHelperGroup.parent ) {
 
 			boxGroup.remove( boxHelperGroup );
+			sphereGroup.remove( sphereHelper );
 
 		} else if ( visible && ! boxHelperGroup.parent ) {
 
 			boxGroup.add( boxHelperGroup );
 			boxHelperGroup.updateMatrixWorld( true );
 
+			sphereGroup.add( sphereHelper );
+			sphereHelper.updateMatrixWorld( true );
+
 		}
 
 	}
@@ -269,13 +278,24 @@ export class DebugTilesRenderer extends TilesRenderer {
 
 					const boxHelper = new Box3Helper( cachedBox );
 					boxHelperGroup.add( boxHelper );
-					boxHelperGroup.updateMatrixWorld( true );
 
 					cached.boxHelperGroup = boxHelperGroup;
 
-					if ( this.displayBounds ) {
+					if ( this.displayBoxBounds ) {
 
 						this.boxGroup.add( boxHelperGroup );
+						boxHelperGroup.updateMatrixWorld( true );
+
+					}
+
+					const cachedSphere = cached.sphere;
+					const sphereHelper = new SphereHelper( cachedSphere );
+					cached.sphereHelper = sphereHelper;
+
+					if ( this.displaySphereBounds ) {
+
+						this.sphereGroup.add( sphereHelper );
+						sphereHelper.updateMatrixWorld( true );
 
 					}
 

src/three/SphereHelper.js

@@ -0,0 +1,56 @@
+import { LineSegments, BufferGeometry, Vector3, BufferAttribute, LineBasicMaterial } from 'three';
+
+const _vector = new Vector3();
+const axes = [ 'x', 'y', 'z' ];
+export class SphereHelper extends LineSegments {
+
+	constructor( sphere, color = 0xffff00, angleSteps = 40 ) {
+
+		const geometry = new BufferGeometry();
+		const positions = [];
+		for ( let i = 0; i < 3; i ++ ) {
+
+			const axis1 = axes[ i ];
+			const axis2 = axes[ ( i + 1 ) % 3 ];
+			_vector.set( 0, 0, 0 );
+
+			for ( let a = 0; a < angleSteps; a ++ ) {
+
+				let angle;
+				angle = 2 * Math.PI * a / ( angleSteps - 1 );
+				_vector[ axis1 ] = Math.sin( angle );
+				_vector[ axis2 ] = Math.cos( angle );
+
+				positions.push( _vector.x, _vector.y, _vector.z );
+
+				angle = 2 * Math.PI * ( a + 1 ) / ( angleSteps - 1 );
+				_vector[ axis1 ] = Math.sin( angle );
+				_vector[ axis2 ] = Math.cos( angle );
+
+				positions.push( _vector.x, _vector.y, _vector.z );
+
+			}
+
+
+		}
+
+		geometry.setAttribute( 'position', new BufferAttribute( new Float32Array( positions ), 3 ) );
+		geometry.computeBoundingSphere();
+
+		super( geometry, new LineBasicMaterial( { color: color, toneMapped: false } ) );
+		this.sphere = sphere;
+		this.type = 'SphereHelper';
+
+	}
+
+	updateMatrixWorld( force ) {
+
+		// TODO: Why doesn't this radius have to be multiplied by 0.5?
+		const sphere = this.sphere;
+		this.position.copy( sphere.center );
+		this.scale.setScalar( sphere.radius );
+		super.updateMatrixWorld( force );
+
+	}
+
+}