From 84ac3951d1914d2087ddc60eed786d1376c9996b Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Thu, 15 May 2025 17:25:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E7=89=A9=E4=BD=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dataModel/index.vue | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/views/dataModel/index.vue b/src/views/dataModel/index.vue
index a29be76..4aa389a 100644
--- a/src/views/dataModel/index.vue
+++ b/src/views/dataModel/index.vue
@@ -1,31 +1,48 @@
 <script setup lang="ts">
 import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { onMounted, ref } from 'vue'
 
 const container = ref<HTMLDivElement>()
 let scene: THREE.Scene
 let camera: THREE.PerspectiveCamera
 let renderer: THREE.WebGLRenderer
-// let controls: OrbitControls
+let controls: OrbitControls
 // let twinModel: THREE.Group // 数字孪生模型
 
 const initThree = () => {
   scene = new THREE.Scene()
-  scene.background = new THREE.Color(0xEEEEEE)
+  scene.background = new THREE.Color('black')
   // 创建相机
   camera = new THREE.PerspectiveCamera(
     75,
-    container.value?.clientWidth / container.value?.clientHeight,
-    0.1,
-    1000,
+    800 / 500,
+    1,
+    3000,
   )
-  camera.position.set(5, 5, 5)
+  camera.position.set(292, 223, 185)
+  camera.lookAt(0, 0, 0)
   // 创建渲染器
   renderer = new THREE.WebGLRenderer({ antialias: true })
-  renderer.setSize(container.value?.clientWidth || 0, container.value?.clientHeight || 0)
+  renderer.setSize(800, 500)
   renderer.setPixelRatio(window.devicePixelRatio)
   container.value?.appendChild(renderer.domElement)
 
+  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)
@@ -33,6 +50,7 @@ const initThree = () => {
   const pointLight = new THREE.PointLight(0xFFFFFF, 1)
   pointLight.position.set(5, 5, 5)
   scene.add(pointLight)
+  renderer.render(scene, camera)
 }
 
 onMounted(() => {