salary-management-oneself/src/lib/three/Viewer/index.ts

import { AxesHelper, Camera, PerspectiveCamera, Scene, WebGLRenderer } from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

export type Animate = {
  fun: (arg: any) => any;
  content: any;
};
export default class Viewer {
  public id: string;
  public viewerDom!: HTMLElement;
  public renderer!: WebGLRenderer;
  public scene!: Scene;
  public camera!: PerspectiveCamera;
  public controls!: OrbitControls;
  public isDestroy = false; // 是否销毁
  public animateEventList = new Map();

  constructor(id: string) {
    this.id = id;
    this.initViewer();
  }

  private initViewer() {
    this.initRender();
    this.initScene();
    this.initCamera();
    this.initControl();

    const animate = () => {
      if (this.isDestroy) return;
      requestAnimationFrame(animate);
      this.updateDom();
      this.renderDom();

      // 全局的公共动画函数，添加函数可同步执行
      this.animateEventList.forEach((event) => {
        if (event.fun && event.content) event.fun(event.content);
      });
    };
    animate();
  }

  private initRender() {
    // 获取画布dom
    this.viewerDom = document.getElementById(this.id) as HTMLElement;
    this.renderer = new WebGLRenderer({ antialias: true });

    this.viewerDom.appendChild(this.renderer.domElement);
  }

  // 创建场景
  private initScene() {
    this.scene = new Scene();
  }

  private initControl() {
    this.controls = new OrbitControls(this.camera as Camera, this.renderer?.domElement);

    this.controls.enableDamping = false;
    this.controls.screenSpacePanning = false;
    this.controls.minDistance = 2;
    this.controls.maxDistance = 1000;
  }

  // 初始化相机
  public initCamera() {
    this.camera = new PerspectiveCamera(75, this.viewerDom.clientWidth / this.viewerDom.clientHeight, 0.1, 1000);
    this.camera.position.set(5, 5, 10);
    this.camera.lookAt(0, 0, 0);
  }

  //创建坐标轴辅助对象
  public addAxis() {
    const axis = new AxesHelper(1000);
    this.scene?.add(axis);
  }

  // 添加动画事件
  public addAnimate(id: string, animate: Animate) {
    this.animateEventList.set(id, animate);
  }

  // 根据传入的id，删除动画事件列表中的对应事件
  public removeAnimate(id: string) {
    this.animateEventList?.delete(id);
  }

  // 更新参数
  public updateDom() {
    this.camera.aspect = this.viewerDom.clientWidth / this.viewerDom.clientHeight; // 摄像机视锥体的长宽比，通常是使用画布的宽/画布的高
    this.camera.updateProjectionMatrix(); // 更新摄像机投影矩阵。在任何参数被改变以后必须被调用,来使得这些改变生效
    this.renderer.setSize(this.viewerDom.clientWidth, this.viewerDom.clientHeight);
    this.renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比
  }

  // 渲染dom
  public renderDom() {
    this.renderer?.render(this.scene as Scene, this.camera as Camera);
  }
}