fix: 792 directionallighthelpers breaks devtools (#793)

* fix: better handling of color types for lights on devtools

* fix: highlighted mesh counts on devtools stats #533

Author: alvarosabu

src/devtools/plugin.ts

@@ -5,8 +5,9 @@ import {
   setupDevtoolsPlugin,
 } from '@vue/devtools-api'
 import { reactive } from 'vue'
-import type { Mesh } from 'three'
+import { Color, type Mesh } from 'three'
 import { createHighlightMesh, editSceneObject } from '../utils'
+import * as is from '../utils/is'
 import { bytesToKB, calculateMemoryUsage } from '../utils/perf'
 import type { TresContext } from '../composables'
 import type { TresObject } from './../types'
@@ -51,14 +52,16 @@ const createNode = (object: TresObject): SceneGraphObject => {
   }
 
   if (object.type.includes('Light')) {
+    if (is.light(object)) {
+      node.tags.push({
+        label: `${object.intensity}`,
+        textColor: 0x9499A6,
+        backgroundColor: 0xF8F9FA,
+        tooltip: 'Intensity',
+      })
+    }
     node.tags.push({
-      label: `${object.intensity}`,
-      textColor: 0x9499A6,
-      backgroundColor: 0xF8F9FA,
-      tooltip: 'Intensity',
-    })
-    node.tags.push({
-      label: `#${object.color.getHexString()}`,
+      label: `#${new Color(object.color).getHexString()}`,
       textColor: 0x9499A6,
       backgroundColor: 0xF8F9FA,
       tooltip: 'Color',
@@ -173,6 +176,9 @@ export function registerTresDevtools(app: DevtoolsApp, tres: TresContext) {
           payload.state = {
             object: Object.entries(instance)
               .map(([key, value]) => {
+                if (key === 'children') {
+                  return { key, value: value.filter(child => child.type !== 'HightlightMesh') }
+                }
                 return { key, value, editable: true }
               })
               .filter(({ key }) => {

src/utils/is.ts

@@ -1,5 +1,5 @@
 import type { TresObject, TresPrimitive } from 'src/types'
-import type { BufferGeometry, Camera, Fog, Material, Object3D, Scene } from 'three'
+import type { BufferGeometry, Camera, Fog, Light, Material, Object3D, Scene } from 'three'
 
 export function und(u: unknown) {
   return typeof u === 'undefined'
@@ -45,6 +45,10 @@ export function material(u: unknown): u is Material {
   return obj(u) && 'isMaterial' in u && !!(u.isMaterial)
 }
 
+export function light(u: unknown): u is Light {
+  return obj(u) && 'isLight' in u && !!(u.isLight)
+}
+
 export function fog(u: unknown): u is Fog {
   return obj(u) && 'isFog' in u && !!(u.isFog)
 }

src/utils/perf.ts

@@ -5,7 +5,7 @@ export function calculateMemoryUsage(object: TresObject | Scene) {
   let totalMemory = 0
 
   object.traverse((node: TresObject) => {
-    if (node.isMesh && node.geometry) {
+    if (node.isMesh && node.geometry && node.type !== 'HightlightMesh') {
       const geometry = node.geometry
       const verticesMemory = geometry.attributes.position.count * 3 * Float32Array.BYTES_PER_ELEMENT
       const facesMemory = geometry.index ? geometry.index.count * Uint32Array.BYTES_PER_ELEMENT : 0