常泰模型调整

ems-ui-cloud/package.json

@@ -42,6 +42,7 @@
     "@logicflow/core": "^2.0.6",
     "@logicflow/extension": "^2.0.10",
     "@riophae/vue-treeselect": "^0.4.0",
+    "@tweenjs/tween.js": "^18.6.4",
     "autofit.js": "^3.1.3",
     "axios": "0.24.0",
     "bpmn-js": "^17.11.1",

ems-ui-cloud/src/views/largeScreen/center.vue

@@ -13,6 +13,7 @@ export default {
     return {
       areaType: '',
       areaTabs: [{name: '全部', value: ''}, {name: '北区', value: '1'}, {name: '南区', value: '2'}],
+      modelApi: null,
     };
   },
   components: {
@@ -25,11 +26,33 @@ export default {
     ...mapMutations('userState', ['setAreaType']),
     areaTabClick () {
       this.setAreaType(this.areaType)
+      if (this.areaType === '2') {
+        const target = {
+          position: {x: -68.07200022928386, y: -573.3788080485533, z: 358.4490004266269}, // 相机目标位置
+          targetContent: {x: -68.07200022928386, y: -58.61085804855406, z: -48.804124573372285}, // 控制器目标焦点
+          time: 1000 // 动画时间
+        };
+        this.modelApi.flyTo(target,1.2)
+      } else if (this.areaType === '1') {
+        const target = {
+          position: {x: 2.9287885309866817, y: -403.9781890137868, z: 376.33849737114133}, // 相机目标位置
+          targetContent: {x: -2.929806062765964, y: 15.311141772539063, z: 44.637911374941055}, // 控制器目标焦点
+          time: 1000 // 动画时间
+        };
+        this.modelApi.flyTo(target)
+      } else {
+        const target = {
+          position: {x: -20, y: -652, z: 500}, // 相机目标位置
+          targetContent: {x: -20, y: -20, z: 0}, // 控制器目标焦点
+          time: 1000 // 动画时间
+        };
+        this.modelApi.flyTo(target)
+      }
     },
     initThree () {
       setTimeout(() => {
-        const modelApi = new renderModel('#model')
-        modelApi.init()
+        this.modelApi = new renderModel('#model')
+        this.modelApi.init()
       }, 100)
 
     }
@@ -80,12 +103,13 @@ export default {
       gap: 2px;
       padding: 0 3px;
 
-      >div{
+      >div {
         background-color: #0F4565;
         white-space: nowrap;
         margin-right: 4px;
         padding: 5px;
         margin-top: 4px;
+
         .value {
           color: #06E3F9; // 根据需要调整颜色
         }

ems-ui-cloud/src/views/largeScreen/three/renderModel.js

@@ -1,10 +1,9 @@
 import * as THREE from 'three'; //导入整个 three.js核心库
-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 { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; //导入控制器模块，轨道控制器
 import { CSS3DRenderer, CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
 import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
+import * as TWEEN from '@tweenjs/tween.js';
 import { getBottomMaterial } from './material.js';
 // 定义一个 class类
 class renderModel {
@@ -79,11 +78,10 @@ class renderModel {
   // 创建相机
   initCamera() {
     const { clientHeight, clientWidth } = this.container;
-    this.camera = new THREE.PerspectiveCamera(14, clientWidth / clientHeight, 1, 10000);
+    this.camera = new THREE.PerspectiveCamera(18, clientWidth / clientHeight, 0.1, 10000);
   }
   // 创建渲染器
   initRender() {
-    // this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) //设置抗锯齿
     this.renderer = new THREE.WebGLRenderer({
       logarithmicDepthBuffer: true,
       antialias: true, // true/false表示是否开启反锯齿
@@ -119,7 +117,7 @@ class renderModel {
   initControls() {
     this.controls = new OrbitControls(this.camera, this.renderer.domElement);
     this.controls.enableDamping = true;
-    this.controls.maxDistance = 1000;
+    this.controls.maxDistance = 2000;
     //标签控制器
     this.css3dControls = new OrbitControls(this.camera, this.css3DRenderer.domElement);
     this.css3dControls.enablePan = false;
@@ -129,11 +127,106 @@ class renderModel {
     this.renderer.render(this.scene, this.camera);
     this.controls.update();
     this.css3DRenderer.render(this.scene, this.camera);
+    TWEEN.update();
+    // 检查模型位置是否发生变化
+    if (this.model) {
+      console.log('Model Position:', this.model.position);
+      console.log('Camera Position:', this.camera.position);
+      console.log('Controls Target:', this.controls.target);
+    }
   }
   // 使用动画器不断更新场景
   sceneAnimation() {
     this.renderer.setAnimationLoop(this.animate.bind(this));
   }
+  initGUI() {
+    const gui = new GUI();
+
+    // 添加控制器目标位置的控制器
+    const controlsFolder = gui.addFolder('Controls Target');
+    controlsFolder
+      .add(this.controls.target, 'x', -1000, 1000)
+      .name('Target X')
+      .onChange(() => {
+        this.controls.update();
+      });
+    controlsFolder
+      .add(this.controls.target, 'y', -1000, 1000)
+      .name('Target Y')
+      .onChange(() => {
+        this.controls.update();
+      });
+    controlsFolder
+      .add(this.controls.target, 'z', -1000, 1000)
+      .name('Target Z')
+      .onChange(() => {
+        this.controls.update();
+      });
+    controlsFolder.open();
+
+    // 添加相机位置的控制器
+    const cameraFolder = gui.addFolder('Camera Position');
+    cameraFolder
+      .add(this.camera.position, 'x', -1000, 1000)
+      .name('Camera X')
+      .onChange(() => {
+        this.controls.update();
+      });
+    cameraFolder
+      .add(this.camera.position, 'y', -1000, 1000)
+      .name('Camera Y')
+      .onChange(() => {
+        this.controls.update();
+      });
+    cameraFolder
+      .add(this.camera.position, 'z', -1000, 1000)
+      .name('Camera Z')
+      .onChange(() => {
+        this.controls.update();
+      });
+    cameraFolder.open();
+
+    // 添加重置按钮
+    const initialTarget = this.controls.target.clone();
+    const initialCameraPosition = this.camera.position.clone();
+    gui
+      .add(
+        {
+          reset: () => {
+            this.controls.target.copy(initialTarget);
+            this.camera.position.copy(initialCameraPosition);
+            this.controls.update();
+          }
+        },
+        'reset'
+      )
+      .name('Reset Position');
+  }
+
+  flyTo(target, scale=1, duration = 1000) {
+    const targetPosition = new THREE.Vector3().copy(target.position);
+    const targetFocus = new THREE.Vector3().copy(target.targetContent);
+
+    // 移动相机位置
+    new TWEEN.Tween(this.camera.position)
+      .to(targetPosition, target.time || 500)
+      .easing(TWEEN.Easing.Quadratic.InOut)
+      .onUpdate(() => {
+        this.controls.update(); // 更新控制器
+      })
+      .start();
+
+    // 移动控制器目标
+    new TWEEN.Tween(this.controls.target)
+      .to(targetFocus, target.time || 500)
+      .easing(TWEEN.Easing.Quadratic.InOut)
+      .onUpdate(() => {
+        this.controls.update(); // 更新控制器
+      })
+      .start();
+
+    new TWEEN.Tween(this.model.scale).to({ x: scale, y: scale, z: scale }, duration).easing(TWEEN.Easing.Quadratic.InOut).start();
+  }
   tag3D(name) {
     // 创建div元素(作为标签)
     let div = document.createElement('div');
@@ -176,40 +269,9 @@ class renderModel {
     object.position.y += object.position.y - center.y;
     object.position.z = 0;
   }
-  //加载模型
-  setBaseModel() {
-    var mtlLoader = new MTLLoader();
-    mtlLoader.load('model/model.mtl', materials => {
-      var objLoader = new OBJLoader();
-      objLoader.setMaterials(materials);
-      //加载.obj文件，执行obj函数
-      objLoader.load('model/model3.obj', object => {
-        this.setModelPosition(object);
-        this.model = object;
-        // object.traverse((obj) => {
-        //   if (obj instanceof THREE.Mesh) {
-        //     obj.material = new THREE.MeshPhysicalMaterial({ color: '#43617B' })
-        //   }
-        // })
-        object.traverse(function (child) {
-          if (child.isMesh) {
-            child.material.emissive = child.material.color;
-            child.material.emissiveMap = child.material.map;
-          }
-        });
-        // 设置相机位置
-        this.camera.position.set(0, -600, 200);
-        // 设置相机坐标系
-        this.camera.lookAt(0, 0, 0);
-        // 将模型添加到场景中去
-        this.scene.add(this.model);
-      });
-    });
-  }
   setFBXModel() {
     var fbxLoader = new FBXLoader();
-    //加载.obj文件，执行obj函数
-    fbxLoader.load('/models/model.FBX', object => {
+    fbxLoader.load('/models/model2.FBX', object => {
       this.calcMeshCenter(object);
       this.model = object;
       object.traverse(function (child) {
@@ -219,21 +281,32 @@ class renderModel {
         }
       });
       // 设置相机位置
-      this.camera.position.set(0, -800, 500);
+      this.camera.position.set(-20, -652, 500);
+      this.controls.target.set(-20, -20, 0);
+      this.model.scale.set(1, 1, 1);
       // 设置相机坐标系
       this.camera.lookAt(0, 0, 0);
       // 将模型添加到场景中去
       this.scene.add(this.model);
-      // 初始化 GUI 控件
-      // const camFolder = new GUI().addFolder('Camera');
-      // camFolder.add(this.camera.position, 'x', -6500, 6500, 10).name('X Axis');
-      // camFolder.add(this.camera.position, 'y', -6500, 6500, 10).name('Y Axis');
-      // camFolder.add(this.camera.position, 'z', -6500, 6500, 10).name('Z Axis');
-      // camFolder.open();
-      //在GUI中添加一个用于调整tag位置的文件夹
-      this.createGuangfuLabel()
-      this.createFuheLabel()
-      this.createStorageLabel()
+      // window.addEventListener('click', event => {
+      //   const raycaster = new THREE.Raycaster();
+      //   const mouse = new THREE.Vector2();
+      //   mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+      //   mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+      //   raycaster.setFromCamera(mouse, this.camera);
+
+      //   const intersects = raycaster.intersectObjects(this.scene.children);
+
+      //   if (intersects.length > 0) {
+      //     const point = intersects[0].point;
+      //     console.log(`Clicked at: (${point.x}, ${point.y}, ${point.z})`);
+      //   }
+      // });
+      this.initGUI();
+      this.createGuangfuLabel();
+      this.createFuheLabel();
+      this.createStorageLabel();
     });
   }
   onWindowResizes() {
@@ -260,7 +333,7 @@ class renderModel {
     group.position.y = 0;
     group.position.z = 17;
   }
-  createGuangfuLabel () {
+  createGuangfuLabel() {
     const label3D = this.tag3D('光伏');
     const dialog3D = this.createDialog(`
       <div class="load-container" >
@@ -292,7 +365,7 @@ class renderModel {
     this.scene.add(label3D);
     this.scene.add(dialog3D);
   }
-  createStorageLabel () {
+  createStorageLabel() {
     const label3D = this.tag3D('储能');
     const dialog3D = this.createDialog(`
       <div class="load-container" >
@@ -324,7 +397,7 @@ class renderModel {
     this.scene.add(label3D);
     this.scene.add(dialog3D);
   }
-  createFuheLabel () {
+  createFuheLabel() {
     const label3D = this.tag3D('负荷');
     const dialog3D = this.createDialog(`
       <div class="load-container" >