feat: highlight material

playground/package.json

@@ -10,15 +10,16 @@
   },
   "dependencies": {
     "@tresjs/cientos": "3.6.0",
+    "@tresjs/core": "workspace:^",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@tresjs/leches": "0.15.0-next.3",
     "@tweakpane/plugin-essentials": "^0.2.0",
-    "vite-plugin-vue-devtools": "1.0.0-rc.6",
     "unplugin-auto-import": "^0.17.2",
     "vite-plugin-glsl": "^1.2.1",
     "vite-plugin-qrcode": "^0.2.3",
+    "vite-plugin-vue-devtools": "1.0.0-rc.6",
     "vue-tsc": "^1.8.25"
   }
 }

src/devtools/highlight.ts

@@ -0,0 +1,24 @@
+import * as THREE from 'three'
+
+export class HightlightMesh extends THREE.Mesh {
+  type = 'HightlightMesh'
+  createTime: number
+  constructor(...args: THREE.Mesh['args']) {
+    super(...args)
+    this.createTime = Date.now()
+  }
+
+  onBeforeRender() {
+    const currentTime = Date.now()
+    const time = (currentTime - this.createTime) / 1000
+    // Pulsing effect parameters
+    const scaleAmplitude = 0.07 // Amplitude of the scale pulsation
+    const pulseSpeed = 2.5 // Speed of the pulsation
+
+    // Calculate the scale factor with a sine function for pulsing effect
+    const scaleFactor = 1 + scaleAmplitude * Math.sin(pulseSpeed * time)
+
+    // Apply the scale factor
+    this.scale.set(scaleFactor, scaleFactor, scaleFactor)
+  }
+}

src/devtools/plugin.ts

@@ -92,6 +92,7 @@ const createNode = (object: TresObject): SceneGraphObject => {
 
 function buildGraph(object: TresObject, node: SceneGraphObject) {
   object.children.forEach((child: TresObject) => {
+    if(child.type === 'HightlightMesh') return
     const childNode = createNode(child)
     node.children.push(childNode)
     buildGraph(child, childNode)
@@ -182,17 +183,17 @@ export function registerTresDevtools(app: DevtoolsApp, tres: TresContext) {
           if (prevInstance && highlightMesh && highlightMesh.parent) {
             prevInstance.remove(highlightMesh)
           }
-          const newHighlightMesh = createHighlightMesh(instance)
-          instance.add(newHighlightMesh)
-
-          // Start the animation
-          const startTime = Date.now()
-          animateHighlight(newHighlightMesh, startTime)
-
-          highlightMesh = newHighlightMesh
-          prevInstance = instance
           
-          if (instance) {
+          if(instance.isMesh) {
+            const newHighlightMesh = createHighlightMesh(instance)
+            instance.add(newHighlightMesh)
+  
+            console.log('highlightMesh', instance)
+  
+            highlightMesh = newHighlightMesh
+            prevInstance = instance
+          }
+
             payload.state = {
               object: [
                 {
@@ -282,7 +283,7 @@ export function registerTresDevtools(app: DevtoolsApp, tres: TresContext) {
             }
           }
           
-        }
+  
       })
 
       api.on.editInspectorState((payload) => {

src/utils/index.ts

@@ -1,5 +1,6 @@
-import { type Scene, type Object3D, Mesh, MeshBasicMaterial, DoubleSide } from 'three'
-import THREE from 'three'
+import THREE, { MeshBasicMaterial, DoubleSide } from 'three'
+import type { Mesh, type Scene, type Object3D } from 'three'
+import { HightlightMesh } from '../devtools/highlight'
 
 export function toSetMethodName(key: string) {
   return `set${key[0].toUpperCase()}${key.slice(1)}`
@@ -213,14 +214,16 @@ export function stopHighlightAnimation(): void {
 }
 
 export function createHighlightMesh(object: Object3D): Mesh {
-  const highlightMaterial = createHighlightMaterial()
-
+  const highlightMaterial = new MeshBasicMaterial({
+    color: 0xa7e6d7, // Highlight color, e.g., yellow
+    transparent: true,
+    opacity: 0.2,
+    depthTest: false, // So the highlight is always visible
+    side: DoubleSide, // To e
+  })
   // Clone the geometry of the object. You might need a more complex approach 
   // if the object's geometry is not straightforward.
-  const highlightMesh = new Mesh(object.geometry.clone(), highlightMaterial)
-
-  // Scale the highlight mesh slightly larger than the original object
-  highlightMesh.scale.multiplyScalar(1.05)
+  const highlightMesh = new HightlightMesh(object.geometry.clone(), highlightMaterial)
 
   return highlightMesh
 }