feat: addHexEffect

Author: fengtianxi001

.stylelintcache

@@ -1 +1 @@
-[{"/Users/fengtianxi001/codes/可视化大屏/MF-StationMonitor/src/App.vue":"1","/Users/fengtianxi001/codes/可视化大屏/MF-StationMonitor/src/components/WidgetLabel.vue":"2","/Users/fengtianxi001/codes/可视化大屏/MF-StationMonitor/src/components/LayoutHeader.vue":"3","/Users/fengtianxi001/codes/可视化大屏/MF-StationMonitor/src/components/WidgetPanel06.vue":"4","/Users/fengtianxi001/codes/可视化大屏/MF-StationMonitor/src/components/LayoutPanel.vue":"5","/Users/fengtianxi001/codes/可视化大屏/MF-StationMonitor/src/components/WidgetPanel05.vue":"6","/Users/fengtianxi001/codes/可视化大屏/MF-StationMonitor/src/components/WidgetPanel04.vue":"7","/Users/fengtianxi001/codes/可视化大屏/MF-StationMonitor/src/components/WidgetPanel02.vue":"8","/Users/fengtianxi001/codes/可视化大屏/MF-StationMonitor/src/components/WidgetPanel03.vue":"9","/Users/fengtianxi001/codes/可视化大屏/MF-StationMonitor/src/components/WidgetPanel01.vue":"10","/Users/fengtianxi001/codes/可视化大屏/MF-StationMonitor/src/components/LayoutFooter.vue":"11","/Users/fengtianxi001/codes/可视化大屏/MF-StationMonitor/src/components/WidgetPanel07.vue":"12","/Users/fengtianxi001/codes/可视化大屏/MF-StationMonitor/src/components/LayoutLoading.vue":"13","/Users/fengtianxi001/codes/可视化大屏/MF-TurbineMonitor/src/App.vue":"14","/Users/fengtianxi001/codes/可视化大屏/MF-TurbineMonitor/src/components/WidgetLabel.vue":"15"},{"size":3071,"mtime":1735743524635,"hashOfConfig":"16"},{"size":680,"mtime":1735734674844,"hashOfConfig":"16"},{"size":3750,"mtime":1735729897407,"hashOfConfig":"16"},{"size":2401,"mtime":1735731205820,"hashOfConfig":"16"},{"size":1092,"mtime":1735730754036,"hashOfConfig":"16"},{"size":2560,"mtime":1735730128887,"hashOfConfig":"16"},{"size":3610,"mtime":1735729998372,"hashOfConfig":"16"},{"size":2955,"mtime":1735733027480,"hashOfConfig":"16"},{"size":1693,"mtime":1735546823347,"hashOfConfig":"16"},{"size":2269,"mtime":1735546828184,"hashOfConfig":"16"},{"size":2514,"mtime":1735735322942,"hashOfConfig":"16"},{"size":10288,"mtime":1735734611427,"hashOfConfig":"16"},{"size":1055,"mtime":1735743601821,"hashOfConfig":"16"},{"size":3071,"mtime":1735744747227,"hashOfConfig":"17"},{"size":680,"mtime":1735744747259,"hashOfConfig":"17"},"11i7hqk","pjw8ln"]
+[{"/Users/fengtianxi001/Desktop/代码仓库/可视化大屏/MF-TurbineMonitor/src/components/WidgetLabel.vue":"1"},{"size":680,"mtime":1736220176227,"hashOfConfig":"2"},"u1u13e"]

src/hooks/useThree.ts

@@ -1,5 +1,4 @@
 import {
-  onMounted,
   ref,
   shallowRef,
   nextTick,
@@ -8,7 +7,6 @@ import {
   createVNode,
   render,
   h,
-  type DefineComponent,
 } from 'vue'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js'
@@ -21,10 +19,8 @@ import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
 import { isFunction } from 'lodash'
 import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'
 import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'
-import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'
 import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js'
 import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'
-import { FXAAShader } from 'three/addons/shaders/FXAAShader.js'
 // import TWEEN from '@tweenjs/tween.js'
 import TWEEN from 'three/examples/jsm/libs/tween.module.js'
 import * as THREE from 'three'
@@ -45,6 +41,7 @@ export function useThree() {
   const ocontrol = shallowRef<OrbitControls>() //轨道控制器
   const tcontrol = shallowRef<TransformControls>() //变换控制器
   const outlinePass = shallowRef<OutlinePass>() //outlinePass
+  const hexPass = shallowRef()
   const composers = new Map() //后期处理
   const mixers: any = [] //动画混合器
   const clock = new THREE.Clock() //时钟
@@ -61,6 +58,8 @@ export function useThree() {
     boostrapLights()
     onAnimate()
     onWindowResize()
+    addOutlineEffect()
+    addHexEffect()
   }
   //Scene
   const boostrapScene = () => {
@@ -202,7 +201,7 @@ export function useThree() {
       render(instance, document.createElement('div'))
       return instance.el
     }
-    const element = crender(component, props)
+    const element = crender(component, props) as HTMLElement
     const css2dObject = new CSS2DObject(element)
     return css2dObject
   }
@@ -268,7 +267,15 @@ export function useThree() {
     })
   }
   //添加outline效果
-  const addOutlineEffect = () => {
+  const addOutlineEffect = (config?: {
+    edgeStrength?: number
+    edgeGlow?: number
+    edgeThickness?: number
+    pulsePeriod?: number
+    usePatternTexture?: boolean
+    visibleEdgeColor?: string | number
+    hiddenEdgeColor?: string | number
+  }) => {
     const composer = new EffectComposer(renderer.value!)
     const renderPass = new RenderPass(scene.value!, camera.value!)
     composer.addPass(renderPass)
@@ -277,17 +284,49 @@ export function useThree() {
       scene.value!,
       camera.value!
     )
-    outlinePass.value.edgeStrength = 3
-    outlinePass.value.edgeGlow = 1
-    outlinePass.value.edgeThickness = 4
-    outlinePass.value.visibleEdgeColor.set('#0efaa6')
-    outlinePass.value.hiddenEdgeColor.set('#0efaa6')
+    const deafultConfig = {
+      edgeStrength: 3,
+      edgeGlow: 0,
+      edgeThickness: 1,
+      pulsePeriod: 0,
+      usePatternTexture: false,
+      visibleEdgeColor: '#fff',
+      hiddenEdgeColor: '#fff',
+    }
+    const op = Object.assign({}, deafultConfig, config)
+
+    outlinePass.value.edgeStrength = op.edgeStrength
+    outlinePass.value.edgeGlow = op.edgeGlow
+    outlinePass.value.edgeThickness = op.edgeThickness
+    outlinePass.value.visibleEdgeColor.set(op.visibleEdgeColor)
+    outlinePass.value.hiddenEdgeColor.set(op.hiddenEdgeColor)
     outlinePass.value.selectedObjects = []
     composer.addPass(outlinePass.value)
     const outputPass = new OutputPass()
     composer.addPass(outputPass)
     composers.set('outline', composer)
   }
+  //添加outline效果
+  const addHexEffect = (color?: number | string) => {
+    let selected: any[] = []
+    hexPass.value = {
+      get selectedObjects() {
+        return selected
+      },
+      set selectedObjects(val) {
+        //先清空之前的
+        selected.forEach((mesh) => {
+          if (mesh.material) mesh.material.emissive.setHex(mesh.hex)
+        })
+        val.forEach((mesh) => {
+          mesh.material = mesh.material.clone()
+          mesh.hex = mesh.material.emissive.getHex()
+          mesh.material.emissive.setHex(color ?? 0x888888)
+        })
+        selected = [...val]
+      },
+    }
+  }
 
   // 模型拾取
   const addModelPick = (
@@ -315,6 +354,32 @@ export function useThree() {
     onUnmounted(() => document.removeEventListener('click', handler))
   }
 
+  // 模型悬浮拾取
+  const addModelHoverPick = (
+    object: THREE.Object3D,
+    callback: (
+      intersects:
+        | THREE.Intersection<THREE.Object3D<THREE.Object3DEventMap>>[]
+        | []
+    ) => void
+  ) => {
+    const handler = (event: MouseEvent) => {
+      const el = container.value as HTMLElement
+      const rect = el.getBoundingClientRect()
+      const mouse = new THREE.Vector2(
+        ((event.clientX - rect.left) / rect.width) * 2 - 1,
+        -((event.clientY - rect.top) / rect.height) * 2 + 1
+      )
+      const raycaster = new THREE.Raycaster()
+      raycaster.setFromCamera(mouse, camera.value!)
+      const intersects = raycaster.intersectObject(object, true)
+      isFunction(callback) && callback(intersects)
+      // if (intersects.length <= 0) return void 0
+    }
+    document.addEventListener('mousemove', handler)
+    onUnmounted(() => document.removeEventListener('mousemove', handler))
+  }
+
   nextTick(() => {
     boostrap()
   })
@@ -331,6 +396,7 @@ export function useThree() {
     renderMixins,
     composers,
     outlinePass,
+    hexPass,
     loadGltf,
     loadAnimationMixer,
     loadAxesHelper,
@@ -339,7 +405,9 @@ export function useThree() {
     transitionAnimation,
     planeClippingAnimation,
     addModelPick,
+    addModelHoverPick,
     addOutlineEffect,
+    addHexEffect,
   }
 }
 

src/hooks/useTurbine.ts

@@ -68,10 +68,12 @@ export function useTurbine() {
     camera,
     ocontrol,
     outlinePass,
+    hexPass,
     loadGltf,
     loadAnimationMixer,
     loadCSS2DByVue,
     addModelPick,
+    addModelHoverPick,
     addOutlineEffect,
     transitionAnimation,
     planeClippingAnimation,
@@ -104,7 +106,7 @@ export function useTurbine() {
     await loadModels() // 加载风机模型
     loadLights() // 加载灯光
     await openingAnimation() // 开场动画
-    addOutlineEffect()
+
     addModelPick(models.equipment, (intersects) => {
       if (intersects.length > 0) {
         const obj = intersects[0]['object']
@@ -115,6 +117,14 @@ export function useTurbine() {
         outlinePass.value!.selectedObjects = []
       }
     })
+    addModelHoverPick(models.equipment, (intersects) => {
+      if (intersects.length > 0) {
+        const obj = intersects[0]['object']
+        hexPass.value!.selectedObjects = [obj]
+      } else {
+        hexPass.value!.selectedObjects = []
+      }
+    })
   }
   //加载机架和设备模型
   const loadModels = async () => {