feat: allow some customization of highligter component (#68)

Author: kjerandp

src/components/Handlers/Highlighter/Highlighter.tsx

@@ -1,19 +1,14 @@
 import { useMemo } from 'react'
+import { AdditiveBlending, Blending, Color, DoubleSide, InstancedMesh, Line, Matrix4, Mesh, MeshBasicMaterial } from 'three'
 import { useHighlightState } from './highlight-state'
-import { AdditiveBlending, DoubleSide, InstancedMesh, Line, Matrix4, Mesh, MeshBasicMaterial } from 'three'
-
-const mat = new MeshBasicMaterial({
-  color: 0x404040,
-  depthTest: true,
-  depthWrite: false,
-  transparent: true,
-  opacity: 1, 
-  blending: AdditiveBlending,
-  side: DoubleSide,
-})
 
 const instanceMatrix = new Matrix4()
 
+export type HighlighterProps = {
+  color?: string | number | Color,
+  blending?: Blending,
+}
+
 /**
  * Adds highlighting to rendered objects by rendering a "ghost" object on top it.
  *
@@ -30,9 +25,24 @@ const instanceMatrix = new Matrix4()
  * 
  * @group Components
  */
-export const Highlighter = () => {
+export const Highlighter = ({
+  color,
+  blending,
+}: HighlighterProps) => {
   const { highlighted } = useHighlightState()
 
+  const material = useMemo(() => {
+    return new MeshBasicMaterial({
+      color: color || 0x404040,
+      depthTest: true,
+      depthWrite: false,
+      transparent: true,
+      opacity: 1,
+      blending: blending || AdditiveBlending,
+      side: DoubleSide,
+    })
+  }, [color, blending])
+
   const highlightObjects = useMemo(() => {
     return highlighted.map(item => {
       let primitiveObject: Mesh | Line | InstancedMesh
@@ -41,31 +51,30 @@ export const Highlighter = () => {
       if (item.object instanceof InstancedMesh) {
         const instanced = item.object as InstancedMesh
         if (item.instanceIndex) {
-          primitiveObject = new Mesh(geometry, mat)
+          primitiveObject = new Mesh(geometry, material)
           item.object.getWorldPosition(primitiveObject.position)
           instanced.getMatrixAt(item.instanceIndex, instanceMatrix)
           primitiveObject.applyMatrix4(instanceMatrix)
         } else {
-          const imesh = new InstancedMesh(geometry, mat, instanced.count)
+          const imesh = new InstancedMesh(geometry, material, instanced.count)
           item.object.getWorldPosition(imesh.position)
           imesh.instanceMatrix = instanced.instanceMatrix
           primitiveObject = imesh
         }
-      } 
+      }
       else if (item.object instanceof Mesh) {
-        primitiveObject = new Mesh(geometry, mat)
+        primitiveObject = new Mesh(geometry, material)
         item.object.getWorldPosition(primitiveObject.position)
       } else {
-        primitiveObject = new Line(geometry, mat)
+        primitiveObject = new Line(geometry, material)
         item.object.getWorldPosition(primitiveObject.position)
       }
       primitiveObject.visible = item.object.visible
-      
 
-      
       return primitiveObject
     })
-  }, [highlighted])
+  }, [highlighted, material])
+
 
   return <group renderOrder={999}>
     {highlightObjects.map(po => (