|  | @@ -1,8 +1,10 @@
 | 
											
												
													
														|  |  import * as THREE from 'three';
 |  |  import * as THREE from 'three';
 | 
											
												
													
														|  |  // import { setModalCenter } from '/@/utils/threejs/util';
 |  |  // import { setModalCenter } from '/@/utils/threejs/util';
 | 
											
												
													
														|  |  import Smoke from '../../comment/threejs/Smoke';
 |  |  import Smoke from '../../comment/threejs/Smoke';
 | 
											
												
													
														|  | -import { CSS3DObject, CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer';
 |  | 
 | 
											
												
													
														|  | -import * as dat from 'dat.gui';
 |  | 
 | 
											
												
													
														|  | 
 |  | +import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
 | 
											
												
													
														|  | 
 |  | +import { get } from 'lodash-es';
 | 
											
												
													
														|  | 
 |  | +import { getTextCanvas } from '/@/utils/threejs/util';
 | 
											
												
													
														|  | 
 |  | +// import * as dat from 'dat.gui';
 | 
											
												
													
														|  |  // const gui = new dat.GUI();
 |  |  // const gui = new dat.GUI();
 | 
											
												
													
														|  |  // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
 |  |  // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
 | 
											
												
													
														|  |  
 |  |  
 | 
											
										
											
												
													
														|  | @@ -33,9 +35,32 @@ class ModelContext {
 | 
											
												
													
														|  |    }
 |  |    }
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |    /** 设置模型类型并切换,不同的类型通常对应不同的具体模型,在模型总控制器下的具体模型会根据传入的参数彼此交互、切换 */
 |  |    /** 设置模型类型并切换,不同的类型通常对应不同的具体模型,在模型总控制器下的具体模型会根据传入的参数彼此交互、切换 */
 | 
											
												
													
														|  | -  setModelType(modelType: string, data: any) {
 |  | 
 | 
											
												
													
														|  | 
 |  | +  setModelType(modelType: 'inner' | 'outer' | string, data: any[]) {
 | 
											
												
													
														|  | 
 |  | +    const fanOuter1Run = get<string>(data[0], 'Fan1StartStatus', '0') == '1';
 | 
											
												
													
														|  | 
 |  | +    const fanInner1Run = get<string>(data[1], 'Fan1StartStatus', '0') == '1';
 | 
											
												
													
														|  | 
 |  | +    if (modelType === 'inner') {
 | 
											
												
													
														|  | 
 |  | +      this.execute('fanLeftStrong');
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +    if (modelType === 'outer') {
 | 
											
												
													
														|  | 
 |  | +      this.execute('fanRightStrong');
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +    if (fanOuter1Run && fanInner1Run) {
 | 
											
												
													
														|  | 
 |  | +      this.execute('fan1RightOpen&fan1LeftOpen');
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +    if (fanOuter1Run && !fanInner1Run) {
 | 
											
												
													
														|  | 
 |  | +      this.execute('fan1RightOpen&fan2LeftOpen');
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +    if (!fanOuter1Run && fanInner1Run) {
 | 
											
												
													
														|  | 
 |  | +      this.execute('fan2RightOpen&fan1LeftOpen');
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +    if (!fanOuter1Run && !fanInner1Run) {
 | 
											
												
													
														|  | 
 |  | +      this.execute('fan2RightOpen&fan2LeftOpen');
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  execute(cmdname: string) {
 | 
											
												
													
														|  |      this.modules.forEach(({ name, context, behavior }) => {
 |  |      this.modules.forEach(({ name, context, behavior }) => {
 | 
											
												
													
														|  | -      if (name === modelType) {
 |  | 
 | 
											
												
													
														|  | 
 |  | +      if (name === cmdname) {
 | 
											
												
													
														|  |          behavior(context);
 |  |          behavior(context);
 | 
											
												
													
														|  |        }
 |  |        }
 | 
											
												
													
														|  |      });
 |  |      });
 | 
											
										
											
												
													
														|  | @@ -46,6 +71,20 @@ class ModelContext {
 | 
											
												
													
														|  |        this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
 |  |        this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
 | 
											
												
													
														|  |          this.group = gltf[0];
 |  |          this.group = gltf[0];
 | 
											
												
													
														|  |          if (this.group) {
 |  |          if (this.group) {
 | 
											
												
													
														|  | 
 |  | +          // const material = new THREE.MeshBasicMaterial({
 | 
											
												
													
														|  | 
 |  | +          //   color: '#000',
 | 
											
												
													
														|  | 
 |  | +          //   transparent: true,
 | 
											
												
													
														|  | 
 |  | +          //   opacity: 0.3,
 | 
											
												
													
														|  | 
 |  | +          //   side: THREE.DoubleSide, // 这里是双面渲染的意思
 | 
											
												
													
														|  | 
 |  | +          // });
 | 
											
												
													
														|  | 
 |  | +          // [
 | 
											
												
													
														|  | 
 |  | +          //   this.group.getObjectByName('Cylinder1054'),
 | 
											
												
													
														|  | 
 |  | +          //   this.group.getObjectByName('BuErTaiJuBuFengJi_shupailie_baiseziti'),
 | 
											
												
													
														|  | 
 |  | +          //   this.group.getObjectByName('pCylinder1'),
 | 
											
												
													
														|  | 
 |  | +          // ].forEach((e: THREE.Mesh) => {
 | 
											
												
													
														|  | 
 |  | +          //   e.material = material;
 | 
											
												
													
														|  | 
 |  | +          //   // e.renderOrder = 300;
 | 
											
												
													
														|  | 
 |  | +          // });
 | 
											
												
													
														|  |            // this.group.scale.set(2, 2, 2);
 |  |            // this.group.scale.set(2, 2, 2);
 | 
											
												
													
														|  |            // setModalCenter(this.group);
 |  |            // setModalCenter(this.group);
 | 
											
												
													
														|  |            this.addLight();
 |  |            this.addLight();
 | 
											
										
											
												
													
														|  | @@ -93,7 +132,7 @@ class ModelContext {
 | 
											
												
													
														|  |          g.oldOpacityFactor = 0.4;
 |  |          g.oldOpacityFactor = 0.4;
 | 
											
												
													
														|  |        }
 |  |        }
 | 
											
												
													
														|  |        if (g instanceof CSS3DObject) {
 |  |        if (g instanceof CSS3DObject) {
 | 
											
												
													
														|  | -        g.element.style.setProperty('opacity', '0.5');
 |  | 
 | 
											
												
													
														|  | 
 |  | +        g.element.style.setProperty('opacity', '0.3');
 | 
											
												
													
														|  |        }
 |  |        }
 | 
											
												
													
														|  |      });
 |  |      });
 | 
											
												
													
														|  |    }
 |  |    }
 | 
											
										
											
												
													
														|  | @@ -178,44 +217,44 @@ class ModelContext {
 | 
											
												
													
														|  |      await smokeTunnelMajor.setPoints();
 |  |      await smokeTunnelMajor.setPoints();
 | 
											
												
													
														|  |      this.group?.add(smokeTunnelMajor.points);
 |  |      this.group?.add(smokeTunnelMajor.points);
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -    const fanRightSelectors = [
 |  | 
 | 
											
												
													
														|  | 
 |  | +    const fanLeftSelectors = [
 | 
											
												
													
														|  |        {
 |  |        {
 | 
											
												
													
														|  |          query: '#inputBox2',
 |  |          query: '#inputBox2',
 | 
											
												
													
														|  | -        position: [-70, 0, -15],
 |  | 
 | 
											
												
													
														|  | 
 |  | +        position: [-85, 8, -16],
 | 
											
												
													
														|  |          scale: 0.1,
 |  |          scale: 0.1,
 | 
											
												
													
														|  |        },
 |  |        },
 | 
											
												
													
														|  |        {
 |  |        {
 | 
											
												
													
														|  |          query: '#T1_1',
 |  |          query: '#T1_1',
 | 
											
												
													
														|  | -        position: [100, 15, -42],
 |  | 
 | 
											
												
													
														|  | 
 |  | +        position: [93, 18, -65],
 | 
											
												
													
														|  |          scale: 0.2,
 |  |          scale: 0.2,
 | 
											
												
													
														|  |        },
 |  |        },
 | 
											
												
													
														|  |        {
 |  |        {
 | 
											
												
													
														|  |          query: '#T1_2',
 |  |          query: '#T1_2',
 | 
											
												
													
														|  | -        position: [30, 15, -37],
 |  | 
 | 
											
												
													
														|  | 
 |  | +        position: [35, 16, -59],
 | 
											
												
													
														|  |          scale: 0.175,
 |  |          scale: 0.175,
 | 
											
												
													
														|  |        },
 |  |        },
 | 
											
												
													
														|  |      ];
 |  |      ];
 | 
											
												
													
														|  | -    const fanLeftSelectors = [
 |  | 
 | 
											
												
													
														|  | 
 |  | +    const fanRightSelectors = [
 | 
											
												
													
														|  |        {
 |  |        {
 | 
											
												
													
														|  |          query: '#inputBox3',
 |  |          query: '#inputBox3',
 | 
											
												
													
														|  | -        position: [-70, 0, 36],
 |  | 
 | 
											
												
													
														|  | 
 |  | +        position: [-85, 8, 24],
 | 
											
												
													
														|  |          scale: 0.1,
 |  |          scale: 0.1,
 | 
											
												
													
														|  |        },
 |  |        },
 | 
											
												
													
														|  |        {
 |  |        {
 | 
											
												
													
														|  |          query: '#T2_1',
 |  |          query: '#T2_1',
 | 
											
												
													
														|  | -        position: [110, 15, -80],
 |  | 
 | 
											
												
													
														|  | 
 |  | +        position: [93, 18, -98],
 | 
											
												
													
														|  |          scale: 0.2,
 |  |          scale: 0.2,
 | 
											
												
													
														|  |        },
 |  |        },
 | 
											
												
													
														|  |        {
 |  |        {
 | 
											
												
													
														|  |          query: '#T2_2',
 |  |          query: '#T2_2',
 | 
											
												
													
														|  | -        position: [47, 15, -74],
 |  | 
 | 
											
												
													
														|  | 
 |  | +        position: [35, 16, -92],
 | 
											
												
													
														|  |          scale: 0.175,
 |  |          scale: 0.175,
 | 
											
												
													
														|  |        },
 |  |        },
 | 
											
												
													
														|  |      ];
 |  |      ];
 | 
											
												
													
														|  |      const commonSelectors = [
 |  |      const commonSelectors = [
 | 
											
												
													
														|  |        {
 |  |        {
 | 
											
												
													
														|  |          query: '#T3',
 |  |          query: '#T3',
 | 
											
												
													
														|  | -        position: [-40, 15, -65],
 |  | 
 | 
											
												
													
														|  | 
 |  | +        position: [-26, 14, -86],
 | 
											
												
													
														|  |          scale: 0.15,
 |  |          scale: 0.15,
 | 
											
												
													
														|  |        },
 |  |        },
 | 
											
												
													
														|  |      ];
 |  |      ];
 | 
											
										
											
												
													
														|  | @@ -321,19 +360,16 @@ class ModelContext {
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |    /** 初始化css元素,将css元素选择器传入,该方法会将这些元素按顺序放入传入的锚点中 */
 |  |    /** 初始化css元素,将css元素选择器传入,该方法会将这些元素按顺序放入传入的锚点中 */
 | 
											
												
													
														|  |    initCssElement(selectors: { query: string; position: number[]; scale: number }[]) {
 |  |    initCssElement(selectors: { query: string; position: number[]; scale: number }[]) {
 | 
											
												
													
														|  | -    const arr: CSS3DSprite[] = [];
 |  | 
 | 
											
												
													
														|  | 
 |  | +    const arr: CSS3DObject[] = [];
 | 
											
												
													
														|  |      selectors.forEach(({ query, position, scale }) => {
 |  |      selectors.forEach(({ query, position, scale }) => {
 | 
											
												
													
														|  |        const element = document.querySelector(query) as HTMLElement;
 |  |        const element = document.querySelector(query) as HTMLElement;
 | 
											
												
													
														|  |        if (element) {
 |  |        if (element) {
 | 
											
												
													
														|  | -        const css3D = new CSS3DSprite(element);
 |  | 
 | 
											
												
													
														|  | 
 |  | +        const css3D = new CSS3DObject(element);
 | 
											
												
													
														|  |          this.elements.push(css3D);
 |  |          this.elements.push(css3D);
 | 
											
												
													
														|  |          arr.push(css3D);
 |  |          arr.push(css3D);
 | 
											
												
													
														|  |          css3D.name = query;
 |  |          css3D.name = query;
 | 
											
												
													
														|  |          css3D.scale.set(scale, scale, scale);
 |  |          css3D.scale.set(scale, scale, scale);
 | 
											
												
													
														|  | -        // const ff = gui.addFolder(`css元素${query}`);
 |  | 
 | 
											
												
													
														|  | -        // ff.add(css3D.position, 'x', -100, 100);
 |  | 
 | 
											
												
													
														|  | -        // ff.add(css3D.position, 'y', -100, 100);
 |  | 
 | 
											
												
													
														|  | -        // ff.add(css3D.position, 'z', -100, 100);
 |  | 
 | 
											
												
													
														|  | 
 |  | +        css3D.rotation.y = -Math.PI / 2;
 | 
											
												
													
														|  |          css3D.position.set(position[0], position[1], position[2]);
 |  |          css3D.position.set(position[0], position[1], position[2]);
 | 
											
												
													
														|  |          this.group?.add(css3D);
 |  |          this.group?.add(css3D);
 | 
											
												
													
														|  |        }
 |  |        }
 | 
											
										
											
												
													
														|  | @@ -358,6 +394,7 @@ class ModelContext {
 | 
											
												
													
														|  |          path1,
 |  |          path1,
 | 
											
												
													
														|  |          isSpread: false,
 |  |          isSpread: false,
 | 
											
												
													
														|  |          spreadDirection: 0,
 |  |          spreadDirection: 0,
 | 
											
												
													
														|  | 
 |  | +        spreadRang: -10,
 | 
											
												
													
														|  |        };
 |  |        };
 | 
											
												
													
														|  |        if (airIn) {
 |  |        if (airIn) {
 | 
											
												
													
														|  |          // 首个线段需要扩散,由大变小
 |  |          // 首个线段需要扩散,由大变小
 | 
											
										
											
												
													
														|  | @@ -377,5 +414,142 @@ class ModelContext {
 | 
											
												
													
														|  |      }
 |  |      }
 | 
											
												
													
														|  |      return result;
 |  |      return result;
 | 
											
												
													
														|  |    }
 |  |    }
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  /** 添加风机描述,右侧风机是arr的第一项,左侧风机是第二项 */
 | 
											
												
													
														|  | 
 |  | +  addText(arr) {
 | 
											
												
													
														|  | 
 |  | +    const positions = [
 | 
											
												
													
														|  | 
 |  | +      [-84.79, 0.82, 20.3],
 | 
											
												
													
														|  | 
 |  | +      [-84.79, 0.82, 7.6],
 | 
											
												
													
														|  | 
 |  | +    ];
 | 
											
												
													
														|  | 
 |  | +    arr.forEach((e, i) => {
 | 
											
												
													
														|  | 
 |  | +      this.addTextByData(e, positions[i], `text${i}`);
 | 
											
												
													
														|  | 
 |  | +    });
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  // 从 .fanLocal.threejs.base 复制
 | 
											
												
													
														|  | 
 |  | +  addTextByData(selectData, position, name) {
 | 
											
												
													
														|  | 
 |  | +    if (!this.group) {
 | 
											
												
													
														|  | 
 |  | +      return;
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +    // @ts-ignore
 | 
											
												
													
														|  | 
 |  | +    const screenDownText = get(VENT_PARAM, 'modalText', History_Type['type'] == 'remote' ? '国能神东煤炭集团监制' : '煤炭科学技术研究院有限公司研制');
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +    const screenDownTextX = 80 - (screenDownText.length - 10) * 6;
 | 
											
												
													
														|  | 
 |  | +    const textArr = [
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        text: `智能局部通风机监测与控制系统`,
 | 
											
												
													
														|  | 
 |  | +        font: 'normal 30px Arial',
 | 
											
												
													
														|  | 
 |  | +        color: '#009900',
 | 
											
												
													
														|  | 
 |  | +        strokeStyle: '#002200',
 | 
											
												
													
														|  | 
 |  | +        x: 20,
 | 
											
												
													
														|  | 
 |  | +        y: 108,
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        text: `供风距离(m):`,
 | 
											
												
													
														|  | 
 |  | +        font: 'normal 30px Arial',
 | 
											
												
													
														|  | 
 |  | +        color: '#009900',
 | 
											
												
													
														|  | 
 |  | +        strokeStyle: '#002200',
 | 
											
												
													
														|  | 
 |  | +        x: 0,
 | 
											
												
													
														|  | 
 |  | +        y: 152,
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        text: `${
 | 
											
												
													
														|  | 
 |  | +          selectData.airSupplyDistence_merge
 | 
											
												
													
														|  | 
 |  | +            ? selectData.airSupplyDistence_merge
 | 
											
												
													
														|  | 
 |  | +            : selectData.fchimenylength
 | 
											
												
													
														|  | 
 |  | +            ? selectData.fchimenylength
 | 
											
												
													
														|  | 
 |  | +            : selectData.airSupplyDistence_merge
 | 
											
												
													
														|  | 
 |  | +            ? selectData.airSupplyDistence_merge
 | 
											
												
													
														|  | 
 |  | +            : '-'
 | 
											
												
													
														|  | 
 |  | +        }`,
 | 
											
												
													
														|  | 
 |  | +        font: 'normal 30px Arial',
 | 
											
												
													
														|  | 
 |  | +        color: '#009900',
 | 
											
												
													
														|  | 
 |  | +        strokeStyle: '#002200',
 | 
											
												
													
														|  | 
 |  | +        x: 228,
 | 
											
												
													
														|  | 
 |  | +        y: 152,
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        text: `风筒直径(mm): `,
 | 
											
												
													
														|  | 
 |  | +        font: 'normal 30px Arial',
 | 
											
												
													
														|  | 
 |  | +        color: '#009900',
 | 
											
												
													
														|  | 
 |  | +        strokeStyle: '#002200',
 | 
											
												
													
														|  | 
 |  | +        x: 0,
 | 
											
												
													
														|  | 
 |  | +        y: 200,
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        text: ` ${selectData.fchimenydiamlimit ? selectData.fchimenydiamlimit : selectData.ductDiameter_merge ? selectData.ductDiameter_merge : '-'}`,
 | 
											
												
													
														|  | 
 |  | +        font: 'normal 30px Arial',
 | 
											
												
													
														|  | 
 |  | +        color: '#009900',
 | 
											
												
													
														|  | 
 |  | +        strokeStyle: '#002200',
 | 
											
												
													
														|  | 
 |  | +        x: 220,
 | 
											
												
													
														|  | 
 |  | +        y: 200,
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        text: `故障诊断:`,
 | 
											
												
													
														|  | 
 |  | +        font: 'normal 30px Arial',
 | 
											
												
													
														|  | 
 |  | +        color: '#009900',
 | 
											
												
													
														|  | 
 |  | +        strokeStyle: '#002200',
 | 
											
												
													
														|  | 
 |  | +        x: 0,
 | 
											
												
													
														|  | 
 |  | +        y: 245,
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
 | 
											
												
													
														|  | 
 |  | +        font: 'normal 30px Arial',
 | 
											
												
													
														|  | 
 |  | +        color: '#009900',
 | 
											
												
													
														|  | 
 |  | +        strokeStyle: '#002200',
 | 
											
												
													
														|  | 
 |  | +        x: 220,
 | 
											
												
													
														|  | 
 |  | +        y: 245,
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        text: `型号功率:`,
 | 
											
												
													
														|  | 
 |  | +        font: 'normal 30px Arial',
 | 
											
												
													
														|  | 
 |  | +        color: '#009900',
 | 
											
												
													
														|  | 
 |  | +        strokeStyle: '#002200',
 | 
											
												
													
														|  | 
 |  | +        x: 0,
 | 
											
												
													
														|  | 
 |  | +        y: 285,
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        text: `${selectData.model_Power_merge ? selectData.model_Power_merge : '-'}`,
 | 
											
												
													
														|  | 
 |  | +        font: 'normal 26px Arial',
 | 
											
												
													
														|  | 
 |  | +        color: '#009900',
 | 
											
												
													
														|  | 
 |  | +        strokeStyle: '#002200',
 | 
											
												
													
														|  | 
 |  | +        x: 220,
 | 
											
												
													
														|  | 
 |  | +        y: 285,
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        text: screenDownText,
 | 
											
												
													
														|  | 
 |  | +        font: 'normal 28px Arial',
 | 
											
												
													
														|  | 
 |  | +        color: '#009900',
 | 
											
												
													
														|  | 
 |  | +        strokeStyle: '#002200',
 | 
											
												
													
														|  | 
 |  | +        x: screenDownTextX,
 | 
											
												
													
														|  | 
 |  | +        y: 325,
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +    ];
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
 | 
											
												
													
														|  | 
 |  | +      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
 | 
											
												
													
														|  | 
 |  | +      const textMaterial = new THREE.MeshBasicMaterial({
 | 
											
												
													
														|  | 
 |  | +        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
 | 
											
												
													
														|  | 
 |  | +        map: textMap, // 设置纹理贴图
 | 
											
												
													
														|  | 
 |  | +        transparent: true,
 | 
											
												
													
														|  | 
 |  | +        side: THREE.FrontSide, // 这里是双面渲染的意思
 | 
											
												
													
														|  | 
 |  | +      });
 | 
											
												
													
														|  | 
 |  | +      textMaterial.blending = THREE.CustomBlending;
 | 
											
												
													
														|  | 
 |  | +      const monitorPlane = this.group?.getObjectByName(name);
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +      if (monitorPlane) {
 | 
											
												
													
														|  | 
 |  | +        // @ts-ignore-next-line
 | 
											
												
													
														|  | 
 |  | +        monitorPlane.material = textMaterial;
 | 
											
												
													
														|  | 
 |  | +      } else {
 | 
											
												
													
														|  | 
 |  | +        const planeGeometry = new THREE.PlaneGeometry(526, 346); // 平面3维几何体PlaneGeometry
 | 
											
												
													
														|  | 
 |  | +        const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
 | 
											
												
													
														|  | 
 |  | +        planeMesh.name = name;
 | 
											
												
													
														|  | 
 |  | +        planeMesh.scale.set(0.0135, 0.0135, 0.0135);
 | 
											
												
													
														|  | 
 |  | +        planeMesh.rotation.y = -Math.PI / 2;
 | 
											
												
													
														|  | 
 |  | +        planeMesh.position.set(position[0], position[1], position[2]);
 | 
											
												
													
														|  | 
 |  | +        this.group?.add(planeMesh);
 | 
											
												
													
														|  | 
 |  | +      }
 | 
											
												
													
														|  | 
 |  | +    });
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  |  }
 |  |  }
 | 
											
												
													
														|  |  export default ModelContext;
 |  |  export default ModelContext;
 |