feat:添加threejs

package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@types/three": "^0.176.0",
     "autoprefixer": "^10.4.20",
     "axios": "1.8.2",
     "cssnano": "^7.0.6",
@@ -43,6 +44,7 @@
     "postcss-url": "^10.1.3",
     "postcss-viewport-units": "^0.1.6",
     "postcss-write-svg": "^3.0.1",
+    "three": "^0.176.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "ws": "^8.18.1"

src/views/dataModel/index.vue

@@ -1,9 +1,47 @@
 <script setup lang="ts">
+import * as THREE from 'three'
+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 twinModel: THREE.Group // 数字孪生模型
+
+const initThree = () => {
+  scene = new THREE.Scene()
+  scene.background = new THREE.Color(0xEEEEEE)
+  // 创建相机
+  camera = new THREE.PerspectiveCamera(
+    75,
+    container.value?.clientWidth / container.value?.clientHeight,
+    0.1,
+    1000,
+  )
+  camera.position.set(5, 5, 5)
+  // 创建渲染器
+  renderer = new THREE.WebGLRenderer({ antialias: true })
+  renderer.setSize(container.value?.clientWidth || 0, container.value?.clientHeight || 0)
+  renderer.setPixelRatio(window.devicePixelRatio)
+  container.value?.appendChild(renderer.domElement)
+
+  // 添加环境光
+  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)
+}
+
+onMounted(() => {
+  initThree()
+})
 </script>
 
 <template>
-  <div>数据模型</div>
+  <div ref="container" />
 </template>
 
 <style scoped lang="scss">