|
|
@@ -0,0 +1,339 @@
|
|
|
+import * as THREE from 'three';
|
|
|
+import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
|
|
|
+import gsap from 'gsap';
|
|
|
+
|
|
|
+class doubleWindow {
|
|
|
+ model;
|
|
|
+ modelName = 'sdFc';
|
|
|
+ group: THREE.Object3D = new THREE.Object3D();
|
|
|
+ animationTimer;
|
|
|
+ direction = 1;
|
|
|
+ fontMixers1: THREE.AnimationMixer | null = null;
|
|
|
+ fontMixers2: THREE.AnimationMixer | null = null;
|
|
|
+ backMixers1: THREE.AnimationMixer | null = null;
|
|
|
+ backMixers2: THREE.AnimationMixer | null = null;
|
|
|
+ frontClipWindow1: THREE.AnimationClip | null = null;
|
|
|
+ frontClipWindow2: THREE.AnimationClip | null = null;
|
|
|
+ backClipWindow1: THREE.AnimationClip | null = null;
|
|
|
+ backClipWindow2: THREE.AnimationClip | null = null;
|
|
|
+ windowsActionArr = {
|
|
|
+ frontWindow1: <THREE.AnimationAction | null>null,
|
|
|
+ frontWindow2: <THREE.AnimationAction | null>null,
|
|
|
+ backWindow1: <THREE.AnimationAction | null>null,
|
|
|
+ backWindow2: <THREE.AnimationAction | null>null,
|
|
|
+ };
|
|
|
+ constructor(model) {
|
|
|
+ this.model = model;
|
|
|
+ // this.group.name = 'ddFc';
|
|
|
+ }
|
|
|
+ // // 重置摄像头
|
|
|
+ // const resetCamera = () => {
|
|
|
+ // this.model.camera.position.set(30.328, 58.993, 148.315);
|
|
|
+ // this.model.camera.rotation.set(-27.88, 14.35, 7.47);
|
|
|
+ // this.model.orbitControls?.update();
|
|
|
+ // this.model.camera.updateProjectionMatrix();
|
|
|
+ // };
|
|
|
+
|
|
|
+ addLight = () => {};
|
|
|
+
|
|
|
+ // 设置模型位置
|
|
|
+ setModalPosition() {
|
|
|
+ this.group?.scale.set(22, 22, 22);
|
|
|
+ this.group?.position.set(-35, 25, 15);
|
|
|
+ }
|
|
|
+
|
|
|
+ addMonitorText(selectData) {
|
|
|
+ if (!this.group) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const screenDownText = VENT_PARAM['modalText']
|
|
|
+ ? VENT_PARAM['modalText']
|
|
|
+ : History_Type['type'] == 'remote'
|
|
|
+ ? `国能神东煤炭集团监制`
|
|
|
+ : '煤炭科学技术研究院有限公司研制';
|
|
|
+
|
|
|
+ const screenDownTextX = 125 - (screenDownText.length - 10) * 10;
|
|
|
+ const textArr = [
|
|
|
+ {
|
|
|
+ text: `远程定量调节自动风窗`,
|
|
|
+ font: 'normal 30px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 120,
|
|
|
+ y: 90,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: `${selectData.OpenDegree1 ? '前窗开度值(°)' : selectData.forntArea ? '前窗过风面积(㎡)' : '前窗过风面积(㎡)'}:`,
|
|
|
+ font: 'normal 30px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 5,
|
|
|
+ y: 145,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: selectData.OpenDegree1
|
|
|
+ ? Number(`${selectData.OpenDegree1}`).toFixed(2)
|
|
|
+ : selectData.forntArea
|
|
|
+ ? Number(`${selectData.forntArea}`).toFixed(2)
|
|
|
+ : '-',
|
|
|
+ font: 'normal 30px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 330,
|
|
|
+ y: 145,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: `${selectData.OpenDegree2 ? '后窗开度值(°)' : selectData.forntArea ? '后窗过风面积(㎡)' : '后窗过风面积(㎡)'}:`,
|
|
|
+ font: 'normal 30px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 5,
|
|
|
+ y: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: selectData.OpenDegree2
|
|
|
+ ? Number(`${selectData.OpenDegree2}`).toFixed(2)
|
|
|
+ : selectData.rearArea
|
|
|
+ ? Number(`${selectData.rearArea}`).toFixed(2)
|
|
|
+ : '-',
|
|
|
+ font: 'normal 30px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 330,
|
|
|
+ y: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: `${selectData.frontRearDP ? '风窗压差(Pa)' : selectData.windSpeed ? '风速(m/s)' : '通信状态'}:`,
|
|
|
+ font: 'normal 30px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 5,
|
|
|
+ y: 256,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: `${
|
|
|
+ selectData.frontRearDP
|
|
|
+ ? selectData.frontRearDP
|
|
|
+ : selectData.windSpeed
|
|
|
+ ? selectData.windSpeed
|
|
|
+ : selectData.netStatus == '0'
|
|
|
+ ? '断开'
|
|
|
+ : '连接'
|
|
|
+ }`,
|
|
|
+ font: 'normal 30px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 330,
|
|
|
+ y: 256,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: screenDownText,
|
|
|
+ font: 'normal 28px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: screenDownTextX,
|
|
|
+ y: 303,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ getTextCanvas(726, 546, textArr, '').then((canvas: HTMLCanvasElement) => {
|
|
|
+ const textMap = new THREE.CanvasTexture(canvas); // 关键一步
|
|
|
+ const textMaterial = new THREE.MeshBasicMaterial({
|
|
|
+ // 关于材质并未讲解 实操即可熟悉 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
|
|
|
+ map: textMap, // 设置纹理贴图
|
|
|
+ transparent: true,
|
|
|
+ side: THREE.DoubleSide, // 这里是双面渲染的意思
|
|
|
+ });
|
|
|
+ textMap.dispose();
|
|
|
+ textMaterial.blending = THREE.CustomBlending;
|
|
|
+ const monitorPlane = this.group?.getObjectByName('monitorText');
|
|
|
+ if (monitorPlane) {
|
|
|
+ monitorPlane.material = textMaterial;
|
|
|
+ } else {
|
|
|
+ const planeGeometry = new THREE.PlaneGeometry(726, 546); // 平面3维几何体PlaneGeometry
|
|
|
+ const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
|
|
|
+ planeMesh.name = 'monitorText';
|
|
|
+ planeMesh.scale.set(0.002, 0.002, 0.002);
|
|
|
+ planeMesh.position.set(4.19, 0.448, -0.27);
|
|
|
+ this.group?.add(planeMesh);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 提取风门序列帧，初始化前后门动画 */
|
|
|
+ initAnimation() {
|
|
|
+ const fcGroup = this.group?.getObjectByName('ShuangDaoTiaoJieFengChuang_1');
|
|
|
+ if (fcGroup) {
|
|
|
+ const tracks = fcGroup.animations[0].tracks;
|
|
|
+ const fontTracks1: any[] = [],
|
|
|
+ fontTracks2: any[] = [],
|
|
|
+ backTracks1: any[] = [],
|
|
|
+ backTracks2: any[] = [];
|
|
|
+ for (let i = 0; i < tracks.length; i++) {
|
|
|
+ const track = tracks[i];
|
|
|
+ if (track.name.startsWith('juan_1')) {
|
|
|
+ fontTracks1.push(track);
|
|
|
+ } else if (track.name.startsWith('juan_2')) {
|
|
|
+ fontTracks2.push(track);
|
|
|
+ } else if (track.name.startsWith('juan_3')) {
|
|
|
+ backTracks1.push(track);
|
|
|
+ } else if (track.name.startsWith('juan_4')) {
|
|
|
+ backTracks2.push(track);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const fontGroup1 = fcGroup.getObjectByName('FengChuang_1')?.getObjectByName('ske_1');
|
|
|
+ const fontGroup2 = fcGroup.getObjectByName('FengChuang_1')?.getObjectByName('ske_2');
|
|
|
+ const backGroup1 = fcGroup.getObjectByName('FengChuang_2')?.getObjectByName('ske_3');
|
|
|
+ const backGroup2 = fcGroup.getObjectByName('FengChuang_2')?.getObjectByName('ske_4');
|
|
|
+ if (fontGroup1 && fontGroup2 && backGroup1 && backGroup2) {
|
|
|
+ this.fontMixers1 = new THREE.AnimationMixer(fontGroup1);
|
|
|
+ this.fontMixers2 = new THREE.AnimationMixer(fontGroup1);
|
|
|
+ this.backMixers1 = new THREE.AnimationMixer(backGroup1);
|
|
|
+ this.backMixers2 = new THREE.AnimationMixer(backGroup2);
|
|
|
+
|
|
|
+ this.frontClipWindow1 = new THREE.AnimationClip('frontWindow1', 22, fontTracks1);
|
|
|
+ const frontClipAction1 = this.fontMixers1.clipAction(this.frontClipWindow1, fontGroup1);
|
|
|
+ frontClipAction1.clampWhenFinished = true;
|
|
|
+ frontClipAction1.loop = THREE.LoopOnce;
|
|
|
+ this.windowsActionArr.frontWindow1 = frontClipAction1;
|
|
|
+
|
|
|
+ this.frontClipWindow2 = new THREE.AnimationClip('frontWindow2', 22, fontTracks2);
|
|
|
+ const frontClipAction2 = this.fontMixers2.clipAction(this.frontClipWindow2, fontGroup2);
|
|
|
+ frontClipAction2.clampWhenFinished = true;
|
|
|
+ frontClipAction2.loop = THREE.LoopOnce;
|
|
|
+ this.windowsActionArr.frontWindow1 = frontClipAction2;
|
|
|
+
|
|
|
+ this.backClipWindow1 = new THREE.AnimationClip('backWindow1', 22, backTracks1);
|
|
|
+ const backClipAction1 = this.backMixers1.clipAction(this.backClipWindow1, backGroup1);
|
|
|
+ backClipAction1.clampWhenFinished = true;
|
|
|
+ backClipAction1.loop = THREE.LoopOnce;
|
|
|
+ this.windowsActionArr.backWindow1 = backClipAction1;
|
|
|
+
|
|
|
+ this.backClipWindow2 = new THREE.AnimationClip('backWindow1', 22, backTracks2);
|
|
|
+ const backClipAction2 = this.backMixers2.clipAction(this.backClipWindow2, backGroup2);
|
|
|
+ backClipAction2.clampWhenFinished = true;
|
|
|
+ backClipAction2.loop = THREE.LoopOnce;
|
|
|
+ this.windowsActionArr.backWindow1 = backClipAction2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ play(handlerState, timeScale = 0.01) {
|
|
|
+ let handler = () => {};
|
|
|
+ if (
|
|
|
+ this.windowsActionArr.frontWindow1 &&
|
|
|
+ this.windowsActionArr.frontWindow2 &&
|
|
|
+ this.windowsActionArr.backWindow1 &&
|
|
|
+ this.windowsActionArr.backWindow2
|
|
|
+ ) {
|
|
|
+ switch (handlerState) {
|
|
|
+ case 1: // 窗1开启动画
|
|
|
+ handler = () => {
|
|
|
+ const frontWindow1 = this.windowsActionArr.frontWindow1;
|
|
|
+ if (frontWindow1 && this.frontClipWindow1) {
|
|
|
+ frontWindow1.paused = true;
|
|
|
+ frontWindow1.reset();
|
|
|
+ this.frontClipWindow1.duration = 0;
|
|
|
+ frontWindow1.time = 1.8;
|
|
|
+ frontWindow1.timeScale = timeScale;
|
|
|
+ frontWindow1.play();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ break;
|
|
|
+ case 2: // 窗2开启动画
|
|
|
+ handler = () => {
|
|
|
+ const frontWindow2 = this.windowsActionArr.frontWindow2;
|
|
|
+ if (frontWindow2) {
|
|
|
+ frontWindow2.paused = true;
|
|
|
+ frontWindow2.reset();
|
|
|
+ frontWindow2.time = 4;
|
|
|
+ frontWindow2.timeScale = -timeScale;
|
|
|
+ frontWindow2.play();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ break;
|
|
|
+ case 3: // 窗3开启动画
|
|
|
+ handler = () => {
|
|
|
+ const backWindow1 = this.windowsActionArr.backWindow1;
|
|
|
+ if (backWindow1) {
|
|
|
+ backWindow1.paused = true;
|
|
|
+ backWindow1.reset();
|
|
|
+ backWindow1.time = 1.2;
|
|
|
+ backWindow1.timeScale = timeScale;
|
|
|
+ backWindow1.play();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ break;
|
|
|
+ case 4: // 窗4开启动画
|
|
|
+ handler = () => {
|
|
|
+ const backWindow2 = this.windowsActionArr.backWindow2;
|
|
|
+ if (backWindow2) {
|
|
|
+ backWindow2.paused = true;
|
|
|
+ backWindow2.reset();
|
|
|
+ backWindow2.time = 4;
|
|
|
+ backWindow2.timeScale = -timeScale;
|
|
|
+ backWindow2.play();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ }
|
|
|
+ handler();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 点击风窗，风窗全屏 */
|
|
|
+ mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
|
|
|
+ if (this.animationTimer) {
|
|
|
+ clearTimeout(this.animationTimer);
|
|
|
+ this.animationTimer = null;
|
|
|
+ }
|
|
|
+ // 判断是否点击到视频
|
|
|
+ intersects.find((intersect) => {
|
|
|
+ const mesh = intersect.object;
|
|
|
+ if (mesh.name === 'player1') {
|
|
|
+ if (new Date().getTime() - this.playerStartClickTime1 < 400) {
|
|
|
+ // 双击，视频放大
|
|
|
+ if (this.player1) {
|
|
|
+ this.player1.requestFullscreen();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.playerStartClickTime1 = new Date().getTime();
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ mouseUpModel() {}
|
|
|
+
|
|
|
+ /* 风门动画 */
|
|
|
+ render() {
|
|
|
+ if (!this.model) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ mountedThree(playerDom) {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ this.model.setGLTFModel('sdFc-jz').then((gltf) => {
|
|
|
+ console.log('gltf', gltf);
|
|
|
+ const fcModal = gltf[0];
|
|
|
+ fcModal.name = 'sdFc';
|
|
|
+ this.group?.add(fcModal);
|
|
|
+ this.setModalPosition();
|
|
|
+ this.initAnimation();
|
|
|
+ this.addLight();
|
|
|
+ resolve(null);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ destroy() {
|
|
|
+ this.model.clearGroup(this.group);
|
|
|
+ this.windowsActionArr.frontWindow = undefined;
|
|
|
+ this.model = null;
|
|
|
+ this.group = null;
|
|
|
+ }
|
|
|
+}
|
|
|
+export default doubleWindow;
|
hongrunxia