Display as half opacity visible false objects and more robust material cloning.

devtools/bridge.js

@@ -276,21 +276,6 @@
 					observedRenderers.push( obj );
 					devTools.objects.set( obj.uuid, data );
 
-					// Intercept render method to track last camera
-					if ( ! obj.__devtools_render_wrapped ) {
-
-						const originalRender = obj.render;
-						obj.render = function ( scene, camera ) {
-
-							devTools.lastCamera = camera;
-							return originalRender.call( this, scene, camera );
-
-						};
-
-						obj.__devtools_render_wrapped = true;
-
-					}
-
 					dispatchEvent( EVENT_RENDERER, data );
 
 				}

devtools/highlight.js

@@ -10,11 +10,18 @@
 
 	function cloneMaterial( material ) {
 
+		// Skip MeshNormalMaterial
+		if ( material.isMeshNormalMaterial ) {
+
+			return material;
+
+		}
+
 		// Handle ShaderMaterial and RawShaderMaterial
 		if ( material.isShaderMaterial || material.isRawShaderMaterial ) {
 
-			// Clone the material to preserve uniforms and other properties
-			const cloned = material.clone();
+			// Create new material of the same type
+			const cloned = new material.constructor();
 
 			// Override shaders with simple yellow output
 			const vertexShader = `
@@ -49,8 +56,8 @@
 
 		}
 
-		// Clone the material
-		const cloned = material.clone();
+		// Create new material of the same type
+		const cloned = new material.constructor();
 
 		// Set yellow color
 		if ( cloned.color ) {
@@ -77,36 +84,6 @@
 
 		}
 
-		// Disable vertex colors
-		cloned.vertexColors = false;
-
-		// Set to front side only (0 = FrontSide) if material supports it
-		if ( 'side' in cloned ) {
-
-			cloned.side = 0;
-
-		}
-
-		// Clear all texture maps
-		if ( 'map' in cloned ) cloned.map = null;
-		if ( 'lightMap' in cloned ) cloned.lightMap = null;
-		if ( 'aoMap' in cloned ) cloned.aoMap = null;
-		if ( 'emissiveMap' in cloned ) cloned.emissiveMap = null;
-		if ( 'bumpMap' in cloned ) cloned.bumpMap = null;
-		if ( 'normalMap' in cloned ) cloned.normalMap = null;
-		if ( 'displacementMap' in cloned ) cloned.displacementMap = null;
-		if ( 'roughnessMap' in cloned ) cloned.roughnessMap = null;
-		if ( 'metalnessMap' in cloned ) cloned.metalnessMap = null;
-		if ( 'alphaMap' in cloned ) cloned.alphaMap = null;
-		if ( 'envMap' in cloned ) cloned.envMap = null;
-
-		// Disable clipping
-		if ( cloned.clippingPlanes ) {
-
-			cloned.clippingPlanes = [];
-
-		}
-
 		// Render on top, ignoring depth
 		cloned.depthTest = false;
 		cloned.depthWrite = false;

devtools/manifest.json

@@ -1,7 +1,7 @@
 {
 	"manifest_version": 3,
 	"name": "Three.js DevTools",
-	"version": "1.12",
+	"version": "1.13",
 	"description": "Developer tools extension for Three.js",
 	"icons": {
 		"128": "icons/128-light.png"

devtools/panel/panel.js

@@ -443,7 +443,7 @@ function renderRenderer( obj, container ) {
 }
 
 // Function to render an object and its children
-function renderObject( obj, container, level = 0 ) {
+function renderObject( obj, container, level = 0, parentInvisible = false ) {
 
 	const icon = getObjectIcon( obj );
 	let displayName = obj.name || obj.type;
@@ -454,6 +454,13 @@ function renderObject( obj, container, level = 0 ) {
 	elem.style.paddingLeft = `${level * 20}px`;
 	elem.setAttribute( 'data-uuid', obj.uuid );
 
+	// Apply opacity for invisible objects or if parent is invisible
+	if ( obj.visible === false || parentInvisible ) {
+
+		elem.style.opacity = '0.5';
+
+	}
+
 	let labelContent = `<span class="icon">${icon}</span>
 		<span class="label">${displayName}</span>
 		<span class="type">${obj.type}</span>`;
@@ -491,7 +498,12 @@ function renderObject( obj, container, level = 0 ) {
 	// Add mouseenter handler to request object details and highlight in 3D
 	elem.addEventListener( 'mouseenter', () => {
 		requestObjectDetails( obj.uuid );
-		requestObjectHighlight( obj.uuid );
+		// Only highlight if object and all parents are visible
+		if ( obj.visible !== false && ! parentInvisible ) {
+
+			requestObjectHighlight( obj.uuid );
+
+		}
 	} );
 
 	// Add mouseleave handler to remove 3D highlight
@@ -533,7 +545,7 @@ function renderObject( obj, container, level = 0 ) {
 		// Render each child
 		children.forEach( child => {
 
-			renderObject( child, childContainer, level + 1 );
+			renderObject( child, childContainer, level + 1, parentInvisible || obj.visible === false );
 
 		} );
 
@@ -636,7 +648,7 @@ function showFloatingDetails( objectData ) {
 	
 	// Clear previous content
 	panel.innerHTML = '';
-	
+
 	if ( objectData.position ) {
 
 		panel.appendChild( createVectorRow( 'Position', objectData.position ) );