| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- import * as THREE from 'three';
- // import { setModalCenter } from '/@/utils/threejs/util';
- import Smoke from '/@/views/vent/comment/threejs/Smoke';
- // import * as dat from 'dat.gui';
- // const gui = new dat.GUI();
- // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
- class WorkFace {
- model;
- modelName = 'tunFace';
- group: THREE.Object3D | null = null;
- inSmoke: Smoke | null = null;
- outSmoke: Smoke | null = null;
- constructor(model) {
- this.model = model;
- }
- addLight() {
- const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
- directionalLight.position.set(6.3, 28, 20);
- this.group?.add(directionalLight);
- directionalLight.target = this.group as THREE.Object3D;
- const pointLight = new THREE.PointLight(0xffffff, 1, 1000);
- pointLight.position.set(45, 51, -4.1);
- pointLight.shadow.bias = 0.05;
- this.model.scene.add(pointLight);
- // gui.add(directionalLight.position, 'x', -100, 100);
- // gui.add(directionalLight.position, 'y', -100, 100);
- // gui.add(directionalLight.position, 'z', -100, 100);
- }
- addChamberText() {
- //
- }
- initFly = async () => {
- const inCurve = [
- {
- path0: new THREE.Vector3(-15.134, 3.734, -3.485),
- path1: new THREE.Vector3(-17.13, 3.734, -3.485),
- isSpread: false,
- spreadDirection: 0,
- },
- {
- path0: new THREE.Vector3(-17.13, 3.734, -3.485),
- path1: new THREE.Vector3(-19.518, 3.075, 2.071),
- isSpread: true,
- spreadDirection: 1, // 1是由小变大,-1是由大变小
- },
- ];
- const outCurve = [
- {
- path0: new THREE.Vector3(-31.51, 3.075, 2.071),
- path1: new THREE.Vector3(-26.51, 3.075, 2.071),
- isSpread: true,
- spreadDirection: -1,
- },
- {
- path0: new THREE.Vector3(-26.51, 3.075, 2.071),
- path1: new THREE.Vector3(-24.514, 3.075, 2.071),
- isSpread: false,
- spreadDirection: 0, // 1是由小变大,-1是由大变小
- },
- ];
- if (!this.inSmoke) {
- this.inSmoke = new Smoke('/model/img/texture-smoke.png', '#ffffff', 0, 0.5, 0.5, 30);
- this.inSmoke.setPath(inCurve);
- await this.inSmoke.setPoints();
- this.group?.add(this.inSmoke.points);
- }
- if (!this.outSmoke) {
- this.outSmoke = new Smoke('/model/img/texture-smoke.png', '#333333', 0, 1, 0.8, 20);
- this.outSmoke.setPath(outCurve);
- await this.outSmoke.setPoints();
- this.group?.add(this.outSmoke.points);
- }
- this.inSmoke.startSmoke(1);
- this.outSmoke.startSmoke(1);
- };
- clearFly = () => {
- if (this.inSmoke) this.inSmoke.clearSmoke();
- if (this.outSmoke) this.outSmoke.clearSmoke();
- };
- mountedThree() {
- return new Promise((resolve) => {
- this.model.setGLTFModel([this.modelName]).then(async (gltf) => {
- this.group = gltf[0];
- if (this.group) {
- resolve(null);
- this.addLight();
- await this.initFly();
- }
- });
- });
- }
- destroy() {
- if (this.model) {
- this.clearFly();
- this.model.clearGroup(this.group);
- this.model = null;
- this.group = null;
- this.inSmoke = null;
- this.outSmoke = null;
- }
- }
- }
- export default WorkFace;
|