Browse Source

[Wip 0000] 局部风机双巷模型动画添加

houzekong 2 months ago
parent
commit
636dc87d98

BIN
public/model/glft/jbfj/jbfj-dual_2025-01-20.glb → public/model/glft/jbfj/jbfj-dual_2025-01-22.glb


+ 1 - 1
src/utils/threejs/main.worker.ts

@@ -46,7 +46,7 @@ export function initModalWorker() {
     'jbfj/jbfj-hd_2025-01-09.glb',
     'jbfj/jbfj-fm_2023-06-02.glb',
     'jbfj/jbfj-fc_2023-06-02.glb',
-    'jbfj/jbfj-dual_2025-01-20.glb',
+    'jbfj/jbfj-dual_2025-01-22.glb',
     'ztfj/dj1_2023-06-02.glb',
     'ztfj/dj2_2023-06-02.glb',
     'ztfj/bg_2023-06-02.glb',

+ 42 - 28
src/views/vent/monitorManager/fanLocalMonitor/fanLocalDual.threejs.base.ts

@@ -1,8 +1,7 @@
 import * as THREE from 'three';
-import { setModalCenter } from '/@/utils/threejs/util';
+// import { setModalCenter } from '/@/utils/threejs/util';
 import Smoke from '../../comment/threejs/Smoke';
 import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
-// import { setModalCenter } from '/@/utils/threejs/util';
 // import * as dat from 'dat.gui';
 // const gui = new dat.GUI();
 // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
@@ -71,10 +70,11 @@ class ModelContext {
       this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
         this.group = gltf[0];
         if (this.group) {
+          // setModalCenter(this.group);
           this.addLight();
-          this.setModalPosition();
+          this.setModelPosition();
           this.initModules();
-          setModalCenter(this.group);
+          this.startAnimation(this.elements);
           resolve(null);
         }
       });
@@ -89,10 +89,15 @@ class ModelContext {
   }
 
   // 设置模型位置
-  setModalPosition() {
+  setModelPosition() {
     if (!this.group) return;
-    this.group.scale.set(0.7, 0.7, 0.7);
-    this.group.position.set(0, 6, -50);
+    this.group.scale.set(0.6, 0.6, 0.6);
+
+    // const ff = gui.addFolder(`位置调整`);
+    // ff.add(this.group.position, 'x', -100, 100);
+    // ff.add(this.group.position, 'y', -100, 100);
+    // ff.add(this.group.position, 'z', -100, 100);
+    this.group.position.set(0, 0, -60);
     this.group.rotation.y = Math.PI / 2;
   }
 
@@ -144,38 +149,47 @@ class ModelContext {
   }
 
   /** 核心方法,初始化本模型的各个模块,这些模块可以实现特定场景的展示、控制等功能 */
-  async initModules() {
+  initModules() {
     if (this.elements.length > 0) return;
-    const curve1 = [
+    // 右侧风机-主风机进风
+    const curveFan1Right = [
       {
-        path0: new THREE.Vector3(10, 0, -10),
-        path1: new THREE.Vector3(20, 0, -10),
+        path0: new THREE.Vector3(-85.685, 4.208, 43.895),
+        path1: new THREE.Vector3(-85.685, 2.208, 41.895),
+        isSpread: true,
+        spreadDirection: -1, // 1是由小变大,-1是由大变小
+      },
+      {
+        path0: new THREE.Vector3(-85.685, 2.208, 41.895),
+        path1: new THREE.Vector3(-85.685, 2.188, 35.327),
         isSpread: false,
-        spreadDirection: 0,
+        spreadDirection: 1,
       },
       {
-        path0: new THREE.Vector3(10, 0, -10),
-        path1: new THREE.Vector3(10, 0, -20),
-        isSpread: true,
-        spreadDirection: 1, // 1是由小变大,-1是由大变小
+        path0: new THREE.Vector3(-85.685, 2.188, 35.327),
+        path1: new THREE.Vector3(-85.685, 0.784, 33.086),
+        isSpread: false,
+        spreadDirection: 1,
       },
     ];
     const group1 = new THREE.Group();
     const smoke1 = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.75, 0.5, 400);
-    smoke1.setPath(curve1);
-    await smoke1.setPoints();
+    smoke1.setPath(curveFan1Right);
     this.elements.push(smoke1);
 
-    const element = document.getElementById('inputBox') as HTMLElement;
-    if (element) {
-      const fanLocalCSS3D = new CSS3DObject(element);
-      fanLocalCSS3D.name = 'text1';
-      fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
-      fanLocalCSS3D.rotation.y = -Math.PI / 2;
-      fanLocalCSS3D.position.set(-85.68, 5.97, -3.39);
-      group1.add(fanLocalCSS3D);
-      this.elements.push(fanLocalCSS3D);
-    }
+    smoke1.setPoints().then(() => {
+      this.group?.add(smoke1.points);
+    });
+    // const element = document.getElementById('inputBox') as HTMLElement;
+    // if (element) {
+    //   const fanLocalCSS3D = new CSS3DObject(element);
+    //   fanLocalCSS3D.name = 'text1';
+    //   fanLocalCSS3D.scale.set(0.04, 0.04, 0.04);
+    //   fanLocalCSS3D.rotation.y = -Math.PI / 2;
+    //   fanLocalCSS3D.position.set(-85.68, 5.97, -3.39);
+    //   group1.add(fanLocalCSS3D);
+    //   this.elements.push(fanLocalCSS3D);
+    // }
 
     this.modules.push({
       name: 'state1',