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'; // const gui = new dat.GUI(); // gui.domElement.style = 'position:absolute;top:10px;right:10px;z-index:99999999999999'; class Fm1 { modelName = 'fm'; model; // group; isLRAnimation = true; // 是否开启左右摇摆动画 direction = 1; // 摇摆方向 animationTimer: NodeJS.Timeout | null = null; // 摇摆开启定时器 player1; player2; deviceDetailCSS3D; playerStartClickTime1 = new Date().getTime(); playerStartClickTime2 = new Date().getTime(); frontClock = new THREE.Clock(); backClock = new THREE.Clock(); appStore = useAppStore(); clipActionArr = { frontDoor: null as unknown as THREE.AnimationAction, backDoor: null as unknown as THREE.AnimationAction, }; constructor(model, playerVal1, playerVal2) { this.model = model; this.player1 = playerVal1; this.player2 = playerVal2; } addLight(scene) { const pointLight2 = new THREE.PointLight(0xffeeee, 0.8, 300); pointLight2.position.set(-113, 29, 10); // light2.castShadow = true pointLight2.shadow.bias = -0.05; scene.add(pointLight2); // const pointLightHelper2 = new THREE.PointLightHelper( pointLight2, 1 ); // scene.add( pointLightHelper2 ); const pointLight3 = new THREE.PointLight(0xffffff, 0.8, 100); pointLight3.position.set(0, 30, 3); // light2.castShadow = true pointLight3.shadow.bias = -0.05; scene.add(pointLight3); // const pointLightHelper = new THREE.PointLightHelper( pointLight3, 1 ); // scene.add( pointLightHelper ); const pointLight4 = new THREE.PointLight(0xffeeee, 0.6, 100); pointLight4.position.set(-14, 29, 13); // light2.castShadow = true pointLight4.shadow.bias = -0.05; scene.add(pointLight4); // const pointLightHelper4 = new THREE.PointLightHelper( pointLight4, 1 ); // scene.add( pointLightHelper4 ); const pointLight5 = new THREE.PointLight(0xffffff, 0.8, 100); pointLight5.position.set(80, 43, -5.3); // light2.castShadow = true pointLight5.shadow.bias = -0.05; scene.add(pointLight5); // const pointLightHelper5 = new THREE.PointLightHelper( pointLight5, 1 ); // scene.add( pointLightHelper5 ); const pointLight6 = new THREE.PointLight(0xffffff, 1, 300); // pointLight6.position.set(-47, 49, 12.9) pointLight6.position.set(-7, 40, 9); // light2.castShadow = true pointLight6.shadow.bias = -0.05; scene.add(pointLight6); // const pointLightHelper6 = new THREE.PointLightHelper( pointLight6, 1 ); // scene.add( pointLightHelper6 ); const pointLight7 = new THREE.PointLight(0xffffff, 0.8, 300); pointLight7.position.set(45, 51, -4.1); // light2.castShadow = true pointLight7.shadow.bias = -0.05; scene.add(pointLight7); // const pointLightHelper7 = new THREE.PointLightHelper( pointLight7, 1 ); // scene.add( pointLightHelper7 ); // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); // directionalLight.target = group; // directionalLight.position.set(-18, 20, 39); // directionalLight.rotation.set(1.3, 0.3, 5.8); // scene.add(directionalLight); // const helper = new THREE.DirectionalLightHelper(directionalLight, 5); // scene.add(helper); const spotLight = new THREE.SpotLight(); spotLight.angle = Math.PI / 16; spotLight.penumbra = 0; // spotLight.castShadow = true; spotLight.position.set(-231, 463, 687); scene.add(spotLight); // spotLight.shadow.mapSize.width = 1500; // default // spotLight.shadow.mapSize.height = 800; // default spotLight.shadow.camera.near = 0.5; // default spotLight.shadow.camera.far = 1000; // default spotLight.shadow.focus = 1.2; spotLight.shadow.bias = -0.000002; // const spotLightHelper = new THREE.SpotLightHelper(spotLight); // scene.add(spotLightHelper); // model.canvasContainer?.appendChild(gui.domElement); // gui.add(directionalLight.position, 'x', -100, 100).step(1); // gui.add(directionalLight.position, 'y', -100, 100).step(1); // gui.add(directionalLight.position, 'z', -100, 100).step(1); // gui.add(directionalLight.rotation, 'x', -Math.PI, 2 * Math.PI).step(0.1); // gui.add(directionalLight.rotation, 'y', -Math.PI, 2 * Math.PI).step(0.1); // gui.add(directionalLight.rotation, 'z', -Math.PI, 2 * Math.PI).step(0.1); // gui.add(spotLight, 'angle', 0, Math.PI / 2); // gui.add(spotLight, 'distance', 0, 1000); // gui.add(pointLight6.position, 'x', -200, 200) // gui.add(pointLight6.position, 'y', -200, 200) // gui.add(pointLight6.position, 'z', -200, 200) } // 重置摄像头 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); } /* 添加监控数据 */ addFmText(selectData) { if (!this.group) { return; } const textArr = [ { text: `远程控制自动风门`, font: 'normal 30px Arial', color: '#00FF00', strokeStyle: '#007400', x: 120, y: 100, }, { text: `压力(Pa):`, font: 'normal 30px Arial', color: '#00FF00', strokeStyle: '#007400', x: 0, y: 155, }, { text: `${selectData.frontRearDP}`, font: 'normal 30px Arial', color: '#00FF00', strokeStyle: '#007400', x: 290, y: 155, }, { text: `动力源压力(MPa): `, font: 'normal 30px Arial', color: '#00FF00', strokeStyle: '#007400', x: 0, y: 215, }, { text: ` ${selectData.sourcePressure}`, 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.fault}`, font: 'normal 30px Arial', color: '#00FF00', strokeStyle: '#007400', x: 280, y: 275, }, { text: `煤炭科学技术研究院有限公司研制`, font: 'normal 28px Arial', color: '#00FF00', strokeStyle: '#007400', x: 20, y: 325, }, ]; // getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => { const textMap = new THREE.CanvasTexture(canvas); // 关键一步 textMap.encoding = THREE.sRGBEncoding; 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(-1.255, 0.09, -0.41); this.group.add(planeMesh); } }); } /** 添加热点 */ 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.3, 0.3, 0.3); 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; } } // // //自发光 // const screen = group.getObjectByName('对象156'); // if (screen) { // model.renderer.clearDepth(); // screen.layers.enable(31); // !!renderBloomPass && renderBloomPass(group); // } // 风门开关动画 const frontDelta = this.frontClock?.getElapsedTime() + 0.5; const backDelta = this.backClock?.getElapsedTime() + 0.5; if (this.model.mixers[0]) this.model.mixers[0]?.update(frontDelta); //前门 if (this.model.mixers[1]) this.model.mixers[1]?.update(backDelta); // 后门 } /* 点击风窗，风窗全屏 */ mousedownModel(intersects: THREE.Intersection>[]) { 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) { // model.orbitControls?.dispatchEvent.call(model.orbitControls, { type: 'end' }) // 双击，视频放大 if (this.player1) { this.player1.requestFullscreen(); } } this.playerStartClickTime1 = new Date().getTime(); return true; } else if (mesh.name === 'player2') { if (new Date().getTime() - this.playerStartClickTime2 < 400) { // model.orbitControls?.dispatchEvent.call(model.orbitControls, { type: 'end' }) // 双击，视频放大 if (this.player2) { this.player2.requestFullscreen(); } } 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.66, mesh.position.z + 0.02); console.log('[ deviceDetailCSS3D.position ] >', this.deviceDetailCSS3D.position); this.deviceDetailCSS3D.visible = true; return true; } } else { 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); } } const frontDoor = new THREE.AnimationClip('frontDoor', 4, fontTracks); const frontMixer = new THREE.AnimationMixer(fmGroup); this.model.mixers.push(frontMixer); const frontClipAction = frontMixer.clipAction(frontDoor, fmGroup); frontClipAction.clampWhenFinished = true; frontClipAction.loop = THREE.LoopOnce; this.clipActionArr.frontDoor = frontClipAction; const backDoor = new THREE.AnimationClip('backDoor', 4, backTracks); const backMixer = new THREE.AnimationMixer(fmGroup); this.model.mixers.push(backMixer); const backClipAction = backMixer.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; 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 = () => { debugger; 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.frontClock.start(); }; break; case 2: // 关闭前门 handler = () => { debugger; 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.frontClock.start(); }; break; case 3: // 打开后门 handler = () => { debugger; 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.backClock.start(); }; break; case 4: // 关闭后门 handler = () => { debugger; 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.backClock.start(); }; break; case 5: // 打开前后门 handler = () => { debugger; 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); } mountedThree() { this.group = new THREE.Object3D(); this.group.name = this.modelName; return new Promise((resolve) => { this.model = new UseThree('#damper3D', '', '#deviceDetail'); this.model.setEnvMap('test1'); this.model.renderer.toneMappingExposure = 1; this.model.scene?.add(this.group); this.group?.layers.enableAll(); this.model.setGLTFModel(['Fm-door', 'Fm-wire', 'Fm-wall'], this.group).then(() => { this.setModalPosition(); // 初始化左右摇摆动画; this.initAnimation(); this.drawHots(); this.deviceDetailCard(); this.model.animate(); if (this.model.camera.layers.mask == -1) this.model.camera.layers.toggle(1); setTimeout(async () => { const videoPlayer1 = document.getElementById('fm-player1')?.getElementsByClassName('vjs-tech')[0]; const videoPlayer2 = document.getElementById('fm-player2')?.getElementsByClassName('vjs-tech')[0]; if (!videoPlayer1 || !videoPlayer2) { const textArr = [ { text: `无信号输入`, font: 'normal 40px Arial', color: '#009900', strokeStyle: '#002200', x: 170, y: 40, }, ]; getTextCanvas(560, 346, textArr, '').then((canvas: HTMLCanvasElement) => { const textMap = new THREE.CanvasTexture(canvas); // 关键一步 const textMaterial = new THREE.MeshBasicMaterial({ map: textMap, // 设置纹理贴图 transparent: true, side: THREE.DoubleSide, // 这里是双面渲染的意思 }); textMaterial.blending = THREE.CustomBlending; const monitorPlane = this.group?.getObjectByName('noPlayer'); if (monitorPlane) { monitorPlane.material = textMaterial; } else { const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry const planeMesh = new THREE.Mesh(planeGeometry, textMaterial); if (!videoPlayer1) { planeMesh.name = 'noPlayer1'; planeMesh.scale.set(0.011, 0.008, 0.011); planeMesh.position.set(-4.23, -0.28, -0.39); this.group?.add(planeMesh.clone()); } if (!videoPlayer2) { planeMesh.name = 'noPlayer2'; planeMesh.scale.set(0.012, 0.009, 0.012); planeMesh.position.set(4.33, -0.33, -0.39); this.group?.add(planeMesh.clone()); } textMaterial.dispose(); planeGeometry.dispose(); } }); } else { if (videoPlayer2) { const mesh = renderVideo(this.group, videoPlayer1, 'player1'); mesh?.scale.set(-0.028, 0.0285, 1); mesh?.position.set(4.298, 0.02, -0.4); mesh.rotation.y = -Math.PI; this.group.add(mesh); } if (videoPlayer1) { const mesh = renderVideo(this.group, videoPlayer2, 'player2'); mesh?.scale.set(-0.028, 0.0285, 1); mesh?.position.set(-4.262, 0.02, -0.4); mesh.rotation.y = -Math.PI; this.group.add(mesh); } } resolve(this.model); }, 0); }); }); } destroy() { if (this.model) { if (this.model.mixers[0]) { this.model.mixers[0].uncacheClip(this.clipActionArr.frontDoor.getClip()); this.model.mixers[0].uncacheClip(this.clipActionArr.backDoor.getClip()); this.model.mixers[0].uncacheAction(this.clipActionArr.frontDoor, this.group); this.model.mixers[0].uncacheAction(this.clipActionArr.backDoor, this.group); this.model.mixers[0].uncacheRoot(this.group); this.model.mixers[1].uncacheClip(this.clipActionArr.frontDoor.getClip()); this.model.mixers[1].uncacheClip(this.clipActionArr.backDoor.getClip()); this.model.mixers[1].uncacheAction(this.clipActionArr.frontDoor, this.group); this.model.mixers[1].uncacheAction(this.clipActionArr.backDoor, this.group); this.model.mixers[1].uncacheRoot(this.group); if (this.model.animations[0]) this.model.animations[0].tracks = []; } this.clipActionArr.backDoor = undefined; this.clipActionArr.frontDoor = undefined; this.model.mixers = []; this.model.deleteModal(); this.model = null; this.group = null; // document.getElementById('damper3D').parentElement.remove(document.getElementById('damper3D')) } } } export default Fm1;