123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564 |
- import * as THREE from 'three';
- import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
- import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
- import UseThree from '../../../../utils/threejs/useThree';
- import { drawHot } from '/@/utils/threejs/util';
- import { useAppStore } from '/@/store/modules/app';
- // import * as dat from 'dat.gui';
- // const gui = new dat.GUI();
- // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
- class Fm1 {
- modelName = 'fm1';
- model; //
- group;
- isLRAnimation = true; // 是否开启左右摇摆动画
- direction = 1; // 摇摆方向
- animationTimer: NodeJS.Timeout | null = null; // 摇摆开启定时器
- player1;
- player2;
- deviceDetailCSS3D;
- playerStartClickTime1 = new Date().getTime();
- playerStartClickTime2 = new Date().getTime();
- fmClock = new THREE.Clock();
- mixers: THREE.AnimationMixer | undefined;
- appStore = useAppStore();
- backDamperOpenMesh;
- backDamperClosedMesh;
- frontDamperOpenMesh;
- frontDamperClosedMesh;
- clipActionArr = {
- frontDoor: null as unknown as THREE.AnimationAction,
- backDoor: null as unknown as THREE.AnimationAction,
- };
- constructor(model) {
- this.model = model;
- }
- addLight() {
- const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
- directionalLight.position.set(344, 690, 344);
- this.group?.add(directionalLight);
- directionalLight.target = this.group as THREE.Object3D;
- const pointLight2 = new THREE.PointLight(0xffeeee, 1, 300);
- pointLight2.position.set(-4, 10, 1.8);
- pointLight2.shadow.bias = 0.05;
- this.group?.add(pointLight2);
- const pointLight3 = new THREE.PointLight(0xffeeee, 1, 200);
- pointLight3.position.set(-0.5, -0.5, 0.75);
- pointLight3.shadow.bias = 0.05;
- this.group?.add(pointLight3);
- // const pointLight4 = new THREE.PointLight(0xffeeee, 1, 150);
- // pointLight4.position.set(4.3, 1, -0.9);
- // pointLight4.shadow.bias = 0.05;
- // this.group?.add(pointLight4);
- // const pointLight5 = new THREE.PointLight(0xffeeee, 1, 150);
- // pointLight5.position.set(4.3, 1, -0.9);
- // pointLight5.shadow.bias = 0.05;
- // this.group?.add(pointLight5);
- // const pointLight6 = new THREE.PointLight(0xffeeee, 1, 150);
- // pointLight6.position.set(-4.4, 1, -0.9);
- // pointLight6.shadow.bias = 0.05;
- // this.group?.add(pointLight6);
- // const pointLightHelper2 = new THREE.PointLightHelper(pointLight2, 1);
- // this.model.scene?.add(pointLightHelper2);
- // gui.add(pointLight2.position, 'x', -300, 300);
- // gui.add(pointLight2.position, 'y', -300, 300);
- // gui.add(pointLight2.position, 'z', -300, 300);
- // gui.add(pointLight3.position, 'x', -300, 300);
- // gui.add(pointLight3.position, 'y', -300, 300);
- // gui.add(pointLight3.position, 'z', -300, 300);
- }
- // 重置摄像头
- resetCamera() {
- this.model.camera.far = 274;
- this.model.orbitControls?.update();
- this.model.camera.updateProjectionMatrix();
- }
- // 设置模型位置
- setModalPosition() {
- this.group?.scale.set(22, 22, 22);
- this.group?.position.set(-20, 20, 9);
- }
- /* 添加监控数据 */
- addMonitorText(selectData) {
- if (!this.group) {
- return;
- }
- const textArr = [
- {
- text: `远程控制自动风门`,
- font: 'normal 30px Arial',
- color: '#00FF00',
- strokeStyle: '#007400',
- x: 120,
- y: 100,
- },
- {
- text: `巷道径高度(m):`,
- font: 'normal 30px Arial',
- color: '#00FF00',
- strokeStyle: '#007400',
- x: 0,
- y: 155,
- },
- {
- text: `${selectData.fclearheight ? selectData.fclearheight : '-'}`,
- font: 'normal 30px Arial',
- color: '#00FF00',
- strokeStyle: '#007400',
- x: 290,
- y: 155,
- },
- {
- text: `巷道径宽度(m): `,
- font: 'normal 30px Arial',
- color: '#00FF00',
- strokeStyle: '#007400',
- x: 0,
- y: 215,
- },
- {
- text: ` ${selectData.fclearwidth ? selectData.fclearwidth : '-'}`,
- font: 'normal 30px Arial',
- color: '#00FF00',
- strokeStyle: '#007400',
- x: 280,
- y: 215,
- },
- {
- text: `故障诊断:`,
- font: 'normal 30px Arial',
- color: '#00FF00',
- strokeStyle: '#007400',
- x: 0,
- y: 275,
- },
- {
- text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
- font: 'normal 30px Arial',
- color: '#00FF00',
- strokeStyle: '#007400',
- x: 280,
- y: 275,
- },
- {
- text: History_Type['type'] == 'remote' ? `国能神东煤炭集团监制` : '煤炭科学技术研究院有限公司研制',
- font: 'normal 28px Arial',
- color: '#00FF00',
- strokeStyle: '#007400',
- x: History_Type['type'] == 'remote' ? 80 : 20,
- y: 325,
- },
- ];
- //
- getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
- const textMap = new THREE.CanvasTexture(canvas); // 关键一步
- textMap.colorSpace = THREE.SRGBColorSpace;
- const textMaterial = new THREE.MeshBasicMaterial({
- // 关于材质并未讲解 实操即可熟悉 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
- map: textMap, // 设置纹理贴图
- transparent: true,
- side: THREE.FrontSide, // 这里是双面渲染的意思
- });
- 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.002, 0.002, 0.002);
- planeMesh.position.set(3.685, 0.09, -0.41);
- this.group.add(planeMesh);
- }
- textMap.dispose();
- });
- }
- /** 添加热点 */
- drawHots() {
- const hotPositions = [
- { x: -0.37, y: 0.26, z: -0.32 },
- { x: 0.28, y: -0.2, z: -0.43 },
- { x: 0.55, y: -0.22, z: -0.38 },
- ];
- for (let i = 0; i < 3; i++) {
- const hotPoint = drawHot(0.1);
- const position = hotPositions[i];
- hotPoint.scale.set(0.1, 0.1, 0.1);
- hotPoint.position.set(position.x, position.y, position.z);
- hotPoint.name = 'hotPoint' + i;
- this.group?.add(hotPoint);
- }
- }
- /* 风门动画 */
- render() {
- if (!this.model) {
- return;
- }
- if (this.isLRAnimation && this.group) {
- // 左右摇摆动画
- if (Math.abs(this.group.rotation.y) >= 0.2) {
- this.direction = -this.direction;
- this.group.rotation.y += 0.00002 * 30 * this.direction;
- } else {
- this.group.rotation.y += 0.00002 * 30 * this.direction;
- }
- }
- if (this.mixers && this.fmClock.running) {
- this.mixers.update(2);
- }
- }
- /* 点击风窗,风窗全屏 */
- mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
- this.isLRAnimation = false;
- 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.requestPictureInPicture();
- // }
- // }
- // this.playerStartClickTime1 = new Date().getTime();
- // return true;
- // } else if (mesh.name === 'player2') {
- // if (new Date().getTime() - this.playerStartClickTime2 < 400) {
- // // 双击,视频放大
- // if (this.player2) {
- // this.player2.requestPictureInPicture();
- // }
- // }
- // this.playerStartClickTime2 = new Date().getTime();
- // return true;
- // } else if (mesh.name.startsWith('hotPoint')) {
- // if (this.deviceDetailCSS3D) {
- // this.deviceDetailCSS3D.position.set(mesh.position.x + 0.035, mesh.position.y + 0.68, mesh.position.z + 0.02);
- // console.log('[ deviceDetailCSS3D.position ] >', this.deviceDetailCSS3D.position);
- // this.deviceDetailCSS3D.visible = true;
- // return true;
- // }
- // } else {
- // if (this.deviceDetailCSS3D) this.deviceDetailCSS3D.visible = false;
- // console.log('[ 点击事件 ] >');
- // }
- return false;
- });
- }
- mouseUpModel() {
- // 10s后开始摆动
- if (!this.animationTimer && !this.isLRAnimation) {
- this.animationTimer = setTimeout(() => {
- this.isLRAnimation = true;
- }, 10000);
- }
- }
- /* 提取风门序列帧,初始化前后门动画 */
- initAnimation() {
- const fmGroup = this.group?.getObjectByName('Fm-door');
- if (fmGroup) {
- const tracks = fmGroup.animations[0].tracks;
- const fontTracks: any[] = [],
- backTracks: any[] = [];
- for (let i = 0; i < tracks.length; i++) {
- const track = tracks[i];
- if (track.name.startsWith('qianmen')) {
- fontTracks.push(track);
- } else if (track.name.startsWith('houmen')) {
- backTracks.push(track);
- }
- }
- this.mixers = new THREE.AnimationMixer(fmGroup);
- const frontDoor = new THREE.AnimationClip('frontDoor', 4, fontTracks);
- const frontClipAction = this.mixers.clipAction(frontDoor, fmGroup);
- frontClipAction.clampWhenFinished = true;
- frontClipAction.loop = THREE.LoopOnce;
- this.clipActionArr.frontDoor = frontClipAction;
- const backDoor = new THREE.AnimationClip('backDoor', 4, backTracks);
- const backClipAction = this.mixers.clipAction(backDoor, fmGroup);
- backClipAction.clampWhenFinished = true;
- backClipAction.loop = THREE.LoopOnce;
- this.clipActionArr.backDoor = backClipAction;
- }
- }
- deviceDetailCard(position = { x: 0, y: 0, z: 0 }) {
- const element = document.getElementById('deviceCard') as HTMLElement;
- if (element) {
- this.deviceDetailCSS3D = new CSS2DObject(element);
- this.deviceDetailCSS3D.name = 'deviceCard';
- this.deviceDetailCSS3D.position.set(position.x, position.y, position.z);
- this.deviceDetailCSS3D.visible = false;
- // this.model.scene.add(this.deviceDetailCSS3D);
- this.group.add(this.deviceDetailCSS3D);
- }
- }
- // 播放动画
- play(handlerState, timeScale = 0.01) {
- let handler = () => {};
- switch (handlerState) {
- case 1: // 打开前门
- handler = () => {
- this.clipActionArr.frontDoor.paused = true;
- this.clipActionArr.frontDoor.reset();
- this.clipActionArr.frontDoor.time = 1.2;
- this.clipActionArr.frontDoor.timeScale = timeScale;
- // this.clipActionArr.frontDoor.clampWhenFinished = true;
- this.clipActionArr.frontDoor.play();
- this.fmClock.start();
- // 显示打开前门文字
- if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = true;
- if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = false;
- };
- break;
- case 2: // 关闭前门
- handler = () => {
- this.clipActionArr.frontDoor.paused = true;
- this.clipActionArr.frontDoor.reset(); //
- this.clipActionArr.frontDoor.time = 4;
- this.clipActionArr.frontDoor.timeScale = -timeScale;
- // this.clipActionArr.frontDoor.clampWhenFinished = true;
- this.clipActionArr.frontDoor.play();
- this.fmClock.start();
- if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = false;
- if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = true;
- };
- break;
- case 3: // 打开后门
- handler = () => {
- this.clipActionArr.backDoor.paused = true;
- this.clipActionArr.backDoor.reset();
- this.clipActionArr.backDoor.time = 1.2;
- this.clipActionArr.backDoor.timeScale = timeScale;
- // this.clipActionArr.backDoor.clampWhenFinished = true;
- this.clipActionArr.backDoor.play();
- this.fmClock.start();
- if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = true;
- if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = false;
- };
- break;
- case 4: // 关闭后门
- handler = () => {
- this.clipActionArr.backDoor.paused = true;
- this.clipActionArr.backDoor.reset();
- this.clipActionArr.backDoor.time = 4;
- this.clipActionArr.backDoor.timeScale = -timeScale;
- // this.clipActionArr.backDoor.clampWhenFinished = true;
- this.clipActionArr.backDoor.play();
- this.fmClock.start();
- if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = false;
- if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = true;
- };
- break;
- // case 5: // 打开前后门
- // handler = () => {
- // this.clipActionArr.backDoor.paused = true;
- // this.clipActionArr.frontDoor.paused = true;
- // this.clipActionArr.frontDoor.reset();
- // this.clipActionArr.frontDoor.time = 0;
- // this.clipActionArr.frontDoor.timeScale = 0.01;
- // this.clipActionArr.frontDoor.clampWhenFinished = true;
- // this.clipActionArr.frontDoor.play();
- // this.clipActionArr.backDoor.reset();
- // this.clipActionArr.backDoor.time = 0;
- // this.clipActionArr.backDoor.timeScale = 0.01;
- // this.clipActionArr.backDoor.clampWhenFinished = true;
- // this.clipActionArr.backDoor.play();
- // this.frontClock.start();
- // this.backClock.start();
- // };
- // break;
- // case 6: // 关闭前后门
- // handler = () => {
- // debugger;
- // this.clipActionArr.backDoor.paused = true;
- // this.clipActionArr.frontDoor.paused = true;
- // this.clipActionArr.frontDoor.reset();
- // this.clipActionArr.frontDoor.time = 4;
- // this.clipActionArr.frontDoor.timeScale = -0.01;
- // this.clipActionArr.frontDoor.clampWhenFinished = true;
- // this.clipActionArr.frontDoor.play();
- // this.clipActionArr.backDoor.reset();
- // this.clipActionArr.backDoor.time = 4;
- // this.clipActionArr.backDoor.timeScale = -0.01;
- // this.clipActionArr.backDoor.clampWhenFinished = true;
- // this.clipActionArr.backDoor.play();
- // this.frontClock.start();
- // this.backClock.start();
- // };
- // break;
- default:
- }
- handler();
- // model.clock.start();
- // const honglvdeng = group.getObjectByName('honglvdeng');
- // const material = honglvdeng.material;
- // setTimeout(() => {
- // if (handlerState === 2 || handlerState === 4 || handlerState === 6) {
- // material.color = new THREE.Color(0x00ff00);
- // } else {
- // material.color = new THREE.Color(0xff0000);
- // }
- // }, 1000);
- }
- async initCamera(dom1) {
- const videoPlayer1 = dom1;
- this.player1 = dom1;
- let monitorPlane: THREE.Mesh | null = null;
- if (!videoPlayer1) {
- const textArr = [
- {
- text: `无信号输入`,
- font: 'normal 40px Arial',
- color: '#009900',
- strokeStyle: '#002200',
- x: 170,
- y: 40,
- },
- ];
- const canvas = await getTextCanvas(320, 180, '', 'noSinge.png');
- let textMaterial: THREE.MeshBasicMaterial | null = null;
- if (canvas) {
- const textMap = new THREE.CanvasTexture(canvas); // 关键一步
- textMaterial = new THREE.MeshBasicMaterial({
- map: textMap, // 设置纹理贴图
- transparent: true,
- side: THREE.DoubleSide, // 这里是双面渲染的意思
- });
- textMaterial.blending = THREE.CustomBlending;
- const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
- monitorPlane = new THREE.Mesh(planeGeometry, textMaterial);
- textMaterial.dispose();
- planeGeometry.dispose();
- textMap.dispose();
- }
- }
- const player1 = this.group.getObjectByName('player1');
- if (player1) {
- this.model.clearMesh(player1);
- this.group.remove(player1);
- }
- const noPlayer1 = this.group.getObjectByName('noPlayer1');
- if (noPlayer1) {
- this.model.clearMesh(noPlayer1);
- this.group.remove(noPlayer1);
- }
- if (!videoPlayer1 && videoPlayer1 === null) {
- if (monitorPlane && !this.group.getObjectByName('noPlayer1')) {
- const planeMesh = monitorPlane.clone();
- planeMesh.name = 'noPlayer1';
- planeMesh.scale.set(0.0085, 0.0055, 0.012);
- planeMesh.position.set(-3.64, 0.01, -0.41);
- this.group?.add(planeMesh.clone());
- }
- } else if (videoPlayer1) {
- try {
- const mesh = renderVideo(this.group, videoPlayer1, 'player1');
- if (mesh) {
- mesh?.scale.set(-0.0275, 0.028, 1);
- mesh?.position.set(-3.643, 0.02, -0.4);
- mesh.rotation.y = -Math.PI;
- this.group.add(mesh);
- }
- } catch (error) {
- console.log('视频信号异常');
- }
- }
- }
- mountedThree(playerDom) {
- this.group = new THREE.Object3D();
- this.group.name = this.modelName;
- return new Promise((resolve) => {
- this.model.setGLTFModel(['Fm-door', 'Fm-wire', 'Fm-wall'], this.group).then(() => {
- this.setModalPosition();
- // 初始化左右摇摆动画;
- this.initAnimation();
- // this.drawHots();
- this.addLight();
- // this.deviceDetailCard();
- this.model.animate();
- this.backDamperOpenMesh = this.group.getObjectByName('Dampler_open_1');
- if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = false;
- this.backDamperClosedMesh = this.group.getObjectByName('Damper_Closed_1');
- if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = true;
- this.frontDamperOpenMesh = this.group.getObjectByName('Damper_Open_2');
- if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = false;
- this.frontDamperClosedMesh = this.group.getObjectByName('Damper_Closed_2');
- if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = true;
- resolve(this.model);
- this.initCamera(playerDom);
- });
- });
- }
- destroy() {
- if (this.model) {
- if (this.mixers) {
- this.mixers.uncacheClip(this.clipActionArr.frontDoor.getClip());
- this.mixers.uncacheClip(this.clipActionArr.backDoor.getClip());
- this.mixers.uncacheAction(this.clipActionArr.frontDoor.getClip(), this.group);
- this.mixers.uncacheAction(this.clipActionArr.backDoor.getClip(), this.group);
- this.mixers.uncacheRoot(this.group);
- if (this.model.animations[0]) this.model.animations[0].tracks = [];
- }
- this.model.clearGroup(this.group);
- this.clipActionArr.backDoor = undefined;
- this.clipActionArr.frontDoor = undefined;
- this.mixers = undefined;
- // document.getElementById('damper3D').parentElement.remove(document.getElementById('damper3D'))
- }
- }
- }
- export default Fm1;
|