Merge pull request #210 from Rennzie/custom-debug-color-modes

Add option to use a custom color mode in DebugTilesRenderer

README.md

@@ -532,7 +532,17 @@ RANDOM_COLOR
 
 // Render every individual mesh in the scene with a random color.
 RANDOM_NODE_COLOR
+
+// Sets a custom color using the customColorCallback call back. 
+CUSTOM_COLOR_MODE
 ```
+### .customColorCallback
+
+```js
+customColorCallback: (tile: Tile, child: Object3D) => void
+```
+
+The callback used if `debugColor` is set to `CUSTOM_COLOR_MODE`. Value defaults to `null` and must be set explicitly.
 
 ### .displayBoxBounds
 

example/index.js

@@ -9,6 +9,7 @@ import {
 	IS_LEAF,
 	RANDOM_COLOR,
 	RANDOM_NODE_COLOR,
+	CUSTOM_COLOR_MODE
 } from '../src/index.js';
 import {
 	Scene,
@@ -103,6 +104,17 @@ function reinstantiateTiles() {
 	tiles.manager.addHandler( /\.gltf$/, loader );
 	offsetParent.add( tiles.group );
 
+
+	// Used with CUSTOM_COLOR_MODE
+	tiles.customColorCallback = ( tile, child ) => {
+
+		const depthIsEven = tile.__depth % 2 === 0;
+		const color = depthIsEven ? [ 255, 0, 0 ] : [ 255, 255, 255 ];
+
+		child.material.color.setRGB( ...color );
+
+	};
+
 }
 
 function init() {
@@ -255,6 +267,7 @@ function init() {
 		IS_LEAF,
 		RANDOM_COLOR,
 		RANDOM_NODE_COLOR,
+		CUSTOM_COLOR_MODE
 
 	} );
 	debug.open();

src/index.js

@@ -8,6 +8,7 @@ import {
 	RELATIVE_DEPTH,
 	IS_LEAF,
 	RANDOM_COLOR,
+	CUSTOM_COLOR_MODE
 } from './three/DebugTilesRenderer.js';
 import { TilesRenderer } from './three/TilesRenderer.js';
 import { B3DMLoader } from './three/B3DMLoader.js';
@@ -49,4 +50,5 @@ export {
 	RELATIVE_DEPTH,
 	IS_LEAF,
 	RANDOM_COLOR,
+	CUSTOM_COLOR_MODE
 };

src/three/DebugTilesRenderer.js

@@ -17,6 +17,7 @@ export const RELATIVE_DEPTH = 5;
 export const IS_LEAF = 6;
 export const RANDOM_COLOR = 7;
 export const RANDOM_NODE_COLOR = 8;
+export const CUSTOM_COLOR_MODE = 9;
 
 export class DebugTilesRenderer extends TilesRenderer {
 
@@ -36,6 +37,7 @@ export class DebugTilesRenderer extends TilesRenderer {
 		this.displayBoxBounds = false;
 		this.displaySphereBounds = false;
 		this.colorMode = NONE;
+		this.customColorCallback = null;
 		this.boxGroup = boxGroup;
 		this.sphereGroup = sphereGroup;
 		this.maxDebugDepth = - 1;
@@ -258,7 +260,6 @@ export class DebugTilesRenderer extends TilesRenderer {
 						delete c.material[ HAS_RANDOM_COLOR ];
 
 					}
-
 					// Set the color on the basic material
 					switch ( colorMode ) {
 
@@ -344,6 +345,20 @@ export class DebugTilesRenderer extends TilesRenderer {
 							break;
 
 						}
+						case CUSTOM_COLOR_MODE: {
+
+							if ( this.customColorCallback ) {
+
+								this.customColorCallback( tile, c );
+
+							} else {
+
+								console.warn( 'DebugTilesRenderer: customColorCallback not defined' );
+
+							}
+							break;
+
+						}
 
 					}