dedust.threejs.base.ts 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. import * as THREE from 'three';
  2. // import { setModalCenter } from '/@/utils/threejs/util';
  3. import Smoke from '/@/views/vent/comment/threejs/Smoke';
  4. // import * as dat from 'dat.gui';
  5. // const gui = new dat.GUI();
  6. // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
  7. class WorkFace {
  8. model;
  9. modelName = 'tunFace';
  10. group: THREE.Object3D | null = null;
  11. inSmoke: Smoke | null = null;
  12. outSmoke: Smoke | null = null;
  13. constructor(model) {
  14. this.model = model;
  15. }
  16. addLight() {
  17. const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
  18. directionalLight.position.set(6.3, 28, 20);
  19. this.group?.add(directionalLight);
  20. directionalLight.target = this.group as THREE.Object3D;
  21. const pointLight = new THREE.PointLight(0xffffff, 1, 1000);
  22. pointLight.position.set(45, 51, -4.1);
  23. pointLight.shadow.bias = 0.05;
  24. this.model.scene.add(pointLight);
  25. // gui.add(directionalLight.position, 'x', -100, 100);
  26. // gui.add(directionalLight.position, 'y', -100, 100);
  27. // gui.add(directionalLight.position, 'z', -100, 100);
  28. }
  29. addChamberText() {
  30. //
  31. }
  32. initFly = async () => {
  33. const inCurve = [
  34. {
  35. path0: new THREE.Vector3(-15.134, 3.734, -3.485),
  36. path1: new THREE.Vector3(-17.13, 3.734, -3.485),
  37. isSpread: false,
  38. spreadDirection: 0,
  39. },
  40. {
  41. path0: new THREE.Vector3(-17.13, 3.734, -3.485),
  42. path1: new THREE.Vector3(-19.518, 3.075, 2.071),
  43. isSpread: true,
  44. spreadDirection: 1, // 1是由小变大,-1是由大变小
  45. },
  46. ];
  47. const outCurve = [
  48. {
  49. path0: new THREE.Vector3(-31.51, 3.075, 2.071),
  50. path1: new THREE.Vector3(-26.51, 3.075, 2.071),
  51. isSpread: true,
  52. spreadDirection: -1,
  53. },
  54. {
  55. path0: new THREE.Vector3(-26.51, 3.075, 2.071),
  56. path1: new THREE.Vector3(-24.514, 3.075, 2.071),
  57. isSpread: false,
  58. spreadDirection: 0, // 1是由小变大,-1是由大变小
  59. },
  60. ];
  61. if (!this.inSmoke) {
  62. this.inSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.5, 0.5, 30);
  63. this.inSmoke.setPath(inCurve);
  64. await this.inSmoke.setPoints();
  65. this.group?.add(this.inSmoke.points);
  66. }
  67. if (!this.outSmoke) {
  68. this.outSmoke = new Smoke('/model/img/texture-smoke.png', '#333333', 0, 1, 0.8, 20);
  69. this.outSmoke.setPath(outCurve);
  70. await this.outSmoke.setPoints();
  71. this.group?.add(this.outSmoke.points);
  72. }
  73. this.inSmoke.startSmoke(1);
  74. this.outSmoke.startSmoke(1);
  75. };
  76. clearFly = () => {
  77. if (this.inSmoke) this.inSmoke.clearSmoke();
  78. if (this.outSmoke) this.outSmoke.clearSmoke();
  79. };
  80. mountedThree() {
  81. return new Promise((resolve) => {
  82. this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
  83. this.group = gltf[0];
  84. if (this.group) {
  85. resolve(null);
  86. this.addLight();
  87. await this.initFly();
  88. }
  89. });
  90. });
  91. }
  92. destroy() {
  93. if (this.model) {
  94. this.clearFly();
  95. this.model.clearGroup(this.group);
  96. this.model = null;
  97. this.group = null;
  98. this.inSmoke = null;
  99. this.outSmoke = null;
  100. }
  101. }
  102. }
  103. export default WorkFace;