增加了 模型的边框处理

src/plugins/basic/components/outlineModel.vue

@@ -0,0 +1,61 @@
+<template>
+    <primitive :object="scene" :scale="1" :position="[3, -1, -3]">
+        <TresMesh :geometry="MeshGeometries">
+            <TresMeshBasicMaterial color="#000000" transparent :opacity="0" />
+            <outlineCom :thickness="thickness" :screenspace="screenspace" :color="color" />
+        </TresMesh>
+    </primitive>
+</template>
+<script setup lang="ts">
+import * as THREE from 'three'
+import { useGLTF } from '@tresjs/cientos'
+import outlineCom from './outlineCom.vue'
+import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js'
+import { SimplifyModifier } from 'three/examples/jsm/modifiers/SimplifyModifier.js'
+
+const props = withDefaults(
+    defineProps<{
+        color?: string
+        thickness?: number
+        screenspace?: boolean
+    }>(),
+    {
+        color: '#ffffff',
+        thickness: 0.1,
+        screenspace: false,
+    },
+)
+
+const { scene } = await useGLTF('./plugins/basic/htmls/model/model.gltf', {
+    draco: true,
+    decoderPath: './draco/',
+})
+function simplifyGeometry(geometry: any, factor = 0.1) {
+    const modifier = new SimplifyModifier()
+    const simplifiedGeometry = modifier.modify(geometry, Math.floor(geometry.attributes.position.count * factor))
+    return simplifiedGeometry
+}
+function createGeometries(model: any) {
+    const geometries = [] as any
+    model.traverse((child: any) => {
+        if (child.isMesh && child.geometry.isBufferGeometry && child.geometry.attributes.position.count < 100000) {
+            const geometry = child.geometry.clone()
+            const matrix = new THREE.Matrix4()
+            matrix.copy(child.matrixWorld)
+            geometry.applyMatrix4(matrix)
+            if (geometry.isBufferGeometry) {
+                Object.keys(geometry.attributes).forEach((key) => {
+                    if (key !== 'position') {
+                        geometry.deleteAttribute(key)
+                    }
+                })
+                geometries.push(simplifyGeometry(geometry, 0.1))
+                // geometries.push(geometry)
+            }
+        }
+    })
+    const mergedGeometry = BufferGeometryUtils.mergeGeometries(geometries)
+    return mergedGeometry
+}
+const MeshGeometries = createGeometries(scene)
+</script>

src/plugins/basic/pages/materials/outline.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-07-11 15:11:57
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-02-27 09:54:05
+-->
 <template>
     <TresCanvas v-bind="state" window-size>
         <TresPerspectiveCamera :position="[10, 10, 10]" :fov="45" :near="1" :far="1000" />
@@ -16,6 +24,10 @@
             <TresMeshStandardMaterial :color="0x33ffff" :roughness="0" :metalness="0" />
             <outlineCom />
         </TresMesh>
+
+        <Suspense>
+            <outlineModel v-bind="outlineModelState" />
+        </Suspense>
     </TresCanvas>
 </template>
 
@@ -26,6 +38,7 @@ import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import { Pane } from 'tweakpane'
 import outlineCom from '../../components/outlineCom.vue'
+import outlineModel from '../../components/outlineModel.vue'
 
 const state = reactive({
     alpha: true,
@@ -43,7 +56,6 @@ const outlineState = reactive({
     thickness: 0.1,
     screenspace: false,
 })
-
 const paneControl = new Pane()
 paneControl.addBinding(outlineState, 'color', {
     label: '颜色',
@@ -57,4 +69,22 @@ paneControl.addBinding(outlineState, 'thickness', {
 paneControl.addBinding(outlineState, 'screenspace', {
     label: 'space',
 })
+
+const outlineModelState = reactive({
+    color: '#ffffff',
+    thickness: 0.026,
+    screenspace: false,
+})
+paneControl.addBinding(outlineModelState, 'color', {
+    label: '模型边框颜色',
+})
+paneControl.addBinding(outlineModelState, 'thickness', {
+    label: '模型边框粗细',
+    min: 0,
+    max: 0.2,
+    step: 0.001,
+})
+paneControl.addBinding(outlineModelState, 'screenspace', {
+    label: '模型边框类型',
+})
 </script>