From f9b0931f5962a64fafe134b642dbcde443f965a7 Mon Sep 17 00:00:00 2001
From: boybook <fangyizhou1997@qq.com>
Date: Sat, 28 Dec 2024 23:50:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E6=8F=8F=E8=BE=B9=E7=9A=84?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E9=A1=BA=E5=BA=8F=EF=BC=8C=E4=BB=8E=E8=80=8C?=
 =?UTF-8?q?=E5=A7=8B=E7=BB=88=E6=B8=B2=E6=9F=93=E5=9C=A8=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E6=9C=AC=E4=BD=93=E5=90=8E=E6=96=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Text3D.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/Text3D.tsx b/src/components/Text3D.tsx
index 3fb3e49..0f0db0a 100644
--- a/src/components/Text3D.tsx
+++ b/src/components/Text3D.tsx
@@ -75,9 +75,9 @@ const Text3D = forwardRef<THREE.Group, Text3DProps>(({
         });
     }, [content, opts.size, opts.depth, font, opts.letterSpacing, opts.spacingWidth, opts.outlineWidth, height]);
 
-    const outlineMaterial = useMemo(() =>
-            createMeshBasicMaterialFromOption(opts.materials.outline, false, [1, 1], [1, 1], [0, 0], { side: THREE.BackSide }),
-            //createLinePointMaterial(),
+    const outlineMaterial = useMemo(
+        () => createMeshBasicMaterialFromOption(opts.materials.outline, false, [1, 1], [1, 1], [0, 0], { side: THREE.BackSide, depthTest: false }),
+        //createLinePointMaterial(),
         [opts.materials]
     );
 
@@ -124,9 +124,19 @@ const Text3D = forwardRef<THREE.Group, Text3DProps>(({
 
     }, [geometry]);
 
-    // 创建主网格
-    const mainMesh = useMemo(() => new THREE.Mesh(geometry, textMaterial), [geometry, textMaterial]);
-    const outlineMesh = useMemo(() => new THREE.Mesh(geometryOutline, outlineMaterial), [geometryOutline, outlineMaterial]);
+    // 主网格
+    const mainMesh = useMemo(() => {
+        const mesh = new THREE.Mesh(geometry, textMaterial);
+        mesh.renderOrder = 2;
+        return mesh;
+    }, [geometry, textMaterial]);
+
+    // 描边网格
+    const outlineMesh = useMemo(() => {
+        const mesh = new THREE.Mesh(geometryOutline, outlineMaterial);
+        mesh.renderOrder = 1;
+        return mesh;
+    }, [geometryOutline, outlineMaterial]);
 
     // 创建一个组包含主网格
     const group = useMemo(() => {