123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383 |
- import * as THREE from 'three';
- import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
- import gsap from 'gsap';
- class singleWindow {
- 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';
- }
- // // 重置摄像头
- // 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 = () => {
- if (!this.model) return;
- const directionalLight = new THREE.DirectionalLight(0xfdffe0, 1);
- directionalLight.position.set(-100, -50.0, 144.38);
- this.group?.add(directionalLight);
- const pointLight2 = new THREE.PointLight(0xffffff, 1.5, 150);
- pointLight2.position.set(101, 34, 16);
- pointLight2.shadow.bias = 0.05;
- this.group.add(pointLight2);
- const pointLight3 = new THREE.PointLight(0xffffff, 1.5, 150);
- pointLight3.position.set(19, 25, -7);
- pointLight3.shadow.bias = 0.05;
- this.group.add(pointLight3);
- const pointLight6 = new THREE.PointLight(0xffffff, 1.5, 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 = 120 - (screenDownText.length - 10) * 6;
- const textArr = [
- {
- text: `远程定量调节自动风窗`,
- font: 'normal 30px Arial',
- color: '#009900',
- strokeStyle: '#002200',
- x: 110,
- y: 90,
- },
- {
- text: `${selectData.OpenDegree || selectData.OpenDegree1 ? '开度值(°)' : selectData.forntArea ? '过风面积(㎡)' : '过风面积(㎡)'}:`,
- font: 'normal 30px Arial',
- color: '#009900',
- strokeStyle: '#002200',
- x: 5,
- y: 145,
- },
- {
- text: selectData.OpenDegree
- ? Number(`${selectData.OpenDegree}`).toFixed(2)
- : 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.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: 256,
- },
- {
- text: `${selectData.fWindowM3 ? selectData.fWindowM3 : selectData.nwindownum}`,
- 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: 302,
- },
- ];
- 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(570, 346); // 平面3维几何体PlaneGeometry
- const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
- planeMesh.name = 'monitorText';
- planeMesh.scale.set(0.0025, 0.003, 0.002);
- planeMesh.position.set(3.71, -0.042, -0.23);
- this.group?.add(planeMesh);
- }
- });
- }
- /* 提取风门序列帧,初始化前后门动画 */
- initAnimation() {
- const meshArr01: THREE.Object3D[] = [];
- if (this.group) {
- this.group.getObjectByName('ddFc')?.children.forEach((obj) => {
- if (obj.type === 'Mesh' && ((obj.name && obj.name.startsWith('shanye')) || obj.name.startsWith('FCshanye'))) {
- obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0);
- meshArr01.push(obj);
- }
- });
- }
- this.windowsActionArr.frontWindow = meshArr01;
- }
- play(rotationParam, flag) {
- if (this.windowsActionArr.frontWindow.length <= 0) {
- return;
- }
- if (flag === 1) {
- // 前风窗动画
- this.windowsActionArr.frontWindow.forEach((mesh: THREE.Mesh) => {
- gsap.to(mesh.rotation, {
- y: THREE.MathUtils.degToRad(rotationParam.frontDeg1),
- duration: (1 / 9) * Math.abs(rotationParam.frontDeg1 - mesh.rotation.y),
- overwrite: true,
- });
- });
- } else if (flag === 0) {
- ([...this.windowsActionArr.frontWindow] as THREE.Mesh[]).forEach((mesh) => {
- gsap.to(mesh.rotation, {
- y: 0,
- overwrite: true,
- });
- });
- }
- }
- /* 点击风窗,风窗全屏 */
- 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.requestFullscreen();
- }
- }
- this.playerStartClickTime1 = new Date().getTime();
- return true;
- }
- return false;
- });
- }
- mouseUpModel() {
- // 10s后开始摆动
- if (!this.animationTimer && !this.isLRAnimation) {
- this.animationTimer = setTimeout(() => {
- this.isLRAnimation = true;
- }, 10000);
- }
- }
- /* 风门动画 */
- 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;
- }
- }
- }
- async initCamera(dom1) {
- const videoPlayer1 = dom1;
- let monitorPlane: THREE.Mesh | null = null;
- const textArr = [
- {
- text: `无信号输入`,
- font: 'normal 40px Arial',
- color: '#009900',
- strokeStyle: '#002200',
- x: 170,
- y: 40,
- },
- ];
- const canvas = await getTextCanvas(320, 180, textArr, null);
- if (canvas) {
- const textMap = new THREE.CanvasTexture(canvas); // 关键一步
- const textMaterial = new THREE.MeshBasicMaterial({
- map: textMap, // 设置纹理贴图
- transparent: true,
- side: THREE.DoubleSide, // 这里是双面渲染的意思
- });
- textMaterial.blending = THREE.CustomBlending;
- monitorPlane = this.group?.getObjectByName('noPlayer');
- if (monitorPlane) {
- monitorPlane.material = textMaterial;
- } else {
- const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
- monitorPlane = new THREE.Mesh(planeGeometry, textMaterial);
- textMaterial.dispose();
- planeGeometry.dispose();
- }
- }
- const videoPlayer = this.group.getObjectByName('player1');
- if (videoPlayer) {
- this.model.clearMesh(videoPlayer);
- this.group.remove(videoPlayer);
- }
- 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.011, 0.0053, 0.012);
- planeMesh.position.set(-4.3, 0.13, -0.23);
- this.group?.add(planeMesh.clone());
- }
- } else if (videoPlayer1) {
- try {
- const mesh = renderVideo(this.group, videoPlayer1, 'player1');
- if (mesh) {
- mesh?.scale.set(0.0382, 0.028, 0.022);
- mesh?.position.set(-3.008, 0.148, -0.22);
- this.group.add(mesh);
- }
- } catch (error) {
- console.log('视频信号异常');
- }
- }
- }
- resetMaterial() {
- const fcModal = this.group.getObjectByName('ddFc');
- if (fcModal) {
- const fengchuangbuxiugang = (fcModal.getObjectByName('FCshanye03') as THREE.Mesh)?.material; // 圈;
- (fengchuangbuxiugang as THREE.MeshStandardMaterial).color.set(0xb3b3b3);
- (fengchuangbuxiugang as THREE.MeshStandardMaterial).roughness = 0.36;
- (fengchuangbuxiugang as THREE.MeshStandardMaterial).envMapIntensity = 0.92;
- // const stainlessSteel_light = (fcModal.getObjectByName('Line12241') as THREE.Mesh)?.material; // 框;
- // const fluorescent_green = (fcModal.getObjectByName('对象276') as THREE.Mesh)?.material; // fluorescent_green;
- // const fluorescent_green1 = (fcModal.getObjectByName('Box770') as THREE.Mesh)?.material; // 23 - Default;
- // const wire = (fcModal.getObjectByName('对象281') as THREE.Mesh)?.material; // wire_028149177;
- // const net = (fcModal.getObjectByName('Plane9230') as THREE.Mesh)?.material; // wire_028149177;
- // const stainlesssteel_blue = (fcModal.getObjectByName('Blades08') as THREE.Mesh)?.material; // wire_028149177;
- // (stainlessSteel_light as THREE.MeshStandardMaterial).color.set(0x9e9e9e);
- // (stainlessSteel_light as THREE.MeshStandardMaterial).roughness = 0.26;
- // (stainlessSteel_light as THREE.MeshStandardMaterial).envMapIntensity = 0.92;
- // (fluorescent_green as THREE.MeshStandardMaterial).color.set(0x00fff2);
- // (fluorescent_green as THREE.MeshStandardMaterial).envMapIntensity = 1.5;
- // //
- // (fluorescent_green1 as THREE.MeshStandardMaterial).color.set(0x00fff2);
- // (fluorescent_green1 as THREE.MeshStandardMaterial).envMapIntensity = 1.5;
- // (wire as THREE.MeshStandardMaterial).color.set(0x38e4ff);
- // (wire as THREE.MeshStandardMaterial).envMapIntensity = 2;
- // (net as THREE.MeshStandardMaterial).color.set(0xcfcfcf);
- // (stainlesssteel_blue as THREE.MeshStandardMaterial).color.set(0xababab);
- // (stainlesssteel_blue as THREE.MeshStandardMaterial).roughness = 0.45;
- }
- }
- mountedThree(playerDom) {
- return new Promise((resolve) => {
- this.model.setGLTFModel('ddFc').then((gltf) => {
- const fcModal = gltf[0];
- fcModal.name = 'ddFc';
- this.group?.add(fcModal);
- this.resetMaterial();
- 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 singleWindow;
|