|
@@ -15,6 +15,13 @@ class doubleWindowYjl {
|
|
|
};
|
|
|
playerStartClickTime1 = new Date().getTime();
|
|
|
playerStartClickTime2 = new Date().getTime();
|
|
|
+ mixers: THREE.AnimationMixer | undefined;
|
|
|
+ // fmClock = new THREE.Clock();
|
|
|
+
|
|
|
+ clipActionArr = {
|
|
|
+ frontDoor: null as unknown as THREE.AnimationAction,
|
|
|
+ backDoor: null as unknown as THREE.AnimationAction,
|
|
|
+ };
|
|
|
|
|
|
constructor(model) {
|
|
|
this.model = model;
|
|
@@ -157,28 +164,53 @@ class doubleWindowYjl {
|
|
|
this.group.rotation.y += 0.00002 * 30 * this.direction;
|
|
|
}
|
|
|
}
|
|
|
+ // if (this.mixers && this.fmClock.running) {
|
|
|
+ // this.mixers.update(2);
|
|
|
+ // }
|
|
|
}
|
|
|
|
|
|
/* 提取风门序列帧,初始化前后门动画 */
|
|
|
initAnimation() {
|
|
|
- const meshArr01: THREE.Object3D[] = [];
|
|
|
- const meshArr02: THREE.Object3D[] = [];
|
|
|
- const windowGroup = new THREE.Group();
|
|
|
- windowGroup.name = 'hiddenGroup';
|
|
|
- this.group.getObjectByName('sdFc')?.children.forEach((obj) => {
|
|
|
- if (obj.type === 'Mesh' && obj.name && (obj.name.startsWith('shanye') || obj.name.startsWith('FCshanye'))) {
|
|
|
- if (obj.name.startsWith('FCshanye')) {
|
|
|
- obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0);
|
|
|
- meshArr01.push(obj);
|
|
|
- } else if (obj.name.startsWith('shanye')) {
|
|
|
- obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0);
|
|
|
- meshArr02.push(obj);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- this.windowsActionArr.frontWindow = meshArr01;
|
|
|
- this.windowsActionArr.backWindow = meshArr02;
|
|
|
- this.group?.add(windowGroup);
|
|
|
+ const sdFcModal = this.group.getObjectByName('sdFc-yjl');
|
|
|
+ if (!sdFcModal) return;
|
|
|
+ // 初始化窗的动画
|
|
|
+ const fengchuang1 = sdFcModal?.getObjectByName('FengChuang');
|
|
|
+ const fengchuang2 = sdFcModal?.getObjectByName('FengChuang1');
|
|
|
+ const meshArr01: THREE.Mesh[] = [];
|
|
|
+ const meshArr02: THREE.Mesh[] = [];
|
|
|
+ if (fengchuang1 && fengchuang2) {
|
|
|
+ fengchuang1.getObjectByName('chuang')?.children.forEach((item: THREE.Object3D) => {
|
|
|
+ item.children.forEach((obj: THREE.Mesh) => {
|
|
|
+ if (obj.name && obj.name.startsWith('shanye')) {
|
|
|
+ obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0);
|
|
|
+ meshArr01.push(obj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ fengchuang2.getObjectByName('chuang001')?.children.forEach((item: THREE.Object3D) => {
|
|
|
+ item.children.forEach((obj: THREE.Mesh) => {
|
|
|
+ if (obj.name && obj.name.startsWith('d__FCshanye')) {
|
|
|
+ obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0);
|
|
|
+ meshArr02.push(obj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.windowsActionArr.frontWindow = meshArr01;
|
|
|
+ this.windowsActionArr.backWindow = meshArr02;
|
|
|
+ }
|
|
|
+
|
|
|
+ // // 初始化门的动画
|
|
|
+ // this.mixers = new THREE.AnimationMixer(sdFcModal);
|
|
|
+ // const frontDoor = sdFcModal?.animations[0];
|
|
|
+ // const frontClipAction = this.mixers.clipAction(frontDoor, sdFcModal);
|
|
|
+ // frontClipAction.clampWhenFinished = true;
|
|
|
+ // frontClipAction.loop = THREE.LoopOnce;
|
|
|
+ // this.clipActionArr.frontDoor = frontClipAction;
|
|
|
+ // const backDoor = sdFcModal?.animations[1];
|
|
|
+ // const backClipAction = this.mixers.clipAction(backDoor, sdFcModal);
|
|
|
+ // backClipAction.clampWhenFinished = true;
|
|
|
+ // backClipAction.loop = THREE.LoopOnce;
|
|
|
+ // this.clipActionArr.backDoor = backClipAction;
|
|
|
}
|
|
|
|
|
|
/* 点击风窗,风窗全屏 */
|
|
@@ -236,119 +268,127 @@ class doubleWindowYjl {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- async initCamera(dom1?, dom2?) {
|
|
|
- const videoPlayer1 = dom1;
|
|
|
- const videoPlayer2 = dom2;
|
|
|
- let monitorPlane: THREE.Mesh | null = null;
|
|
|
- if (!videoPlayer1 || !videoPlayer2) {
|
|
|
- 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;
|
|
|
+ // // 播放动画
|
|
|
+ // doorPlay(handlerState, timeScale = 0.01) {
|
|
|
+ // if (this.clipActionArr.frontDoor && this.clipActionArr.backDoor) {
|
|
|
+ // 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();
|
|
|
+ // };
|
|
|
+ // break;
|
|
|
+ // case 2: // 关闭前门
|
|
|
+ // handler = () => {
|
|
|
+ // this.clipActionArr.frontDoor.paused = true;
|
|
|
+ // this.clipActionArr.frontDoor.reset(); //
|
|
|
+ // this.clipActionArr.frontDoor.time = 3;
|
|
|
+ // this.clipActionArr.frontDoor.timeScale = -timeScale;
|
|
|
+ // // this.clipActionArr.frontDoor.clampWhenFinished = true;
|
|
|
+ // this.clipActionArr.frontDoor.play();
|
|
|
+ // this.fmClock.start();
|
|
|
+ // };
|
|
|
+ // 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();
|
|
|
+ // };
|
|
|
+ // break;
|
|
|
+ // case 4: // 关闭后门
|
|
|
+ // handler = () => {
|
|
|
+ // this.clipActionArr.backDoor.paused = true;
|
|
|
+ // this.clipActionArr.backDoor.reset();
|
|
|
+ // this.clipActionArr.backDoor.time = 3;
|
|
|
+ // this.clipActionArr.backDoor.timeScale = -timeScale;
|
|
|
+ // // this.clipActionArr.backDoor.clampWhenFinished = true;
|
|
|
+ // this.clipActionArr.backDoor.play();
|
|
|
+ // this.fmClock.start();
|
|
|
+ // };
|
|
|
+ // break;
|
|
|
+ // // case 5: // 打开前后门
|
|
|
+ // // handler = () => {
|
|
|
+ // // this.clipActionArr.backDoor.paused = true;
|
|
|
+ // // this.clipActionArr.frontDoor.paused = true;
|
|
|
|
|
|
- const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
|
|
|
- monitorPlane = new THREE.Mesh(planeGeometry, textMaterial);
|
|
|
+ // // this.clipActionArr.frontDoor.reset();
|
|
|
+ // // this.clipActionArr.frontDoor.time = 0;
|
|
|
+ // // this.clipActionArr.frontDoor.timeScale = 0.01;
|
|
|
+ // // this.clipActionArr.frontDoor.clampWhenFinished = true;
|
|
|
+ // // this.clipActionArr.frontDoor.play();
|
|
|
|
|
|
- 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.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.034, 0.024, 1);
|
|
|
- mesh?.position.set(-3.332, 0.11, -0.23);
|
|
|
- mesh.rotation.y = -Math.PI;
|
|
|
- this.group.add(mesh);
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.log('视频信号异常');
|
|
|
- }
|
|
|
- }
|
|
|
- const player2 = this.group.getObjectByName('player2');
|
|
|
- if (player2) {
|
|
|
- this.model.clearMesh(player2);
|
|
|
- this.group.remove(player2);
|
|
|
- }
|
|
|
- const noPlayer2 = this.group.getObjectByName('noPlayer2');
|
|
|
- if (noPlayer2) {
|
|
|
- this.model.clearMesh(noPlayer2);
|
|
|
- this.group.remove(noPlayer2);
|
|
|
- }
|
|
|
- if (!videoPlayer2 && videoPlayer2 === null) {
|
|
|
- if (monitorPlane && !this.group.getObjectByName('noPlayer2')) {
|
|
|
- const planeMesh = monitorPlane.clone();
|
|
|
- planeMesh.name = 'noPlayer2';
|
|
|
- planeMesh.scale.set(0.0085, 0.0056, 0.012);
|
|
|
- planeMesh.position.set(4.29, 0.02, -0.41);
|
|
|
- this.group?.add(planeMesh.clone());
|
|
|
- }
|
|
|
- } else if (videoPlayer2) {
|
|
|
- try {
|
|
|
- const mesh = renderVideo(this.group, videoPlayer2, 'player2');
|
|
|
- if (mesh) {
|
|
|
- mesh?.scale.set(-0.034, 0.024, 1);
|
|
|
- mesh?.position.set(-3.332, 0.11, -0.23);
|
|
|
- mesh.rotation.y = -Math.PI;
|
|
|
- this.group.add(mesh);
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.log('视频信号异常');
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // // 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(playerDom) {
|
|
|
return new Promise((resolve) => {
|
|
|
this.model.setGLTFModel(['sdFc-yjl'], this.group).then(() => {
|
|
|
+ console.log(this.group);
|
|
|
this.setModalPosition();
|
|
|
this.initAnimation();
|
|
|
resolve(null);
|
|
|
- // this.initCamera(playerDom);
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
destroy() {
|
|
|
this.model.clearGroup(this.group);
|
|
|
- this.windowsActionArr.frontWindow = undefined;
|
|
|
- this.windowsActionArr.backWindow = undefined;
|
|
|
+ this.windowsActionArr.frontWindow = [];
|
|
|
+ this.windowsActionArr.backWindow = [];
|
|
|
this.model = null;
|
|
|
this.group = null;
|
|
|
}
|