water_maintenance/src/components/student/CourseChapter3d.vue

<!-- 实现具体3d逻辑使用 -->
<script setup lang="ts">
import CourseChapter3dMain from '@/components/student/CourseChapter3dMain.vue';
import { threeWorld } from "@/stores/threeWorld.ts";
import { courseChapter3dShow } from "@/stores/courseChapter3dShow.ts";
import { ThreeWorldEvent } from "./ThreeWorldEvent/js/ThreeWorldEvent.ts";
import { ThreeWorldEventMain } from "./ThreeWorldEvent/js/ThreeWorldEventMain.ts";
import { TypeEvent } from "./ThreeWorldEvent/event/TypeEvent.ts";
import { TypeClick } from "./ThreeWorldEvent/event/TypeClick.ts";
import { ComVal } from "./ThreeWorldEvent/common/ComVal.ts";
import { ref, watch } from "vue";

const props = defineProps({
    config : {
        type: Object
    },
    // 获取当前学生任务ID缺陷列表
    studentTaskIdList : {
        type: Object
    },
});

/**
 * stores 合集
 */
let storesObj = {
    "threeWorld" : threeWorld(),
    "courseChapter3dShow" : courseChapter3dShow(),
};

// 定义发射给父组件的方法
const emits = defineEmits([
    // 上一步是否显示
    'tipsBtnsUpOpen',
    // 下一步是否显示
    'tipsBtnsDownOpen',
]);

// 【开发的时候】3d场景,iframe地址
let threeWorldUrl = "3dMain/index.html#/main?id=zidingyi";

// // 【发布的时候】3d场景,iframe地址
// // 配置文件地址
// // let commonconfig = "https://www.3dyzt.com/eduTrain/3dMain/model/";
// let commonconfig = "https://www.3dyzt.com/eduTrain/3dMain/model2/";// 正式
// // let commonconfig = "https://www.3dyzt.com/eduTrain/3dMain/model3/";// 临时测试
// // 模型地址
// // let commonmodel = "https://www.3dyzt.com/eduTrain/3dMain/model/";
// let commonmodel = "https://www.3dyzt.com/eduTrain/3dMain/model2/";// 正式
// // let commonmodel = "https://www.3dyzt.com/eduTrain/3dMain/model3/";// 临时测试


// // 发布后的地址
// let threeWorldUrl = "https://www.3dyzt.com/main/index.html#/main?id=zidingyi&user=zidingyi&commonconfig=" + commonconfig + "&commonmodel=" + commonmodel;

/**
 * 上一步是否显示
 * open     true - 显示， false - 隐藏
 */
const tipsBtnsUpOpenEvent = (open : Boolean) => {
    emits('tipsBtnsUpOpen', open);
}

/**
 * 下一步是否显示
 * open     true - 显示， false - 隐藏
 */
const tipsBtnsDownOpenEvent = (open : Boolean) => {
    emits('tipsBtnsDownOpen', open);
}

/**
 * 监听发送参数变化，来控制切换3d的逻辑
 */
watch(
    () => props.config,
    (newVal, oldVal) => {

        // console.log(
        //     newVal, oldVal,
        //     props.config
        // );
        
        // 如果没有加载完成，则不触发后面的逻辑
        if (threeWorld().loadSuccess == false) {
            return;
        }

        TypeEvent.find().typeEvent(props.config?.threeDimensionalConfig);

    }
);

/**
 * 回调加载百分比
 */
const callbackLoadPercentageEvent = (json: { loadPercentage: any; }) => {
    // console.log("回调加载百分比", json)
    const loadPercentage = parseFloat(json["loadPercentage"]);
    // 加载小于百分比
    if (loadPercentage < 100) {

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

/**
 * 回调加载完成
 */
const callbackLoadEndEvent = (json : { 'roleChoiceOpenBool' : true }) => {
    // console.log("回调加载完成", json)

    // 此时是显示角色的界面
    if (json["roleChoiceOpenBool"] === true) {
        // ############################## 隐藏其他按钮界面等
        threeWorld().loadSuccess = false;
        return;
    }

    // ############################## 这个时候，是真正的进入3d画面了，才显示其他按钮界面等
    threeWorld().loadSuccess = true;
    initScene();

}

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

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

/**
 * 回调视角切换完成
 */
const callbackCameraVisualAngleJsonToLookEvent = (json : any) => {
    // console.log("视角触发完成", json);
}

/**
 * 3d加载完成优先切换到默认的视角
 */
const initScene = () => {
    
    let objNewIframe : any = threeWorld().obj.newIframe;
    let ChengGuangYuanJing : any = objNewIframe.objIframe.ChengGuangYuanJing;
    
    ThreeWorldEventMain.find().initObj(
        objNewIframe,
        objNewIframe.objIframe,
        objNewIframe.objIframe.ChengGuangYuanJing.CommonVal.find().objScene,
        objNewIframe.objIframe.BABYLON,
        storesObj
    );
    
    ThreeWorldEvent.find().initObj(
        objNewIframe,
        objNewIframe.objIframe,
        objNewIframe.objIframe.ChengGuangYuanJing.CommonVal.find().objScene,
        objNewIframe.objIframe.BABYLON,
        storesObj
    );

    TypeEvent.find().initObj(
        objNewIframe,
        objNewIframe.objIframe,
        objNewIframe.objIframe.ChengGuangYuanJing.CommonVal.find().objScene,
        objNewIframe.objIframe.BABYLON,
        storesObj
    );

    TypeClick.find().initObj(
        objNewIframe,
        objNewIframe.objIframe,
        objNewIframe.objIframe.ChengGuangYuanJing.CommonVal.find().objScene,
        objNewIframe.objIframe.BABYLON,
        storesObj
    );

    // 触发自动点击逻辑
    ChengGuangYuanJing.CommonVal.find().screenClickNumEvent();
    
    ComVal.find().initObj(
        objNewIframe,
        objNewIframe.objIframe,
        objNewIframe.objIframe.ChengGuangYuanJing.CommonVal.find().objScene,
        objNewIframe.objIframe.BABYLON,
        storesObj
    );
    
    TypeEvent.find().tipsBtnsUpOpenEventCallback = function(open : any) {
        tipsBtnsUpOpenEvent(open);
    }

    TypeEvent.find().tipsBtnsDownOpenEventCallback = function(open : any) {
        tipsBtnsDownOpenEvent(open);
    }

    ComVal.find().fpsEventAdd("threeWorld_one_init", {}, 1500, function(fpsEventAddRet : any) {
        ComVal.find().fpsEventDel(fpsEventAddRet.code);

        // 去除点击地面逻辑
        ThreeWorldEventMain.find().groundNoRemove();

        // 开启双击自动定位坐标，让双击定位物体可以被旋转
        ChengGuangYuanJing.CommonVal.find().releaseDoubleClickOpen = true;

        TypeEvent.find().threeWorld_one_init();
        TypeEvent.find().typeEvent(props.config?.threeDimensionalConfig);

    });
    
}


</script>

<template>

    <!-- 3d课程配置：{{ props.config }} -->
    <img v-if="courseChapter3dShow().show.threeWorldMask == true" class="threeWorldMask" src="../../assets/student/mask.webp" />

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

</template>

<style scoped>

    .threeWorldMask {
        position: fixed;
        z-index: 1;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        pointer-events: none;
    }

</style>