water_maintenance/src/components/ThreeWorldEventQingXiCheAndQv/ThreeWorldEventMainQingXiCheAndQv.vue

<script setup>
import { watch } from "vue";
import { CommonVal } from "@/components/ChengGuangYuanJing/store/CommonVal.js";
import { QingXiCheAndQvMyThreeWorldStore } from "./store/QingXiCheAndQvMyThreeWorldStore.js";
import ThreeWorldQingXiCheAndQv from "./ThreeWorldQingXiCheAndQv.vue";
import { QingXiCheAndQvThreeWorldEventMain } from "./js/QingXiCheAndQvThreeWorldEventMain.js";
import { QingXiCheAndQvCarEvent } from "./js/QingXiCheAndQvCarEvent.js";
import { QingXiCheAndQvCarEventClick } from "./js/QingXiCheAndQvCarEventClick.js";
import { QingXiCheAndQvComHighlightLayer } from "./js/QingXiCheAndQvComHighlightLayer.js";
import { QingXiCheAndQvThreeWorldCamera } from "./js/QingXiCheAndQvThreeWorldCamera.js";
import { WindowTxtStore } from "@/components/WindowQingXiCheAndQv/store/WindowTxtStore.js";
import { WindowVideoStore } from "@/components/WindowQingXiCheAndQv/store/WindowVideoStore.js";
import { WindowCountdownStore } from "@/components/WindowQingXiCheAndQv/store/WindowCountdownStore.js";
import { ComMusic } from "../../utils/common/ComMusic.js";
import { QingXiCheAndQvComRes } from "./js/QingXiCheAndQvComRes.js";
import { WindowEvent } from "../WindowQingXiCheAndQv/js/WindowEvent.js";
import { WindowVideoRemoveColorStore } from "@/components/WindowQingXiCheAndQv/store/WindowVideoRemoveColorStore.js";
import { QingXiCheAndQvComClipPlaneMeshEvent } from "./js/QingXiCheAndQvComClipPlaneMeshEvent.js";
import { QingXiCheAdnQvCarEventStep } from "./js/QingXiCheAdnQvCarEventStep.js";


/**
 * 平时开发3d代码逻辑可以写这里
 * 更多的代码逻辑，建议用面向对象的方式去开发
 * 不然后面的逻辑会越来越复杂
 */

/**
 * 举个例子，我们oss文件上传了，编辑器打包后的代码
 * 地址为 https://**.com/3dmodel/index.html
 * 
 * 我们将对应的项目的3d模型，在了同域的地址是
 * https://**.com/自定义目录1/自定义目录2/model/
 * 
 */

// // 拼接出进入3d场景的地址，用于后续发布
// let threeWorldUrl = "https://**.com/3dmodel/index.html#/main?id=zidingyi&user=zidingyi"
// + '&commonconfig=https://**.com/自定义目录1/自定义目录2/model/'
// + '&commonmodel=https://**.com/自定义目录1/自定义目录2/model/';


// /**
//  * 本地开发调试固定地址
//  */
// let threeWorldUrl = "3dMain/index.html#/main?id=zidingyi";

// let commonconfig = "http://localhost:5173/3dMain/model_water_car_3/";
// let commonmodel = "http://localhost:5173/3dMain/model_water_car_3/";

// let threeWorldUrl = "3dMain/index.html#/main?id=zidingyi_lu_cun&user=zidingyi"
// + '&commonconfig=' + commonconfig
// + '&commonmodel=' + commonmodel;

// let commonconfig = "https://www.3dyzt.com/waterMaintenance/3dMain/model_water_car_3/";
// let commonmodel = "https://www.3dyzt.com/waterMaintenance/3dMain/model_water_car_3/";

// let threeWorldUrl = "3dMain/index.html#/main?id=zidingyi_lu_cun&user=zidingyi"
// + '&commonconfig=' + commonconfig
// + '&commonmodel=' + commonmodel;


// let hostUrl = import.meta.env.VITE_THREE_WORLD_URL;
// let commonconfig = hostUrl + "/3dMain/model_water_car_6/";
// let commonmodel = hostUrl + "/3dMain/model_water_car_6/";

// let threeWorldUrl = "3dMain/index.html#/main?id=zidingyi_lu_cun&user=zidingyi"
// + '&commonconfig=' + commonconfig
// + '&commonmodel=' + commonmodel;


let hostUrl = import.meta.env.VITE_THREE_WORLD_URL;
let commonconfig = hostUrl + "/3dMain/model_water_car_7/";
let commonmodel = hostUrl + "/3dMain/model_water_car_7/";

let threeWorldUrl = "3dMain/index.html#/main?id=zidingyi_lu_cun&user=zidingyi"
+ '&commonconfig=' + commonconfig
+ '&commonmodel=' + commonmodel;


/**
 * 回调加载百分比
 */
const callbackLoadPercentageEvent = (json) => {
    // console.log("回调加载百分比", json);

    let loadPercentage = parseFloat(json["loadPercentage"]);
    if (loadPercentage == null || loadPercentage == undefined || loadPercentage < 0) {
        loadPercentage = 0;
    }

    QingXiCheAndQvMyThreeWorldStore().loadPercentage = loadPercentage;
    // 加载小于百分比
    if (loadPercentage < 100) {

        // ##############################【这里只做控制】隐藏其他按钮界面等
        CommonVal().loadSuccess = false;
        return;

    }
  
}

/**
 * 回调加载完成
 */
const callbackLoadEndEvent = (json) => {
    // console.log("回调加载完成", json);

    QingXiCheAndQvMyThreeWorldStore().loadPercentage = 100;
    
    // 此时是显示角色的界面
    if (json["roleChoiceOpenBool"] === true) {
        // ############################## 隐藏其他按钮界面等
        CommonVal().loadSuccess = false;
        return;
    }
    
    // ############################## 这个时候，是真正的进入3d画面了，才显示其他按钮界面等
    CommonVal().loadSuccess = true;

    // 初始化操作3d的类对象，后续代码在这里面操作
    QingXiCheAndQvThreeWorldEventMain.find().initObj(
        CommonVal().obj.CommonValQingXiCheAndQv,
        CommonVal().obj.CommonValQingXiCheAndQv.objIframe,
        CommonVal().obj.CommonValQingXiCheAndQv.objIframe.ChengGuangYuanJing.CommonVal.find().objScene,
        CommonVal().obj.CommonValQingXiCheAndQv.objIframe.BABYLON
    );

    QingXiCheAndQvComHighlightLayer.find().init(
        QingXiCheAndQvThreeWorldEventMain.find()
    );

    QingXiCheAndQvThreeWorldCamera.find().initObj(
        CommonVal().obj.CommonValQingXiCheAndQv,
        CommonVal().obj.CommonValQingXiCheAndQv.objIframe,
        CommonVal().obj.CommonValQingXiCheAndQv.objIframe.ChengGuangYuanJing.CommonVal.find().objScene,
        CommonVal().obj.CommonValQingXiCheAndQv.objIframe.BABYLON
    );

    QingXiCheAndQvThreeWorldCamera.find().addConfig();

    QingXiCheAndQvCarEvent.find().objThreeWorldEventMain = QingXiCheAndQvThreeWorldEventMain.find();
    QingXiCheAndQvCarEventClick.find().objThreeWorldEventMain = QingXiCheAndQvThreeWorldEventMain.find();
    QingXiCheAndQvComClipPlaneMeshEvent.find().objThreeWorldEventMain = QingXiCheAndQvThreeWorldEventMain.find();

    QingXiCheAndQvComClipPlaneMeshEvent.find().updateConfig();

    QingXiCheAdnQvCarEventStep.find().objThreeWorldEventMain = QingXiCheAndQvThreeWorldEventMain.find();

    // 新增被操作的 Store
    QingXiCheAndQvCarEvent.find().ComStore["WindowTxtStore"] = WindowTxtStore;
    QingXiCheAndQvCarEvent.find().ComStore["WindowVideoStore"] = WindowVideoStore;
    QingXiCheAndQvCarEvent.find().ComStore["WindowCountdownStore"] = WindowCountdownStore;

    WindowEvent.find().ComStore["WindowTxtStore"] = WindowTxtStore;
    WindowEvent.find().ComStore["WindowVideoStore"] = WindowVideoStore;
    WindowEvent.find().ComStore["WindowCountdownStore"] = WindowCountdownStore;
    WindowEvent.find().ComStore["WindowVideoRemoveColorStore"] = WindowVideoRemoveColorStore;

    configMusicEvent();
    configVideoEvent();
    
    setTimeout(function() {

        QingXiCheAndQvCarEvent.find().evnetInit_1();
        
        // QingXiCheAndQvThreeWorldEventMain.find().toFlyModel();
        QingXiCheAndQvThreeWorldEventMain.find().groundNoRemove();
        // QingXiCheAndQvThreeWorldEventMain.find().eyeNameLook("实验");
        
        // 自动触发模拟点击,解决加载完成后，在点击下，重新设置了材质，感觉会有问题
        CommonVal().obj.CommonValQingXiCheAndQv.objIframe.ChengGuangYuanJing.CommonVal.find().screenClickNumEvent();
        
    }, 1000);
    // }, 300);
  
}


/**
 * 配置用到的声音文件
 */
const configMusicEvent = () => {

    ComMusic.find().codeJson["lightningOne"] = new URL("../../assets/res/music/lightningOne.mp3", import.meta.url).href;
    ComMusic.find().codeJson["lightningTwo"] = new URL("../../assets/res/music/lightningTwo.mp3", import.meta.url).href;
    ComMusic.find().codeJson["lightningThree"] = new URL("../../assets/res/music/lightningThree.mp3", import.meta.url).href;

    // ComMusic.find().play("lightningThree");

}

/**
 * 配置用到的视频地址文件 等其他文件
 */
const configVideoEvent = () => {

    QingXiCheAndQvCarEvent.find().videoJson["02"] = new URL("../../assets/res/video/02.mp4", import.meta.url).href;
    QingXiCheAndQvCarEvent.find().videoJson["03"] = new URL("../../assets/res/video/03.mp4", import.meta.url).href;
    QingXiCheAndQvCarEvent.find().videoJson["04"] = new URL("../../assets/res/video/04.mp4", import.meta.url).href;

    QingXiCheAndQvCarEvent.find().videoJson["videw_liu_cheng_1"] = new URL("../../assets/res/video/videw_liu_cheng_1.mp4", import.meta.url).href;
    QingXiCheAndQvCarEvent.find().videoJson["videw_liu_cheng_2"] = new URL("../../assets/res/video/videw_liu_cheng_2.mp4", import.meta.url).href;


    QingXiCheAndQvComRes.find().resJson["img_shuang"] = new URL("../../assets/res/img/texture/shuang_shan.jpg", import.meta.url).href;

    // 打开车辆双闪，同时开启工作双闪灯
    QingXiCheAndQvComRes.find().resJson["QingXiChe_01"] = new URL("../../assets/res/mp4/01.mp4", import.meta.url).href;
    // 按下取力器开关
    QingXiCheAndQvComRes.find().resJson["QingXiChe_02"] = new URL("../../assets/res/mp4/02.mp4", import.meta.url).href;
    // 从水管固定座上拧下高压水管
    QingXiCheAndQvComRes.find().resJson["QingXiChe_03"] = new URL("../../assets/res/mp4/03.mp4", import.meta.url).href;
    // 确认手刹已拉起，档位是空档，然后发动车辆
    QingXiCheAndQvComRes.find().resJson["QingXiChe_04"] = new URL("../../assets/res/mp4/04.mp4", import.meta.url).href;
    // 取出高压水管并放入布管器内
    QingXiCheAndQvComRes.find().resJson["QingXiChe_05"] = new URL("../../assets/res/mp4/05.mp4", import.meta.url).href;
    // 在触屏操作面板上将管长清零
    QingXiCheAndQvComRes.find().resJson["QingXiChe_06"] = new URL("../../assets/res/mp4/06.mp4", import.meta.url).href;
    // 拆卸高压喷头放入喷头机箱内
    QingXiCheAndQvComRes.find().resJson["QingXiChe_07"] = new URL("../../assets/res/mp4/07.mp4", import.meta.url).href;
    // 关闭车辆双闪和工作双闪箭头灯
    QingXiCheAndQvComRes.find().resJson["QingXiChe_08"] = new URL("../../assets/res/mp4/08.mp4", import.meta.url).href;
    // 关闭取力器开关
    QingXiCheAndQvComRes.find().resJson["QingXiChe_09"] = new URL("../../assets/res/mp4/09.mp4", import.meta.url).href;
    // 将车辆正常熄火,恭喜你完成全部操作
    QingXiCheAndQvComRes.find().resJson["QingXiChe_10"] = new URL("../../assets/res/mp4/10.mp4", import.meta.url).href;
    // 调整卷筒器到合适位置
    QingXiCheAndQvComRes.find().resJson["QingXiChe_11"] = new URL("../../assets/res/mp4/11.mp4", import.meta.url).href;
    // 至触摸屏关闭冲水开关
    QingXiCheAndQvComRes.find().resJson["QingXiChe_12"] = new URL("../../assets/res/mp4/12.mp4", import.meta.url).href;
    // 打开车门进入驾驶室
    QingXiCheAndQvComRes.find().resJson["QingXiChe_13"] = new URL("../../assets/res/mp4/13.mp4", import.meta.url).href;
    // 疏通管道后减小油门到初始状态
    QingXiCheAndQvComRes.find().resJson["QingXiChe_14"] = new URL("../../assets/res/mp4/14.mp4", import.meta.url).href;
    // 踩下车辆离合器5秒
    QingXiCheAndQvComRes.find().resJson["QingXiChe_15"] = new URL("../../assets/res/mp4/15.mp4", import.meta.url).href;
    // 在施工范围放置警示标识
    QingXiCheAndQvComRes.find().resJson["QingXiChe_16"] = new URL("../../assets/res/mp4/16.mp4", import.meta.url).href;
    // 套上高压水管护管器
    QingXiCheAndQvComRes.find().resJson["QingXiChe_17"] = new URL("../../assets/res/mp4/17.mp4", import.meta.url).href;
    // 将高压水管放入待施工的管道内
    QingXiCheAndQvComRes.find().resJson["QingXiChe_18"] = new URL("../../assets/res/mp4/18.mp4", import.meta.url).href;
    // 回到驾驶室踩下车辆离合器5秒
    QingXiCheAndQvComRes.find().resJson["QingXiChe_19"] = new URL("../../assets/res/mp4/19.mp4", import.meta.url).href;
    // 安装合适的高压喷头
    QingXiCheAndQvComRes.find().resJson["QingXiChe_20"] = new URL("../../assets/res/mp4/20.mp4", import.meta.url).href;
    // 在安全的情况开启冲水开关
    QingXiCheAndQvComRes.find().resJson["QingXiChe_21"] = new URL("../../assets/res/mp4/21.mp4", import.meta.url).href;
    // 缓慢抬起离合器
    QingXiCheAndQvComRes.find().resJson["QingXiChe_22"] = new URL("../../assets/res/mp4/22.mp4", import.meta.url).href;
    // 下车确定安全灯显示是否正常
    QingXiCheAndQvComRes.find().resJson["QingXiChe_23"] = new URL("../../assets/res/mp4/23.mp4", import.meta.url).href;
    // 根据现场工况调节冲水压力
    QingXiCheAndQvComRes.find().resJson["QingXiChe_24"] = new URL("../../assets/res/mp4/24.mp4", import.meta.url).href;
    // 带压收回高压水管
    QingXiCheAndQvComRes.find().resJson["QingXiChe_25"] = new URL("../../assets/res/mp4/25.mp4", import.meta.url).href;
    // 将高压水管拧到水管固定座
    QingXiCheAndQvComRes.find().resJson["QingXiChe_26"] = new URL("../../assets/res/mp4/26.mp4", import.meta.url).href;

    
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_01"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_02"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_03"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_04"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_05"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_06"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_07"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_08"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_09"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_10"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_11"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_12"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_13"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_14"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_15"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_16"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_17"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_18"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_19"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_20"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_21"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_22"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_23"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_24"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_25"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;
    // QingXiCheAndQvComRes.find().resJson["QingXiChe_26"] = new URL("../../assets/res/mp4/demo/01.mp4", import.meta.url).href;

}


/**
 * 回调距离范围内
 */
const callbackDistanceYesEvent = (json) => {
    // console.log("回调距离范围内", json);
}

/**
 * 回调距离范围外
 */
const callbackDistanceNoEvent = (json) => {
    // console.log("回调距离范围外", json);
}

/**
 * 回调视角切换完成
 */
const callbackCameraVisualAngleJsonToLookEvent = (json) => {

    console.log("视角触发完成", json);

    let objIframeEdit = CommonVal().obj.CommonValQingXiCheAndQv;

    if (json.name == '绕车1') {
        objIframeEdit.cameraVisualAngleGetListNameGpsTo("绕车2");
    }

    if (json.name == '绕车2') {
        objIframeEdit.cameraVisualAngleGetListNameGpsTo("绕车3");
    }

    if (json.name == '绕车3') {
        objIframeEdit.cameraVisualAngleGetListNameGpsTo("绕车4");
    }

    if (json.name == '绕车4') {
        objIframeEdit.cameraVisualAngleGetListNameGpsTo("绕车5");
    }

    if (json.name == '绕车5') {
        objIframeEdit.cameraVisualAngleGetListNameGpsTo("绕车6");
    }

    if (json.name == '绕车6') {
        objIframeEdit.cameraVisualAngleGetListNameGpsTo("清洗车-开门");
    }

    if (json.name == '调整坐姿') {
        objIframeEdit.cameraVisualAngleGetListNameGpsTo("手握方向盘");
    }

    if (json.name == '手握方向盘') {
        objIframeEdit.cameraVisualAngleGetListNameGpsTo("踩下离合器踏板");
    }


    if (json.name == '回到驾驶室踩下车辆离合器5秒1') {
        QingXiCheAdnQvCarEventStep.find().animationAllTypeUpdate('清洗车_打开左门', function() {
            objIframeEdit.cameraVisualAngleGetListNameGpsTo("回到驾驶室踩下车辆离合器5秒2");
        });
    }

    if (json.name == '清洗车流程完成') {
        QingXiCheAndQvCarEventClick.find().closeCarMen(function() {});
    }
    

}


</script>

<template>
    <div class="ThreeWorldEventMain">

        <ThreeWorldQingXiCheAndQv
        :iframeId="'CommonValQingXiCheAndQv'"
        :url="threeWorldUrl"
        @callbackLoadPercentage="callbackLoadPercentageEvent"
        @callbackLoadEnd="callbackLoadEndEvent"
        @callbackDistanceYes="callbackDistanceYesEvent"
        @callbackDistanceNo="callbackDistanceNoEvent"
        @callbackCameraVisualAngleJsonToLook="callbackCameraVisualAngleJsonToLookEvent"
        ></ThreeWorldQingXiCheAndQv>

        <img class="mengBan" src="../../assets/res/img/com/meng_ban.webp" />

    </div>
</template>

<style lang="less" scoped>

.ThreeWorldEventMain * {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.ThreeWorldEventMain {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;

    .mengBan {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 1000;
        /* 注意这里必须是被允许穿透点击的，否则堆叠高于了  canvas，则会出现无法点击到canvas了。加了这个即可解决这个问题  */
        pointer-events: none;
        opacity: 0.3;
    }

}

</style>