|
|
@@ -0,0 +1,291 @@
|
|
|
+import * as THREE from 'three';
|
|
|
+import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
|
|
|
+import gsap from 'gsap';
|
|
|
+
|
|
|
+class threeFc_8 {
|
|
|
+ model;
|
|
|
+ modelName = 'threedFc';
|
|
|
+ group: THREE.Object3D = new THREE.Object3D();
|
|
|
+ animationTimer;
|
|
|
+ isLRAnimation = true;
|
|
|
+ direction = 1;
|
|
|
+ windowsActionArr = {
|
|
|
+ frontWindow: <THREE.Mesh[]>[],
|
|
|
+ centerWindow: <THREE.Mesh[]>[],
|
|
|
+ backWindow: <THREE.Mesh[]>[],
|
|
|
+ };
|
|
|
+
|
|
|
+ constructor(model) {
|
|
|
+ this.model = model;
|
|
|
+ // this.group.name = this.modelName;
|
|
|
+ }
|
|
|
+
|
|
|
+ addLight = () => {
|
|
|
+ if (!this.model) return;
|
|
|
+
|
|
|
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
|
|
|
+ directionalLight.position.set(-110, 150, 647);
|
|
|
+ this.group?.add(directionalLight);
|
|
|
+ // directionalLight.target = group;
|
|
|
+
|
|
|
+ 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.getObjectByName(this.modelName)?.scale.set(9, 9, 9);
|
|
|
+ this.group?.scale.set(22, 22, 22);
|
|
|
+ this.group?.position.set(-15, 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: 95,
|
|
|
+ y: 97,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: `${selectData.OpenDegree1 ? '前窗开度值(°)' : selectData.forntArea ? '前窗过风面积(㎡)' : '前窗过风面积(㎡)'}:`,
|
|
|
+ font: 'normal 28px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 5,
|
|
|
+ y: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: selectData.OpenDegree1
|
|
|
+ ? Number(`${selectData.OpenDegree1}`).toFixed(2)
|
|
|
+ : selectData.forntArea
|
|
|
+ ? Number(`${selectData.forntArea}`).toFixed(2)
|
|
|
+ : '-',
|
|
|
+ font: 'normal 28px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 330,
|
|
|
+ y: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: `${selectData.OpenDegree2 ? '后窗开度值(°)' : selectData.forntArea ? '后窗过风面积(㎡)' : '后窗过风面积(㎡)'}:`,
|
|
|
+ font: 'normal 28px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 5,
|
|
|
+ y: 210,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: selectData.OpenDegree2
|
|
|
+ ? Number(`${selectData.OpenDegree2}`).toFixed(2)
|
|
|
+ : selectData.rearArea
|
|
|
+ ? Number(`${selectData.rearArea}`).toFixed(2)
|
|
|
+ : '-',
|
|
|
+ font: 'normal 28px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 325,
|
|
|
+ y: 210,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: `${selectData.frontRearDP ? '风窗压差(Pa)' : selectData.windSpeed ? '风速(m/s)' : '通信状态'}:`,
|
|
|
+ font: 'normal 28px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 5,
|
|
|
+ y: 266,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: `${
|
|
|
+ selectData.frontRearDP
|
|
|
+ ? selectData.frontRearDP
|
|
|
+ : selectData.windSpeed
|
|
|
+ ? selectData.windSpeed
|
|
|
+ : selectData.netStatus == '0'
|
|
|
+ ? '断开'
|
|
|
+ : '连接'
|
|
|
+ }`,
|
|
|
+ font: 'normal 28px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: 330,
|
|
|
+ y: 266,
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ text: screenDownText,
|
|
|
+ font: 'normal 28px Arial',
|
|
|
+ color: '#009900',
|
|
|
+ strokeStyle: '#002200',
|
|
|
+ x: screenDownTextX,
|
|
|
+ y: 322,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ getTextCanvas(570, 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('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.002, 0.002, 0.002);
|
|
|
+ planeMesh.position.set(4.03, 0.658, -0.27);
|
|
|
+ this.group?.add(planeMesh);
|
|
|
+ }
|
|
|
+ textMap.dispose();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 风门动画 */
|
|
|
+ render() {
|
|
|
+ if (!this.model) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 提取风门序列帧，初始化前后门动画 */
|
|
|
+ initAnimation() {
|
|
|
+ const meshArr01: THREE.Object3D[] = [];
|
|
|
+ const meshArr02: THREE.Object3D[] = [];
|
|
|
+ const meshArr03: THREE.Object3D[] = [];
|
|
|
+ const fcModal = this.group.getObjectByName('SanFengChuang_1');
|
|
|
+ const fcShanyeGroup = fcModal?.getObjectByName('FengChuang');
|
|
|
+ const shanye1 = fcShanyeGroup?.getObjectByName('FengChuang_1')?.getObjectByName('Men_1')?.getObjectByName('shanye_1');
|
|
|
+ const shanye2 = fcShanyeGroup?.getObjectByName('FengChuang_2')?.getObjectByName('Men_2')?.getObjectByName('shanye_2');
|
|
|
+ const shanye3 = fcShanyeGroup?.getObjectByName('FengChuang_3')?.getObjectByName('Men_3')?.getObjectByName('shanye_3');
|
|
|
+ if (shanye1 && shanye2 && shanye3) {
|
|
|
+ shanye1.children.forEach((obj) => {
|
|
|
+ obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
|
|
|
+ meshArr01.push(obj);
|
|
|
+ });
|
|
|
+ shanye2.children.forEach((obj) => {
|
|
|
+ obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
|
|
|
+ meshArr02.push(obj);
|
|
|
+ });
|
|
|
+ shanye3.children.forEach((obj) => {
|
|
|
+ obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
|
|
|
+ meshArr03.push(obj);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.windowsActionArr.frontWindow = meshArr01;
|
|
|
+ this.windowsActionArr.centerWindow = meshArr02;
|
|
|
+ this.windowsActionArr.backWindow = meshArr03;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 点击风窗，风窗全屏 */
|
|
|
+ mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
|
|
|
+ if (this.animationTimer) {
|
|
|
+ clearTimeout(this.animationTimer);
|
|
|
+ this.animationTimer = null;
|
|
|
+ }
|
|
|
+ console.log('摄像头控制信息', this.model?.orbitControls, this.model?.camera);
|
|
|
+ // 判断是否点击到视频
|
|
|
+ intersects.find((intersect) => {
|
|
|
+ const mesh = intersect.object;
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ mouseUpModel() {}
|
|
|
+
|
|
|
+ play(rotationParam, flag) {
|
|
|
+ if (this.windowsActionArr.frontWindow.length <= 0 || this.windowsActionArr.backWindow.length <= 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (flag === 1) {
|
|
|
+ // 前风窗动画
|
|
|
+ this.windowsActionArr.frontWindow.forEach((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 === 2) {
|
|
|
+ // 后风窗动画
|
|
|
+ this.windowsActionArr.backWindow.forEach((mesh) => {
|
|
|
+ gsap.to(mesh.rotation, {
|
|
|
+ z: -THREE.MathUtils.degToRad(rotationParam.backDeg1),
|
|
|
+ duration: (1 / 9) * Math.abs(rotationParam.backDeg1 + mesh.rotation.z),
|
|
|
+ overwrite: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else if (flag === 3) {
|
|
|
+ // 后风窗动画
|
|
|
+ this.windowsActionArr.centerWindow.forEach((mesh) => {
|
|
|
+ gsap.to(mesh.rotation, {
|
|
|
+ z: -THREE.MathUtils.degToRad(rotationParam.centerDeg1),
|
|
|
+ duration: (1 / 9) * Math.abs(rotationParam.centerDeg1 + mesh.rotation.z),
|
|
|
+ overwrite: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else if (flag === 0) {
|
|
|
+ ([...this.windowsActionArr.frontWindow, ...this.windowsActionArr.backWindow, ...this.windowsActionArr.centerWindow] as THREE.Mesh[]).forEach(
|
|
|
+ (mesh) => {
|
|
|
+ gsap.to(mesh.rotation, {
|
|
|
+ z: 0,
|
|
|
+ overwrite: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ mountedThree() {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ this.model.setGLTFModel('threeFc-sdg').then((gltf) => {
|
|
|
+ const fcModal = gltf[0];
|
|
|
+ fcModal.name = this.modelName;
|
|
|
+ // this.group?.add(fcModal);
|
|
|
+ this.group = fcModal;
|
|
|
+ this.setModalPosition();
|
|
|
+ this.initAnimation();
|
|
|
+ resolve(null);
|
|
|
+ this.addLight();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ destroy() {
|
|
|
+ this.model.clearGroup(this.group);
|
|
|
+ this.windowsActionArr.frontWindow = undefined;
|
|
|
+ this.windowsActionArr.backWindow = undefined;
|
|
|
+ this.model = null;
|
|
|
+ this.group = null;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default threeFc_8;
|
