From 407e3aedbcd747df77ed4e7ebb506efd9d5d592e Mon Sep 17 00:00:00 2001
From: luoyifan <luoyifan@qq.com>
Date: Sun, 8 Jun 2025 19:30:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=80=A7=E8=83=BD=E6=B5=8B=E8=AF=95=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ThreePerfView.vue | 59 ++++++++++++++++++++++++++++++++++------
 1 file changed, 50 insertions(+), 9 deletions(-)

diff --git a/src/components/ThreePerfView.vue b/src/components/ThreePerfView.vue
index 16447b3..cc6925c 100644
--- a/src/components/ThreePerfView.vue
+++ b/src/components/ThreePerfView.vue
@@ -26,6 +26,8 @@ import { Line2 } from 'three/examples/jsm/lines/Line2'
 import MeasureRenderer from '@/modules/measure/MeasureRenderer.ts'
 import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry'
 import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2'
+import { Text } from 'troika-three-text'
+import SimSunTTF from '@/assets/fonts/simsunb.ttf'
 
 const canvasContainer = ref(null)
 let resizeObserver: ResizeObserver | null = null
@@ -58,6 +60,9 @@ const lineMaterial = new LineMaterial({
   linewidth: 5
 })
 
+/**
+ * drawLine2
+ */
 function test1() {
   cleanupThree()
   const xcount = 100
@@ -85,11 +90,6 @@ function test1() {
     const geometry = new LineGeometry()
     geometry.setPositions([p1.x, p1.y, p1.z, p2.x, p2.y, p2.z])
 
-    // const material = new LineMaterial({
-    //   color: 0xFF8C00,
-    //   linewidth: 5
-    // });
-
     const line = new Line2(geometry, lineMaterial)
     line.computeLineDistances()
 
@@ -114,6 +114,9 @@ function test1() {
   refreshCount()
 }
 
+/**
+ * LineSegments2
+ */
 function test2() {
   cleanupThree()
   const xcount = 100
@@ -176,7 +179,9 @@ function test2() {
   refreshCount()
 }
 
-
+/**
+ * BufferGeometry
+ */
 function test3() {
   cleanupThree()
   const xcount = 100
@@ -201,6 +206,7 @@ function test3() {
   }
 
   const positions = []
+  const labels = []
 
   // 横向连接（右）
   for (let z = 0; z < zcount; z++) {
@@ -210,6 +216,12 @@ function test3() {
       const x2 = (x + 1) * spacing
       const z2 = z * spacing
       positions.push(x1, y, z1, x2, y, z2)
+
+      // 计算中点和长度
+      const midPoint = new THREE.Vector3((x1 + x2) / 2, y + 0.5, (z1 + z2) / 2)
+      const length = Math.hypot(x2 - x1, y - y, z2 - z1)
+      const label = createTextLabel(length.toFixed(2) + 'm', midPoint)
+      labels.push(label)
     }
   }
 
@@ -221,6 +233,12 @@ function test3() {
       const x2 = x * spacing
       const z2 = (z + 1) * spacing
       positions.push(x1, y, z1, x2, y, z2)
+
+      // 计算中点和长度
+      const midPoint = new THREE.Vector3((x1 + x2) / 2, y + 0.5, (z1 + z2) / 2)
+      const length = Math.hypot(x2 - x1, y - y, z2 - z1)
+      const label = createTextLabel(length.toFixed(2) + 'm', midPoint)
+      labels.push(label)
     }
   }
 
@@ -231,9 +249,35 @@ function test3() {
   const lineSegments = new THREE.LineSegments(geometry, material)
   lineSegments.name = 'grid-lines'
   scene.add(lineSegments)
+
+  labels.forEach(label => scene.add(label))
+
   refreshCount()
 }
 
+function createTextLabel(text, position) {
+  const label = new Text()
+  label.text = text
+  label.font = SimSunTTF
+  label.fontSize = 0.2
+  label.color = '#333333'
+  label.opacity = 0.8
+  label.padding = 0.2
+  label.anchorX = 'center'
+  label.anchorY = 'middle'
+  label.depthOffset = 1
+  label.backgroundColor = '#000000'
+  label.backgroundOpacity = 0.6
+  label.material.depthTest = false
+  label.position.copy(position)
+  label.name = MeasureRenderer.LABEL_NAME
+
+  label.position.set(position.x, position.y + 0.3, position.z - 0.2)
+  label.quaternion.copy(camera.quaternion)
+  label.sync()
+
+  return label
+}
 
 const restate = reactive({
   targetColor: '#ff0000',
@@ -349,9 +393,6 @@ function animate() {
 
 function handleResize(entries) {
   for (let entry of entries) {
-    // entry.contentRect包含了元素的尺寸信息
-    console.log('Element size changed:', entry.contentRect)
-
     const width = entry.contentRect.width
     const height = entry.contentRect.height