|
|
@@ -0,0 +1,251 @@
|
|
|
+import * as THREE from 'three';
|
|
|
+import { getTextCanvas } from '/@/utils/threejs/util';
|
|
|
+import gsap from 'gsap';
|
|
|
+
|
|
|
+class ddFc_lt {
|
|
|
+ model;
|
|
|
+ modelName = 'ddFc';
|
|
|
+ group: THREE.Object3D = new THREE.Object3D();
|
|
|
+ animationTimer;
|
|
|
+ isLRAnimation = true;
|
|
|
+ direction = 1;
|
|
|
+ windowsActionArr = {
|
|
|
+ frontWindow: [],
|
|
|
+ };
|
|
|
+ player1;
|
|
|
+ player2;
|
|
|
+ playerStartClickTime1 = new Date().getTime();
|
|
|
+ constructor(model) {
|
|
|
+ this.model = model;
|
|
|
+ this.group.name = 'ddFc';
|
|
|
+ }
|
|
|
+ addLight = () => {
|
|
|
+ if (!this.group || !this.group) return;
|
|
|
+
|
|
|
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
|
|
|
+ directionalLight.position.set(-437, 61, 559);
|
|
|
+ this.group.add(directionalLight);
|
|
|
+
|
|
|
+ const pointLight2 = new THREE.PointLight(0xffffff, 1, 150);
|
|
|
+ pointLight2.position.set(-101, 34, 16);
|
|
|
+ pointLight2.shadow.bias = 0.05;
|
|
|
+ this.group.add(pointLight2);
|
|
|
+
|
|
|
+ const pointLight3 = new THREE.PointLight(0xffffff, 1, 150);
|
|
|
+ pointLight3.position.set(19, 25, -7);
|
|
|
+ pointLight3.shadow.bias = 0.05;
|
|
|
+ this.group.add(pointLight3);
|
|
|
+
|
|
|
+ const pointLight6 = new THREE.PointLight(0xffffff, 1, 300);
|
|
|
+ pointLight6.position.set(51, 51, 9);
|
|
|
+ pointLight6.shadow.bias = 0.05;
|
|
|
+ this.group.add(pointLight6);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 设置模型位置
|
|
|
+ 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 = 90 - (screenDownText.length - 10) * 6;
|
|
|
+ const textArr = [
|
|
|
+ {
|
|
|
+ text: `远程定量调节自动风窗`,
|
|
|
+ font: 'normal 30px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 100,
|
|
|
+ y: 95,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: `${selectData.OpenDegree ? '开度值(°)' : selectData.forntArea ? '过风面积(㎡)' : '过风面积(㎡)'}:`,
|
|
|
+ font: 'normal 30px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 5,
|
|
|
+ y: 145,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: selectData.OpenDegree
|
|
|
+ ? Number(`${selectData.OpenDegree}`).toFixed(2)
|
|
|
+ : selectData.forntArea
|
|
|
+ ? Number(`${selectData.forntArea}`).toFixed(2)
|
|
|
+ : '-',
|
|
|
+ font: 'normal 30px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 330,
|
|
|
+ y: 145,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: `${selectData.frontRearDP ? '风窗压差(Pa)' : selectData.windSpeed ? '风速(m/s)' : '通信状态：'}:`,
|
|
|
+ font: 'normal 30px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 5,
|
|
|
+ y: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: `${
|
|
|
+ selectData.frontRearDP
|
|
|
+ ? selectData.frontRearDP
|
|
|
+ : selectData.windSpeed
|
|
|
+ ? selectData.windSpeed
|
|
|
+ : selectData.netStatus == '0'
|
|
|
+ ? '断开'
|
|
|
+ : '连接'
|
|
|
+ }`,
|
|
|
+ font: 'normal 30px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 330,
|
|
|
+ y: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: `${selectData.fWindowM3 ? '过风量(m³/min)' : '风窗道数'}: `,
|
|
|
+ font: 'normal 30px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 5,
|
|
|
+ y: 250,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: `${selectData.fWindowM3 ? selectData.fWindowM3 : selectData.nwindownum}`,
|
|
|
+ font: 'normal 30px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 330,
|
|
|
+ y: 250,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: screenDownText,
|
|
|
+ font: 'normal 28px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: screenDownTextX,
|
|
|
+ y: 300,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ getTextCanvas(750, 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(526, 346); // 平面3维几何体PlaneGeometry
|
|
|
+ const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
|
|
|
+ planeMesh.name = 'monitorText';
|
|
|
+ planeMesh.scale.set(0.003, 0.0034, 0.004);
|
|
|
+ planeMesh.position.set(4.25, 0.44, -0.27);
|
|
|
+ this.group?.add(planeMesh);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 提取风门序列帧，初始化前后门动画 */
|
|
|
+ initAnimation() {
|
|
|
+ const meshArr01: THREE.Mesh[] = [];
|
|
|
+ const fcGroup = this.group?.getObjectByName('FengChuang_DaLiuTa')?.getObjectByName('FengChuang_DaLiuTa_1')?.getObjectByName('FengChuang_1_17');
|
|
|
+ if (fcGroup) {
|
|
|
+ fcGroup.children.filter((item: THREE.Mesh) => {
|
|
|
+ item.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
|
|
|
+ meshArr01.push(item);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.windowsActionArr.frontWindow = meshArr01;
|
|
|
+ }
|
|
|
+
|
|
|
+ play(rotationParam, flag) {
|
|
|
+ if (!this.windowsActionArr.frontWindow) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (flag === 1) {
|
|
|
+ // 前风窗动画
|
|
|
+ this.windowsActionArr.frontWindow.forEach((mesh: THREE.Mesh) => {
|
|
|
+ gsap.to(mesh.rotation, {
|
|
|
+ z: THREE.MathUtils.degToRad(rotationParam.frontDeg1),
|
|
|
+ duration: (1 / 9) * Math.abs(rotationParam.frontDeg1 - mesh.rotation.z),
|
|
|
+ overwrite: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else if (flag === 0) {
|
|
|
+ ([...this.windowsActionArr.frontWindow] as THREE.Mesh[]).forEach((mesh) => {
|
|
|
+ gsap.to(mesh.rotation, {
|
|
|
+ z: THREE.MathUtils.degToRad(90),
|
|
|
+ overwrite: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 点击风窗，风窗全屏 */
|
|
|
+ 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() {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ this.model.setGLTFModel('ddFc-lt').then((gltf) => {
|
|
|
+ this.group = gltf[0];
|
|
|
+ this.group.name = this.modelName;
|
|
|
+ this.setModalPosition();
|
|
|
+ this.initAnimation();
|
|
|
+ resolve(null);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ destroy() {
|
|
|
+ this.model.clearGroup(this.group);
|
|
|
+ this.windowsActionArr.frontWindow = undefined;
|
|
|
+ this.model = null;
|
|
|
+ this.group = null;
|
|
|
+ }
|
|
|
+}
|
|
|
+export default ddFc_lt;
|
hongrunxia