fix:添加模型

src/views/dataModel/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import { onMounted, ref } from 'vue'
 
 const container = ref<HTMLDivElement>()
@@ -8,11 +9,12 @@ let scene: THREE.Scene
 let camera: THREE.PerspectiveCamera
 let renderer: THREE.WebGLRenderer
 let controls: OrbitControls
-// let twinModel: THREE.Group // 数字孪生模型
+let mesh: THREE.Mesh
 
 const initThree = () => {
   scene = new THREE.Scene()
-  scene.background = new THREE.Color('black')
+  scene.background = new THREE.Color('#ccc')
+
   // 创建相机
   camera = new THREE.PerspectiveCamera(
     75,
@@ -22,6 +24,7 @@ const initThree = () => {
   )
   camera.position.set(292, 223, 185)
   camera.lookAt(0, 0, 0)
+
   // 创建渲染器
   renderer = new THREE.WebGLRenderer({ antialias: true })
   renderer.setSize(800, 500)
@@ -31,26 +34,93 @@ const initThree = () => {
   controls = new OrbitControls(camera, renderer.domElement)
   controls.enableDamping = true
 
-  // 模型对象
-  const geometry = new THREE.BoxGeometry(50, 50, 50)
-  const material = new THREE.MeshBasicMaterial({
-    color: 0x0000FF,
-  })
-  const mesh = new THREE.Mesh(geometry, material)
-  scene.add(mesh)
-
-  // AxesHelper：辅助观察的坐标系
-  const axesHelper = new THREE.AxesHelper(250)
-  scene.add(axesHelper)
-
   // 添加环境光
   const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.8)
   scene.add(ambientLight)
+
   // 添加点光源
   const pointLight = new THREE.PointLight(0xFFFFFF, 1)
   pointLight.position.set(5, 5, 5)
   scene.add(pointLight)
-  renderer.render(scene, camera)
+
+  // 加载STL模型
+  const loader = new STLLoader()
+  loader.load('./013.stl', (geometry) => {
+    console.log('geometry', geometry)
+    // 创建基础材质（可替换为其他材质）
+    const material = new THREE.MeshStandardMaterial({
+      color: 'blue',
+      metalness: 0.7,
+      roughness: 0.2,
+    })
+    // 创建网格模型
+    mesh = new THREE.Mesh(geometry, material)
+    // 居中模型
+    const box = new THREE.Box3().setFromObject(mesh)
+    const center = box.getCenter(new THREE.Vector3())
+    mesh.position.sub(center) // 将模型中心移到原点
+    mesh.scale.set(0.5, 0.5, 0.5)
+    scene.add(mesh)
+  })
+  loader.load('./018.stl', (geometry) => {
+    console.log('geometry', geometry)
+    // 创建基础材质（可替换为其他材质）
+    const material = new THREE.MeshStandardMaterial({
+      color: 0x666666,
+      metalness: 0.7,
+      roughness: 0.2,
+    })
+    // 创建网格模型
+    mesh = new THREE.Mesh(geometry, material)
+    // 居中模型
+    const box = new THREE.Box3().setFromObject(mesh)
+    const center = box.getCenter(new THREE.Vector3())
+    mesh.position.sub(center) // 将模型中心移到原点
+    mesh.scale.set(0.5, 0.5, 0.5)
+    scene.add(mesh)
+  })
+
+  loader.load('./015.stl', (geometry) => {
+    console.log('geometry', geometry)
+    // 创建基础材质（可替换为其他材质）
+    const material = new THREE.MeshStandardMaterial({
+      color: 0x666666,
+      metalness: 0.7,
+      roughness: 0.2,
+    })
+    // 创建网格模型
+    mesh = new THREE.Mesh(geometry, material)
+    // 居中模型
+    const box = new THREE.Box3().setFromObject(mesh)
+    const center = box.getCenter(new THREE.Vector3())
+    mesh.position.sub(center) // 将模型中心移到原点
+    mesh.scale.set(0.5, 0.5, 0.5)
+    scene.add(mesh)
+  })
+
+  // AxesHelper：辅助观察的坐标系
+  const axesHelper = new THREE.AxesHelper(250)
+  scene.add(axesHelper)
+
+  // 添加键盘事件监听器
+  window.addEventListener('keydown', (event) => {
+    if (event.key === 'ArrowUp') {
+      // 放大
+      camera.position.multiplyScalar(0.9)
+    }
+    else if (event.key === 'ArrowDown') {
+      // 缩小
+      camera.position.multiplyScalar(1.1)
+    }
+  })
+
+  // 渲染循环
+  const animate = () => {
+    requestAnimationFrame(animate)
+    controls.update()
+    renderer.render(scene, camera)
+  }
+  animate()
 }
 
 onMounted(() => {