water_maintenance/src/components/ThreeWorldEventQingXiCheAndQv/MeshEvent.vue

<script setup>
import { QingXiCheAndQvMyThreeWorldStore } from "./store/QingXiCheAndQvMyThreeWorldStore.js";
import { CommonVal } from "@/components/ChengGuangYuanJing/store/CommonVal.js";

/**
 * 定位到指定的物体
 * meshId       物体id
 */
const lookMesh = (meshId) => {
    
    // 引入的3d对象, 这里的 CommonValQingXiCheAndQv 是你前面自定义的，后续可以自己更换
    var threeWorld = CommonVal().obj.CommonValQingXiCheAndQv;
    var objIframeEdit = threeWorld;
    var objIframe = threeWorld.objIframe;
    var scene = threeWorld.objIframe.ChengGuangYuanJing.CommonVal.find().objScene;
    var BABYLON = threeWorld.objIframe.BABYLON;

    // 获取对应物体的配置项和mesh对象
    let getMeshAndConfigMain = objIframeEdit.getMeshAndConfig(meshId);
    let config = getMeshAndConfigMain['config'];
    let objMesh = getMeshAndConfigMain['objMesh'];

    console.log(
        config, objMesh
    );

    // 飞到指定物体的视角
    objIframeEdit.flight(meshId);

    /**
     * 目前我们飞行过去一般是1.5秒完成，可以自己这里写个延迟后
     * 去完成，类似飞行到某个物体后，弹出什么数据
     */
    setTimeout(function() {

        console.log("我成功飞行到了物体 " + meshId + " 开始弹出对应想要的数据");

        QingXiCheAndQvMyThreeWorldStore().meshDbOpen = true;
        QingXiCheAndQvMyThreeWorldStore().meshDbOpenMeshId = meshId;

    }, 1500);
    
}

</script>

<template>
    
    <div class="MeshEvent">
        
        <div class="title">操作物体demo</div>

        <div class="list" v-on:click="lookMesh('model_1718949010369H5_Body_4.002')" >
            <p>定位到 model_1718949010369H5_Body_4.002</p>
        </div>

        <div class="list" v-on:click="lookMesh('model_1718949010369H9_Body_04.002')" >
            <p>定位到 model_1718949010369H9_Body_04.002</p>
        </div>

        <div class="list" v-on:click="lookMesh('model_1718949010369EHS9_Body_02.002')" >
            <p>定位到 model_1718949010369EHS9_Body_02.002</p>
        </div>

        <div class="list" v-on:click="lookMesh('model_1718949010369HS7_Body_01.002')" >
            <p>定位到 model_1718949010369HS7_Body_01.002</p>
        </div>

        <div class="list" v-on:click="lookMesh('model_1718949010369HS5_Body_01.003')" >
            <p>定位到 model_1718949010369HS5_Body_01.003</p>
        </div>

    </div>

</template>

<style lang="less" scoped>

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

.MeshEvent {

    position: fixed;
    top: 0px;
    left: 0px;
    width: 300px;
    padding: 5px;
    z-index: 1;
    background-color: #000000;
    border: 1px solid #ffffff;

    .title {

        width: 100%;
        padding: 5px;
        text-align: center;
        font-size: 14px;
        border: 1px solid #ffffff;
        color: #ffffff;

    }

    .list {
        width: 100%;
        padding: 3px;
        border: 1px solid #ffffff;
        color: #ffffff;
        cursor:pointer;
    }

}

</style>