DebugTilesPlugin: Add mesh boundary to "box helpers"

Author: gkjohnson

src/three/plugins/DebugTilesPlugin.js

@@ -1,4 +1,4 @@
-import { Box3Helper, Group, MeshStandardMaterial, PointsMaterial, Sphere, Color, MeshBasicMaterial } from 'three';
+import { Box3Helper, Group, MeshStandardMaterial, PointsMaterial, Sphere, Color, MeshBasicMaterial, Mesh, BoxGeometry, DoubleSide } from 'three';
 import { SphereHelper } from './objects/SphereHelper.js';
 import { EllipsoidRegionLineHelper } from './objects/EllipsoidRegionHelper.js';
 import { TraversalUtils } from '3d-tiles-renderer/core';
@@ -658,12 +658,23 @@ export class DebugTilesPlugin {
 			boxHelperGroup.name = 'DebugTilesRenderer.boxHelperGroup';
 			boxHelperGroup.matrix.copy( obb.transform );
 			boxHelperGroup.matrixAutoUpdate = false;
+			engineData.boxHelperGroup = boxHelperGroup;
 
 			const boxHelper = new Box3Helper( obb.box, getIndexedRandomColor( tile.internal.depth ) );
 			boxHelper.raycast = emptyRaycast;
 			boxHelperGroup.add( boxHelper );
 
-			engineData.boxHelperGroup = boxHelperGroup;
+			const mesh = new Mesh( new BoxGeometry(), new MeshBasicMaterial( {
+				color: getIndexedRandomColor( tile.internal.depth ),
+				transparent: true,
+				depthWrite: false,
+				opacity: 0.05,
+				side: DoubleSide,
+			} ) );
+			obb.box.getSize( mesh.scale );
+			mesh.raycast = emptyRaycast;
+			boxHelperGroup.add( mesh );
+
 
 			if ( tiles.visibleTiles.has( tile ) && this.displayBoxBounds ) {
 
@@ -717,25 +728,36 @@ export class DebugTilesPlugin {
 
 	}
 
-	_updateHelperMaterial( tile, material ) {
+	_updateHelperMaterials( tile, group ) {
 
-		if ( tile.traversal.visible || ! this.displayParentBounds ) {
+		group.traverse( c => {
 
-			material.opacity = 1;
+			const { material } = c;
+			if ( ! material ) {
 
-		} else {
+				return;
 
-			material.opacity = 0.2;
+			}
 
-		}
+			if ( tile.traversal.visible || ! this.displayParentBounds ) {
 
-		const transparent = material.transparent;
-		material.transparent = material.opacity < 1;
-		if ( material.transparent !== transparent ) {
+				material.opacity = c.isMesh ? 0.05 : 1;
 
-			material.needsUpdate = true;
+			} else {
 
-		}
+				material.opacity = c.isMesh ? 0.01 : 0.2;
+
+			}
+
+			const transparent = material.transparent;
+			material.transparent = material.opacity < 1;
+			if ( material.transparent !== transparent ) {
+
+				material.needsUpdate = true;
+
+			}
+
+		} );
 
 	}
 
@@ -791,7 +813,7 @@ export class DebugTilesPlugin {
 				boxGroup.add( boxHelperGroup );
 				boxHelperGroup.updateMatrixWorld( true );
 
-				this._updateHelperMaterial( tile, boxHelperGroup.children[ 0 ].material );
+				this._updateHelperMaterials( tile, boxHelperGroup );
 
 			}
 
@@ -800,7 +822,7 @@ export class DebugTilesPlugin {
 				sphereGroup.add( sphereHelper );
 				sphereHelper.updateMatrixWorld( true );
 
-				this._updateHelperMaterial( tile, sphereHelper.material );
+				this._updateHelperMaterials( tile, sphereHelper );
 
 			}
 
@@ -809,7 +831,7 @@ export class DebugTilesPlugin {
 				regionGroup.add( regionHelper );
 				regionHelper.updateMatrixWorld( true );
 
-				this._updateHelperMaterial( tile, regionHelper.material );
+				this._updateHelperMaterials( tile, regionHelper );
 
 			}