整理了 tresProcessing库 实例

src/plugins/basic/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-11-03 15:07:09
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-12-26 09:32:36
+ * @LastEditTime: 2025-03-02 09:49:07
  */
 export default {
     name: 'basic',
@@ -110,13 +110,6 @@ export default {
                     referenceSource: { title: 'FakeGlow', url: 'https://r3f-fake-glow-material.vercel.app/' },
                 },
                 { src: 'plugins/basic/shine/preview/bloomPass.png', type: 'img', name: 'bloomPass', title: '后期处理-效果叠加' },
-                {
-                    src: 'plugins/basic/shine/preview/tresProcessing.png',
-                    type: 'img',
-                    name: 'tresProcessing',
-                    title: 'Tres的后期处理',
-                    referenceSource: { title: 'post-processing.tresjs', url: 'https://post-processing.tresjs.org/guide/' },
-                },
                 { src: 'plugins/basic/shine/preview/MaskPass.png', type: 'img', name: 'MaskPass', title: '后期处理-掩膜通道' },
                 { src: 'plugins/basic/shine/preview/effectComposerLayers.png', type: 'img', name: 'effectComposerLayers', title: '后期处理-图层叠加' },
                 {
@@ -129,5 +122,27 @@ export default {
                 { src: 'plugins/basic/shine/preview/effectComposerMultiple.png', type: 'img', name: 'effectComposerMultiple', title: '后期处理-多个叠加' },
             ],
         },
+        {
+            name: 'tresProcessing',
+            title: 'tresProcessing库',
+            intro: '直接使用tres的后期处理库实例',
+            pNode: 'basic',
+            preview: [
+                {
+                    src: 'plugins/basic/tresProcessing/preview/fusion.png',
+                    type: 'img',
+                    name: 'fusion',
+                    title: '融合多个后期效果',
+                    referenceSource: { title: 'post-processing.tresjs', url: 'https://post-processing.tresjs.org/guide/' },
+                },
+                {
+                    src: 'plugins/basic/tresProcessing/preview/outlinePass.png',
+                    type: 'img',
+                    name: 'outlinePass',
+                    title: '外边框处理',
+                    referenceSource: { title: 'post-processing.tresjs', url: 'https://post-processing.tresjs.org/guide/' },
+                },
+            ]
+        }
     ],
 }

src/plugins/basic/pages/shine/tresProcessing.vue

@@ -1,33 +0,0 @@
-<!--
- * @Description: 
- * @Version: 1.668
- * @Autor: 地虎降天龙
- * @Date: 2024-12-12 17:54:36
- * @LastEditors: 地虎降天龙
- * @LastEditTime: 2025-02-05 11:38:30
--->
-<template>
-    <TresCanvas window-size clearColor="#000000">
-        <TresPerspectiveCamera :position="[10, 10, 10]" />
-        <TresAmbientLight :intensity="1" />
-        <OrbitControls />
-        <Box :args="[1, 1, 1]" color="orange" :position="[3, 2, 1]" />
-        <TresMesh :position="[0, 2, -4]">
-            <TresBoxGeometry :args="[1, 1, 1]" />
-            <TresMeshNormalMaterial />
-        </TresMesh>
-        <TresGridHelper :args="[10, 10]" />
-
-        <EffectComposer>
-            <UnrealBloom :radius="0.8" :strength="2.5" :threshold="0.8" />
-            <Glitch />
-            <SMAA :width="1920" :height="1080" />
-            <Output />
-        </EffectComposer>
-    </TresCanvas>
-</template>
-
-<script setup lang="ts">
-import { OrbitControls, Box } from '@tresjs/cientos'
-import { EffectComposer, UnrealBloom, Glitch, Output, SMAA } from '@tresjs/post-processing'
-</script>

src/plugins/basic/pages/tresProcessing/fusion.vue

@@ -0,0 +1,33 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-12-12 17:54:36
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-03-02 09:42:10
+-->
+<template>
+	<TresCanvas window-size clearColor="#000000">
+			<TresPerspectiveCamera :position="[10, 10, 10]" />
+			<TresAmbientLight :intensity="1" />
+			<OrbitControls />
+			<Box :args="[1, 1, 1]" color="orange" :position="[3, 2, 1]" />
+			<TresMesh :position="[0, 2, -4]">
+					<TresBoxGeometry :args="[1, 1, 1]" />
+					<TresMeshNormalMaterial />
+			</TresMesh>
+			<TresGridHelper :args="[10, 10]" />
+
+			<EffectComposer>
+					<UnrealBloom :radius="0.8" :strength="2.5" :threshold="0.8" />
+					<Glitch />
+					<SMAA :width="1920" :height="1080" />
+					<Output />
+			</EffectComposer>
+	</TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { OrbitControls, Box } from '@tresjs/cientos'
+import { EffectComposer, UnrealBloom, Glitch, Output, SMAA } from '@tresjs/post-processing'
+</script>

src/plugins/basic/pages/tresProcessing/outlinePass.vue

@@ -0,0 +1,73 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2025-03-02 09:49:31
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-03-02 10:36:33
+-->
+<script setup lang="ts">
+import { BasicShadowMap, NoToneMapping } from 'three'
+import { reactive, ref } from 'vue'
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { EffectComposerPmndrs, OutlinePmndrs } from '@tresjs/post-processing'
+import * as THREE from 'three'
+
+const outlinedObjects = ref<THREE.Object3D[]>([])
+
+const gl = {
+    clearColor: '#121212',
+}
+
+function onClick(ev) {
+    if (ev) {
+        let hasIndex = -1
+        const outlinedObjectsArr = [...outlinedObjects.value]
+        outlinedObjectsArr.forEach((obj, index) => {
+            if (obj.uuid === ev.object.uuid) {
+                hasIndex = index
+            }
+        })
+        if (hasIndex !== -1) {
+            outlinedObjectsArr.splice(hasIndex, 1)
+        } else {
+            outlinedObjectsArr.push(ev.object)
+        }
+        outlinedObjects.value = outlinedObjectsArr
+        console.log('outlinedObjects', outlinedObjects.value)
+    }
+}
+</script>
+
+<template>
+    <TresCanvas window-size v-bind="gl">
+        <TresPerspectiveCamera :position="[10, 10, 10]" />
+        <TresAmbientLight :intensity="1" />
+        <OrbitControls />
+        <TresMesh :position="[-5, 0, 0]" @click="onClick" :scale="2">
+            <TresBoxGeometry :args="[1, 1, 1]" />
+            <TresMeshNormalMaterial />
+        </TresMesh>
+
+        <TresMesh :position="[1, 0.5, 1]" @click="onClick">
+            <TresBoxGeometry />
+            <TresMeshStandardMaterial color="hotpink" />
+        </TresMesh>
+
+        <TresGroup @click="onClick">
+            <TresMesh :position="[2.5, 1.75, 2]">
+                <TresConeGeometry :args="[1, 1.5, 4, 1, false, Math.PI * 0.25]" />
+                <TresMeshStandardMaterial color="green" />
+            </TresMesh>
+            <TresMesh :position="[-1.5, 0.75, 0]">
+                <TresConeGeometry :args="[1, 1.5, 4, 1, false, Math.PI * 0.25]" />
+                <TresMeshStandardMaterial color="aqua" />
+            </TresMesh>
+        </TresGroup>
+
+        <EffectComposerPmndrs>
+            <OutlinePmndrs :outlinedObjects="outlinedObjects" :edge-strength="20000000" :pulse-speed="1" visible-edge-color="#ffff00" />
+        </EffectComposerPmndrs>
+    </TresCanvas>
+</template>