优化 发电机 效果

src/plugins/digitalCity/common/utils.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-11-09 09:33:51
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-29 10:47:53
+ * @LastEditTime: 2024-05-29 10:51:49
  */
 import {
     BufferAttribute,
@@ -121,6 +121,7 @@ export const objectToSceneCenter = (mesh) => {
     mesh.position.copy(position)
 }
 
+//自适应 几何中心 外面要再包一层
 export const adjustGroupCenter = (group) => {
     const box = new THREE.Box3().setFromObject(group)
     // 计算 Group 的几何中心

src/plugins/industry4/components/alternator/childComponent/firstLevel-da662feb67b1.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-28 15:17:41
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-29 09:20:36
+ * @LastEditTime: 2024-05-29 18:59:26
 -->
 <template>
     <!-- name:103 uuid:f3ddf9ae-40de-4416-aa55-de0df5267f60 type:Mesh -->
@@ -80,20 +80,51 @@ const props = withDefaults(
 )
 
 import { useRenderLoop } from '@tresjs/core'
+import * as THREE from 'three'
+import { Reflector, ReflectorMaterial } from 'PLS/floor/lib/alienJS/all.three.js'
 
-props.object[25]
 props.object[25].material.color.setHex(0x009194)
 props.object[25].material.emissive.setHex(0x000000)
-
 props.object[13].children[3].material.color.setHex(0x0053fa)
-
 props.object[11].children[1].material.color.setHex(0x004d47)
-debugger
+
+const ob = props.object[26].children[1]
+const reflector = new Reflector({
+    width: 1024,
+    height: 1024,
+})
+
+const material = new ReflectorMaterial({
+    reflectivity: 0.6, //反射率
+    mirror: 10.88,
+    mixStrength: 6,
+    color: new THREE.Color('#666'),
+    normalMap: ob.material.normalMap.clone(),
+    normalScale: new THREE.Vector2(0.3, -0.3),
+    dithering: true,
+})
+material.uniforms.tReflect = reflector.renderTargetUniform
+// material.uniforms.tReflect = { value: reflector.renderTarget.texture }
+// material.uniforms.tReflectBlur = reflector.renderTargetUniform
+
+material.uniforms.uMatrix = reflector.textureMatrixUniform
+
+const geometry = ob.geometry.clone()
+geometry.rotateX(Math.PI / 2)
+const meshOB = new THREE.Mesh(geometry, material)
+
+// meshOB.rotateX(-Math.PI / 2)
+meshOB.rotateX(Math.PI / 2)
+
+meshOB.add(reflector)
+meshOB.onBeforeRender = (rendererSelf, sceneSelf, cameraSelf) => {
+    meshOB.visible = false
+    reflector.update(rendererSelf, sceneSelf, cameraSelf)
+    meshOB.visible = true
+}
+props.object[26].remove(ob)
+props.object[26].add(meshOB)
 
 const { onLoop } = useRenderLoop()
-onLoop(({ delta, elapsed }) => {
-    // if (props.object[9]) {
-    //     props.object[9].rotation.x += 1 * delta
-    // }
-})
+onLoop(({ delta, elapsed }) => {})
 </script>

src/plugins/industry4/components/alternator/effect.vue

@@ -0,0 +1,51 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-09 15:38:12
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-05-29 17:44:40
+-->
+<template></template>
+
+<script setup lang="ts">
+import { watchEffect } from 'vue'
+import * as THREE from 'three'
+import { useTresContext, useRenderLoop } from '@tresjs/core'
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
+import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js'
+import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass'
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
+
+const { camera, renderer, scene, sizes } = useTresContext()
+const params = {
+    threshold: 0.666,
+    strength: 0, // 强度
+    radius: 0.33, // 半径
+}
+let effectComposer = null as any
+let bloomPass = null as any
+const Effect = (scene: THREE.Scene, camera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer, width: number, height: number) => {
+    const renderScene = new RenderPass(scene, camera)
+    bloomPass = new UnrealBloomPass(new THREE.Vector2(width, height), params.strength, params.radius, params.threshold)
+    effectComposer = new EffectComposer(renderer)
+    // 将渲染器和场景结合到合成器中
+    effectComposer.addPass(renderScene)
+    effectComposer.addPass(bloomPass)
+    effectComposer.addPass(new OutputPass())
+}
+
+watchEffect(() => {
+    if (sizes.width.value) {
+        Effect(scene.value, camera.value as any, renderer.value, sizes.width.value, sizes.height.value)
+    }
+})
+
+const { onLoop } = useRenderLoop()
+onLoop(({ elapsed }) => {
+    if (effectComposer) {
+        bloomPass.strength = 0.2 * Math.sin(elapsed * 3) + 0.2
+        effectComposer.render()
+    }
+})
+</script>

src/plugins/industry4/components/alternator/scene.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-28 09:23:39
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-29 10:46:11
+ * @LastEditTime: 2024-05-29 18:53:13
 -->
 <template>
     <!-- name:AmbientLight uuid:4a88f8db-06d0-47b4-ad5f-aad9885c3b29 type:AmbientLight -->
@@ -24,7 +24,7 @@
 </template>
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import { useAnimations } from '@tresjs/cientos'
+// import { useAnimations } from '@tresjs/cientos'
 import * as THREE from 'three'
 import { loadJsonFile, loadRemoteZip } from 'PLS/tresEditor'
 import { useTresContext, useRenderLoop } from '@tresjs/core'
@@ -73,11 +73,9 @@ adjustGroupCenter(sceneObject.children[2])
 
 sceneObject.children[2].rotation.x = Math.PI
 
-// objectToSceneCenter(sceneObject.children[2])
-// objectToSceneCenter(sceneObject.children[1])
 // const animations = loader.parseAnimations(scene.animations)
 // const { actions } = useAnimations([animations['500410ba-1a32-40b9-a8db-5db7c9d0be6b'], animations['ee5fa32b-1e08-414f-bbfb-c3fa6d1e6883']], sceneObject)
-// const currentAction = actions.fangai //fangai chaifen
+// const currentAction = actions.chaifen //fangai chaifen
 // currentAction.loop = THREE.LoopOnce
 // currentAction.clampWhenFinished = true
 // currentAction.play()

src/plugins/industry4/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-11-10 16:11:27
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-28 15:07:25
+ * @LastEditTime: 2024-05-29 18:53:36
  */
 
 export default {
@@ -62,8 +62,8 @@ export default {
             type: 'img',
             name: 'alternator',
             title: '发电机展示',
-            disableFPSGraph: true,
-            disableSrcBtn: true,
+            // disableFPSGraph: true,
+            // disableSrcBtn: true,
         },
         // { "src": "plugins/industry4/preview/deviceLight.png", "type": "img", "name": "deviceLightByComposerTres", "title": "发光后期useTres" },
     ],

src/plugins/industry4/pages/alternator.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-05-28 09:22:40
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-05-28 18:41:33
+ * @LastEditTime: 2024-05-29 18:47:54
 -->
 
 <template>
@@ -15,6 +15,8 @@
         <Suspense>
             <sceneCom />
         </Suspense>
+
+        <leffect />
     </TresCanvas>
     <!-- <viewChart :dataJson="dataJson"/> -->
 </template>
@@ -25,6 +27,7 @@ import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import sceneCom from '../components/alternator/scene.vue'
 import { loading2 as loading } from 'PLS/UIdemo'
+import leffect from '../components/alternator/effect.vue'
 // import viewChart from 'PLS/goView/components/viewChart.vue'
 // import dataJson from '../components/alternator/1716877101106.json'
 
@@ -36,6 +39,7 @@ const state = reactive({
     shadowMapType: 1,
     toneMapping: 4,
     toneMappingExposure: 1,
+    disableRender: true,
 })
 
 const cameraConfig = {