|
|
@@ -0,0 +1,547 @@
|
|
|
+import * as THREE from 'three';
|
|
|
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
|
|
|
+import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
|
|
|
+import gsap from 'gsap';
|
|
|
+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 FmDcZHQ {
|
|
|
+ modelName = 'fmDc';
|
|
|
+ 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();
|
|
|
+
|
|
|
+ // backLeftDamperOpenMesh;
|
|
|
+ // backLeftDamperClosedMesh;
|
|
|
+ // frontLeftDamperOpenMesh;
|
|
|
+ // frontLeftDamperClosedMesh;
|
|
|
+ // backRightDamperOpenMesh;
|
|
|
+ // backRightDamperClosedMesh;
|
|
|
+ // frontRightDamperOpenMesh;
|
|
|
+ // frontRightDamperClosedMesh;
|
|
|
+
|
|
|
+ clipActionArr = {
|
|
|
+ frontDoor: null as unknown as THREE.AnimationAction,
|
|
|
+ backDoor: null as unknown as THREE.AnimationAction,
|
|
|
+ };
|
|
|
+ windowsActionArr = {
|
|
|
+ frontLeftWindow: <THREE.Mesh[]>[],
|
|
|
+ backLeftWindow: <THREE.Mesh[]>[],
|
|
|
+ frontRightWindow: <THREE.Mesh[]>[],
|
|
|
+ backRightWindow: <THREE.Mesh[]>[],
|
|
|
+ };
|
|
|
+
|
|
|
+ constructor(model) {
|
|
|
+ this.model = model;
|
|
|
+ }
|
|
|
+
|
|
|
+ addLight() {}
|
|
|
+ // 重置摄像头
|
|
|
+ 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 screenDownText = VENT_PARAM['modalText']
|
|
|
+ ? VENT_PARAM['modalText']
|
|
|
+ : History_Type['type'] == 'remote'
|
|
|
+ ? `国能神东煤炭集团监制`
|
|
|
+ : '煤炭科学技术研究院有限公司研制';
|
|
|
+
|
|
|
+ const screenDownTextX = 80 - (screenDownText.length - 10) * 6;
|
|
|
+
|
|
|
+ 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: screenDownText,
|
|
|
+ font: 'normal 28px Arial',
|
|
|
+ color: '#00FF00',
|
|
|
+ strokeStyle: '#007400',
|
|
|
+ x: screenDownTextX,
|
|
|
+ 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(4.025, 0.67, -0.27);
|
|
|
+ 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.mixers && this.fmClock.running) {
|
|
|
+ this.mixers.update(2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 点击风窗，风窗全屏 */
|
|
|
+ mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
|
|
|
+ if (this.animationTimer) {
|
|
|
+ clearTimeout(this.animationTimer);
|
|
|
+ this.animationTimer = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ mouseUpModel() {}
|
|
|
+
|
|
|
+ /* 提取风门序列帧，初始化前后门动画 */
|
|
|
+ initAnimation() {
|
|
|
+ const fmGroup = this.group?.getObjectByName('fm-window-zhq');
|
|
|
+ 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.includes('_3') || track.name.includes('_4')) {
|
|
|
+ fontTracks.push(track);
|
|
|
+ } else {
|
|
|
+ backTracks.push(track);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const parentGroup = fmGroup.getObjectByName('MenChuangYiTi');
|
|
|
+ // const frontGroup = parentGroup.getObjectByName('FengMen2');
|
|
|
+ // const backGroup = parentGroup.getObjectByName('FengMen1');
|
|
|
+ this.mixers = new THREE.AnimationMixer(parentGroup);
|
|
|
+
|
|
|
+ const frontDoor = new THREE.AnimationClip('frontDoor', 2.5, fontTracks);
|
|
|
+ const frontClipAction = this.mixers.clipAction(frontDoor, parentGroup);
|
|
|
+ frontClipAction.clampWhenFinished = true;
|
|
|
+ frontClipAction.loop = THREE.LoopOnce;
|
|
|
+ this.clipActionArr.frontDoor = frontClipAction;
|
|
|
+
|
|
|
+ const backDoor = new THREE.AnimationClip('backDoor', 2.5, backTracks);
|
|
|
+ const backClipAction = this.mixers.clipAction(backDoor, parentGroup);
|
|
|
+ backClipAction.clampWhenFinished = true;
|
|
|
+ backClipAction.loop = THREE.LoopOnce;
|
|
|
+ this.clipActionArr.backDoor = backClipAction;
|
|
|
+ }
|
|
|
+ // 编写风窗
|
|
|
+ }
|
|
|
+ /* 提取风门序列帧，初始化前后门动画 */
|
|
|
+ initWindowAnimation() {
|
|
|
+ const meshArr01: THREE.Object3D[] = []; //front left
|
|
|
+ const meshArr02: THREE.Object3D[] = []; //front right
|
|
|
+ const meshArr03: THREE.Object3D[] = []; //back left
|
|
|
+ const meshArr04: THREE.Object3D[] = []; //back right
|
|
|
+ const windowGroup = new THREE.Group();
|
|
|
+ windowGroup.name = 'hiddenGroup';
|
|
|
+ const fmGroup = this.group?.getObjectByName('fm-window-zhq');
|
|
|
+ const parentGroup = fmGroup.getObjectByName('MenChuangYiTi');
|
|
|
+ const frontGroup = parentGroup.getObjectByName('Men_hou');
|
|
|
+ const backGroup = parentGroup.getObjectByName('Men_qian');
|
|
|
+ const frontLeftObj = frontGroup.getObjectByName('men_3');
|
|
|
+ const frontRightObj = frontGroup.getObjectByName('men_4');
|
|
|
+ const backLeftObj = backGroup.getObjectByName('men_1');
|
|
|
+ const backRightObj = backGroup.getObjectByName('men_2');
|
|
|
+ frontLeftObj.traverse((obj) => {
|
|
|
+ if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('men')) {
|
|
|
+ obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0);
|
|
|
+ meshArr01.push(obj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ frontRightObj.traverse((obj) => {
|
|
|
+ if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('men')) {
|
|
|
+ obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0);
|
|
|
+ meshArr02.push(obj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ backLeftObj.traverse((obj) => {
|
|
|
+ if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('men')) {
|
|
|
+ obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0);
|
|
|
+ meshArr03.push(obj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ backRightObj.traverse((obj) => {
|
|
|
+ if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('men')) {
|
|
|
+ obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0);
|
|
|
+ meshArr04.push(obj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.windowsActionArr.frontLeftWindow = meshArr01;
|
|
|
+ this.windowsActionArr.frontRightWindow = meshArr02;
|
|
|
+ this.windowsActionArr.backLeftWindow = meshArr03;
|
|
|
+ this.windowsActionArr.backRightWindow = meshArr04;
|
|
|
+ this.group?.add(windowGroup);
|
|
|
+ }
|
|
|
+
|
|
|
+ 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 = () => {};
|
|
|
+ if (this.clipActionArr.frontDoor && this.clipActionArr.backDoor) {
|
|
|
+ switch (handlerState) {
|
|
|
+ case 1: // 打开前门
|
|
|
+ handler = () => {
|
|
|
+ this.clipActionArr.frontDoor.paused = true;
|
|
|
+ this.clipActionArr.frontDoor.reset();
|
|
|
+ this.clipActionArr.frontDoor.time = 0;
|
|
|
+ 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 = 2.5;
|
|
|
+ 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 = 0;
|
|
|
+ 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 = 2.5;
|
|
|
+ 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;
|
|
|
+ default:
|
|
|
+ }
|
|
|
+ handler();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ playWindow(rotationParam, flag) {
|
|
|
+ if (
|
|
|
+ !this.windowsActionArr.frontLeftWindow ||
|
|
|
+ !this.windowsActionArr.frontRightWindow ||
|
|
|
+ !this.windowsActionArr.backLeftWindow ||
|
|
|
+ !this.windowsActionArr.backRightWindow ||
|
|
|
+ this.windowsActionArr.frontLeftWindow.length <= 0 ||
|
|
|
+ this.windowsActionArr.frontRightWindow.length <= 0 ||
|
|
|
+ this.windowsActionArr.backLeftWindow.length <= 0 ||
|
|
|
+ this.windowsActionArr.backRightWindow.length <= 0
|
|
|
+ ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (flag === 1) {
|
|
|
+ // 前门左风窗动画
|
|
|
+ this.windowsActionArr.frontLeftWindow.forEach((mesh) => {
|
|
|
+ gsap.to(mesh.rotation, {
|
|
|
+ y: THREE.MathUtils.degToRad(rotationParam.frontLeftDeg1),
|
|
|
+ duration: (1 / 9) * Math.abs(rotationParam.frontLeftDeg1 - mesh.rotation.y),
|
|
|
+ overwrite: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else if (flag === 2) {
|
|
|
+ // 后门左风窗动画
|
|
|
+ this.windowsActionArr.backLeftWindow.forEach((mesh) => {
|
|
|
+ gsap.to(mesh.rotation, {
|
|
|
+ y: THREE.MathUtils.degToRad(rotationParam.backLeftDeg1),
|
|
|
+ duration: (1 / 9) * Math.abs(rotationParam.backLeftDeg1 - mesh.rotation.y),
|
|
|
+ overwrite: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else if (flag === 3) {
|
|
|
+ // 前门右风窗动画
|
|
|
+ this.windowsActionArr.frontRightWindow.forEach((mesh) => {
|
|
|
+ gsap.to(mesh.rotation, {
|
|
|
+ y: THREE.MathUtils.degToRad(rotationParam.frontRightDeg1),
|
|
|
+ duration: (1 / 9) * Math.abs(rotationParam.frontRightDeg1 - mesh.rotation.y),
|
|
|
+ overwrite: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else if (flag === 4) {
|
|
|
+ // 后门右风窗动画
|
|
|
+ this.windowsActionArr.backRightWindow.forEach((mesh) => {
|
|
|
+ gsap.to(mesh.rotation, {
|
|
|
+ y: THREE.MathUtils.degToRad(rotationParam.backRightDeg1),
|
|
|
+ duration: (1 / 9) * Math.abs(rotationParam.backRightDeg1 - mesh.rotation.y),
|
|
|
+ overwrite: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else if (flag === 0) {
|
|
|
+ (
|
|
|
+ [
|
|
|
+ ...this.windowsActionArr.frontLeftWindow,
|
|
|
+ ...this.windowsActionArr.frontRightWindow,
|
|
|
+ ...this.windowsActionArr.backLeftWindow,
|
|
|
+ ...this.windowsActionArr.backRightWindow,
|
|
|
+ ] as THREE.Mesh[]
|
|
|
+ ).forEach((mesh) => {
|
|
|
+ gsap.to(mesh.rotation, {
|
|
|
+ y: 0,
|
|
|
+ overwrite: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ 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-window-zhq'], this.group).then(() => {
|
|
|
+ console.log('带风窗风门模型----->', this.group);
|
|
|
+ this.setModalPosition();
|
|
|
+ // 初始化左右摇摆动画;
|
|
|
+ this.initAnimation();
|
|
|
+ this.initWindowAnimation();
|
|
|
+ // this.drawHots();
|
|
|
+ this.addLight();
|
|
|
+ // this.deviceDetailCard();
|
|
|
+ this.model.animate();
|
|
|
+
|
|
|
+ resolve(this.model);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ 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.windowsActionArr.frontWindow = undefined;
|
|
|
+ this.windowsActionArr.backWindow = undefined;
|
|
|
+
|
|
|
+ this.mixers = undefined;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+export default FmDcZHQ;
|
hongrunxia