From 7d0975b792d8e49eb308dc6675ca85c8d7e33667 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Fri, 16 May 2025 16:04:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=B7=BB=E5=8A=A0=E6=A8=A1=E5=9E=8B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                  |   1 +
 src/views/dataModel/index.vue | 164 ++++++++++++++++++++++++++----------------
 2 files changed, 104 insertions(+), 61 deletions(-)

diff --git a/package.json b/package.json
index 67cdaba..09491ae 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "prettier": "prettier --write ."
   },
   "dependencies": {
+    "@dataview/datav-vue3": "0.0.0-test.1672506674342",
     "@element-plus/icons-vue": "^2.3.1",
     "@types/three": "^0.176.0",
     "autoprefixer": "^10.4.20",
diff --git a/src/views/dataModel/index.vue b/src/views/dataModel/index.vue
index 9472c82..4778383 100644
--- a/src/views/dataModel/index.vue
+++ b/src/views/dataModel/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { BorderBox11 } from '@dataview/datav-vue3'
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
@@ -10,10 +11,13 @@ let camera: THREE.PerspectiveCamera
 let renderer: THREE.WebGLRenderer
 let controls: OrbitControls
 let mesh: THREE.Mesh
+// 在合适的位置定义组对象
+const modelGroup = new THREE.Group()
 
 const initThree = () => {
   scene = new THREE.Scene()
-  scene.background = new THREE.Color('#ccc')
+  // scene.background = new THREE.Color('#ccc')
+  scene.background = new THREE.Color('#041622')
 
   // 创建相机
   camera = new THREE.PerspectiveCamera(
@@ -32,59 +36,83 @@ const initThree = () => {
   container.value?.appendChild(renderer.domElement)
 
   controls = new OrbitControls(camera, renderer.domElement)
+  renderer.render(scene, camera)
   controls.enableDamping = true
+  controls.addEventListener('change', () => {
+    renderer.render(scene, camera) // 执行渲染操作
+  })// 监听鼠标、键盘事件
 
   // 添加环境光
   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)
+  // const pointLight = new THREE.PointLight(0xFFFFFF, 1)
+  // pointLight.position.set(5, 5, 5)
+  // scene.add(pointLight)
 
   // 加载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('./013.stl', (geometry) => {
+  //   console.log('geometry', geometry)
+  //   // 创建基础材质（可替换为其他材质）
+  //   const material = new THREE.MeshPhysicalMaterial({
+  //     color: '#b0b0b0', // 更真实的金属色
+  //     metalness: 1, // 完全金属表面
+  //     roughness: 0.1, // 极低表面粗糙度
+  //     clearcoat: 1, // 添加清漆层增强光泽
+  //     clearcoatRoughness: 0.05, // 清漆层光滑度
+  //     reflectivity: 1, // 完全反射环境
+  //     ior: 1.5, // 光学折射率
+  //   })
+  //   // 创建网格模型
+  //   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.position.set(10, 0, 0)
+  //   mesh.scale.set(0.2, 0.2, 0.2)
+  //   scene.add(mesh)
+  //   modelGroup.add(mesh)
+  // })
+  // loader.load('./018.stl', (geometry) => {
+  //   console.log('geometry', geometry)
+  //   // 创建基础材质（可替换为其他材质）
+  //   const material = new THREE.MeshPhysicalMaterial({
+  //     color: '#b0b0b0', // 更真实的金属色
+  //     metalness: 1, // 完全金属表面
+  //     roughness: 0.1, // 极低表面粗糙度
+  //     clearcoat: 1, // 添加清漆层增强光泽
+  //     clearcoatRoughness: 0.05, // 清漆层光滑度
+  //     reflectivity: 1, // 完全反射环境
+  //     ior: 1.5, // 光学折射率
+  //   })
+  //   // 创建网格模型
+  //   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)
+  //   modelGroup.add(mesh)
+  // })
 
-  loader.load('./015.stl', (geometry) => {
+  loader.load('./013.stl', (geometry) => {
     console.log('geometry', geometry)
     // 创建基础材质（可替换为其他材质）
+    // const material = new THREE.MeshPhysicalMaterial({
+    //   color: '#b0b0b0', // 更真实的金属色
+    //   metalness: 1, // 完全金属表面
+    //   roughness: 0.1, // 极低表面粗糙度
+    //   clearcoat: 1, // 添加清漆层增强光泽
+    //   clearcoatRoughness: 0.05, // 清漆层光滑度
+    //   reflectivity: 1, // 完全反射环境
+    //   ior: 1.5, // 光学折射率
+    // })
     const material = new THREE.MeshStandardMaterial({
-      color: 0x666666,
+      color: 'red',
       metalness: 0.7,
       roughness: 0.2,
     })
@@ -94,33 +122,35 @@ const initThree = () => {
     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)
+    // mesh.scale.set(0.5, 0.5, 0.5)
     scene.add(mesh)
+    modelGroup.add(mesh)
   })
+  modelGroup.position.set(0, 0, 0)
 
   // AxesHelper：辅助观察的坐标系
-  const axesHelper = new THREE.AxesHelper(250)
+  const axesHelper = new THREE.AxesHelper(100)
   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)
-    }
-  })
+  // // 添加键盘事件监听器
+  // 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()
+  // const animate = () => {
+  //   requestAnimationFrame(animate)
+  //   controls.update()
+  //   renderer.render(scene, camera)
+  // }
+  // animate()
 }
 
 onMounted(() => {
@@ -129,9 +159,21 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="container" />
+  <div class="data-content">
+    <BorderBox11 class="box" :color="['#1A4468', '#163A5A']" background-color="#041622" title="石墨消解仪">
+      <div ref="container" />
+    </BorderBox11>
+  </div>
 </template>
 
 <style scoped lang="scss">
-
+.data-content {
+  padding: 0 !important;
+  background: rgba(0,0,0,0) !important;
+}
+.box {
+  width: 100%;
+  height: 100%;
+  padding: 60px 20px 30px;
+}
 </style>