性能测试渲染

src/components/ThreePerfView.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="model3d-view">
     <el-space :gutter="10" class="toolbar">
-      <el-upload :on-change="test1"
+      <el-button type="primary" @click="test1">测试1</el-button>
-                 :show-file-list="false" accept=".fbx,.obj,.mtl,.3ds" action="" :auto-upload="false">
-        <el-button type="primary">测试1</el-button>
-      </el-upload>
       <div class="demo-color-block">
         <span class="demonstration">物体数:<el-text type="danger">{{ restate.objects }}</el-text></span>
         <span class="demonstration"> 顶点数:<el-text type="danger">{{ restate.vertices }}</el-text></span>
@@ -21,13 +18,9 @@ import * as THREE from 'three'
 import { getCurrentInstance, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
 import Stats from 'three/examples/jsm/libs/stats.module'
-
+import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
-import { TransformControls } from 'three/examples/jsm/controls/TransformControls'
+import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
-import * as dat from 'three/examples/jsm/libs/lil-gui.module.min'
+import { Line2 } from 'three/examples/jsm/lines/Line2'
-import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
-import { TDSLoader } from 'three/examples/jsm/loaders/TDSLoader'
 
 const canvasContainer = ref(null)
 let resizeObserver: ResizeObserver | null = null
@@ -42,6 +35,70 @@ let statsControls: Stats | null = null
 let animationFrameId: number | null = null
 let modelGroup = new THREE.Group()
 
+const pointMaterial = new THREE.SpriteMaterial({
+  color: 0xFFFF99, // 0x303133,
+  transparent: true,
+  side: THREE.DoubleSide,
+  opacity: 1,
+  sizeAttenuation: true
+})
+const lineMaterial = new LineMaterial({
+  color: 0xFF8C00,
+  linewidth: 5,
+  vertexColors: false,
+  dashed: false
+})
+
+function test1() {
+  const xcount = 100
+  const zcount = 100
+  const dist = 1.2
+  const y = 0.1
+
+  const points = []
+
+  // 创建所有点
+  for (let z = 0; z < zcount; z++) {
+    for (let x = 0; x < xcount; x++) {
+      const px = x * dist
+      const pz = z * dist
+      const point = new THREE.Sprite(pointMaterial)
+      point.position.set(px, y, pz)
+      point.scale.set(0.25, 0.25, 1) // 设置大小
+      scene.add(point)
+      points.push(point.position.clone())
+    }
+  }
+
+  // 绘制线段
+  const lines = []
+
+// 绘制线段（每两个点一组）
+  for (let z = 0; z < zcount; z++) {
+    for (let x = 0; x < xcount - 1; x++) {
+      const i = z * xcount + x
+      drawLine(points[i], points[i + 1])
+    }
+  }
+
+  for (let z = 0; z < zcount - 1; z++) {
+    for (let x = 0; x < xcount; x++) {
+      const i = z * xcount + x
+      const belowIndex = (z + 1) * xcount + x
+      drawLine(points[i], points[belowIndex])
+    }
+  }
+}
+
+function drawLine(p1: THREE.Vector3, p2: THREE.Vector3) {
+  const geometry = new LineGeometry()
+  geometry.setPositions([p1.x, p1.y, p1.z, p2.x, p2.y, p2.z])
+
+  const line = new Line2(geometry, lineMaterial)
+  line.computeLineDistances() // 可选：用于渐变等效果
+  scene.add(line)
+}
+
 const restate = reactive({
   targetColor: '#ff0000',
   loadScale: 1,
@@ -122,6 +179,7 @@ function initThree() {
 
   gridHelper = new THREE.GridHelper(1000, 1000)
   scene.add(gridHelper)
+  gridHelper.visible = false
 
   // 光照
   const ambientLight = new THREE.AmbientLight(0xffffff, 1.5)