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 { ref, watch } from "vue";

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

// 定义发射给父组件的方法
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(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;
        initScene();
        return;
    }

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

/**
 * 回调距离范围内
 */
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;
    
    ThreeWorldEventMain.find().initObj(
        objNewIframe,
        objNewIframe.objIframe,
        objNewIframe.objIframe.ChengGuangYuanJing.CommonVal.find().objScene,
        objNewIframe.objIframe.BABYLON
    );

    ThreeWorldEvent.find().initObj(
        objNewIframe,
        objNewIframe.objIframe,
        objNewIframe.objIframe.ChengGuangYuanJing.CommonVal.find().objScene,
        objNewIframe.objIframe.BABYLON
    );
    
    // // @ts-ignore
    // threeWorld().obj.newIframe.cameraVisualAngleGetListNameGpsTo("检测车");
    // // @ts-ignore
    // threeWorld().obj.newIframe.roleShow(false);
    
    // typeEvent(props.config?.threeDimensionalConfig);

    // // 触发自动点击逻辑
    // // @ts-ignore
    // threeWorld().obj.newIframe.objIframe.ChengGuangYuanJing.CommonVal.find().screenClickNumEvent();

}


/**
 * 根据不同的类型，切换对应的3d逻辑
 */
const typeEvent = (type : any) => {

    console.log(
        "根据不同的类型，切换对应的3d逻辑",
        type
    );
    
    switch(type) {

        // 操作帮助
        case 'operationHelp':
            
            break;
            
        // 设备拆解
        case 'equipmentDisassembly':
            
            break;
            
        default:
            
            break;
            
    }
    
}

</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>