<template>
    <div class="container" ref="container"></div>
</template>

<script setup lang='ts'>
import { ref, onMounted, defineExpose } from 'vue';
import * as THREE from 'three';
import * as TWEEN from '@tweenjs/tween.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import * as SceneUtils from 'three/examples/jsm/utils/SceneUtils.js';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import { DragControls } from "@/utils/DragControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { Line2 } from 'three/examples/jsm/lines/Line2'
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
import { useFactoryStore } from "@/store/module/Factory"
import { useRouter } from 'vue-router';
import { updateCoordinateByPoint } from "@/http/AerialView/index"
import { ElNotification } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router';
let { t } = useI18n();
let route = useRoute();
let edit = false;
let type = route.params?.type;
if (type == 'edit') {
    edit = true;
}
const store = useFactoryStore();
const router = useRouter();

const container = ref();
let iw = 1920;
let ih = 1080;
const boxObjects: any = ref([]);
let scene: any = null; //场景
let camera: any = null; //相机
let canvas: any = null; //用作渲染的canvas
let renderer: any = null; //渲染器
let controls: any = null; //控制器
let labelRenderer: any = null; //2D渲染器
let labelControls: any = null; //2D控制器
const group = new THREE.Group();//用于将建筑物的各个零件组合起来
let timer: any = null;
let dragControls: any = null;
let cssRender: any = null;
let saveTipDom: any = null;
const requires = {
    '粉尘': require('@/assets/img/Factory/fenchen.jpg'),
    '烟雾': require('@/assets/img/Factory/yanwu.jpg'),
    'TVOC/甲醛': require('@/assets/img/Factory/tvoc.jpg'),
    '噪音': require('@/assets/img/Factory/shengyin.jpg'),
    '火花': require('@/assets/img/Factory/huohua.jpg'),
    '电力': require('@/assets/img/Factory/dianlu.jpg'),
    '气压': require('@/assets/img/Factory/qiya.jpg'),
    '水压': require('@/assets/img/Factory/shuiya.jpg'),
    '温湿度': require('@/assets/img/Factory/wendu.jpg'),
    '网关': require('@/assets/img/Factory/wangguan.jpg'),
    '燃气': require('@/assets/img/Factory/ranqi.jpg'),
    '设备': require('@/assets/img/Factory/shebei.jpg'),
    'ny': require("@/assets/img/Factory/ny.jpg"),
    'wood': require("@/assets/img/Factory/wood.jpg"),
    // 'wall1': require("@/assets/img/Factory/floor1.jpeg"),
    'wall1': require("@/assets/img/Factory/wall1.jpg"),
    'tile': require("@/assets/img/Factory/tile.jpg"),
    'door': require("@/assets/img/Factory/door.jpg"),
    'sky': require("@/assets/img/Factory/sky.jpg"),
    'titleFloor': require("@/assets/img/Factory/screen_title.png"),
    'switch': require("@/assets/img/Factory/switch.jpg"),
}

const workerShopRoute = {
    '大件车间地板': '/MechanicalViewDajian',
    '焊接车间地板': '/MechanicalViewHanjie',
    '机加车间地板': '/MechanicalViewJijia',
    '精加车间地板': '/MechanicalViewJingjia',
    '精饰车间地板': '/MechanicalViewJingshi',
}
let getSensorDataTimer = null;
let getDevDataTimer = null;


const normal_size = { baseWidth: 10, baseHeght: 10, baseLength: 10 };//正常大小
const small_size = { baseWidth: 8, baseHeght: 8, baseLength: 8 };//缩小的大小

const coordinate = {}
/**
 * @函数功能:
 * @param {*} val 重置画布宽高值
 * @出口参数:
 * @函数备注:
 */
function reset(val: any) {
    //宽高为0时跳出该方法

    if (!val.oWidth && !val.oHeight) return;
    // mapSize.width=val.width
    // mapSize.height=val.height
    // 更新修改相机比例
    container.value.style.width = val.oWidth;
    container.value.style.height = val.oHeight;
    camera.aspect = val.oWidth / val.oHeight;
    // 更新摄像机的投影矩阵
    camera.updateProjectionMatrix();

    //处理返回操作时dom层数变多问题
    if (document.getElementsByClassName("cssrender").length > 1) {
        document.getElementsByClassName("cssrender")[1].remove();
    }
    // 更新画布大小
    renderer.setSize(
        val.oWidth, // 宽度
        val.oHeight // 高度
    );
    labelRenderer.setSize(
        val.oWidth, // 宽度
        val.oHeight // 高度
    );
    // 更新画布像素比
    renderer.setPixelRatio(container.value.devicePixelRatio);

    //重置盒子尺寸
}
defineExpose({
    reset,
});
const init = () => {
    canvas = container.value;
    //创建场景
    scene = new THREE.Scene();
    //创建一个透视相机
    camera = new THREE.PerspectiveCamera(45, iw / ih, 1, 3000);

    // 创建渲染器
    renderer = new THREE.WebGLRenderer();
    // 设置渲染器的初始颜色
    renderer.setClearColor(new THREE.Color(0xeeeeee));
    // 设置输出canvas画面的大小
    renderer.setSize(iw, ih)
    // 设置渲染物体阴影
    renderer.shadowMap.enabled = true;

    //设置2D渲染器
    labelRenderer = new CSS2DRenderer();
    labelRenderer.setSize(iw, ih);
    labelRenderer.domElement.style.position = 'absolute';
    labelRenderer.domElement.style.top = 0;
    labelRenderer.domElement.style.outline = "none";
    canvas.appendChild(labelRenderer.domElement);




    //创建环境光
    const hjLight = new THREE.AmbientLight(0xffffff);
    //添加环境光至场景
    scene.add(hjLight);
    // 定位相机，并且指向场景中心
    if (edit) {
        camera.position.x = 0;
        camera.position.y = 820; //650
        camera.position.z = 0; //600
    } else {
        camera.position.x = 0;
        camera.position.y = 650; //650
        camera.position.z = 600; //600
    }


    camera.lookAt(scene.position)


    renderer.render(scene, camera)
    // 将渲染器输出添加html元素中
    canvas.appendChild(renderer.domElement);
    //添加房子的group到场景中
    scene.add(group);

    // 创建controls对象;
    controls = new OrbitControls(camera, labelRenderer.domElement)
    // labelControls = new OrbitControls(camera, labelRenderer.domElement)

    // 监听控制器的鼠标事件，执行渲染内容
    controls.addEventListener('change', () => {
        clearInterval(timer)
        renderer.render(scene, camera)
        labelRenderer.render(scene, camera)
    })
    /**-------------------------------结束后注释------------------------------------------------- */
    if (edit) {
        controls.mouseButtons = {
            // LEFT: ,
            MIDDLE: THREE.MOUSE.DOLLY,
            RIGHT: THREE.MOUSE.PAN
        };
    }






    //创建地面
    createGround()
    //创建仓库1
    createHouse(`${t('messages.store')}1`, { baseWidth: 262, baseHeght: 30, baseLength: 53 }, { x: -322, y: 0, z: -304 })
    //创建仓库2
    createHouse(`${t('messages.store')}2`, { baseWidth: 262, baseHeght: 30, baseLength: 53 }, { x: 183, y: 0, z: -304 })
    //创建综合楼 baseWidth: 114, baseHeght: 50, baseLength: 353  x: -397, y: 0, z: 11
    createHouse(t('messages.SynthesizeRoom'), { baseWidth: 114, baseHeght: 50, baseLength: 353 }, { x: -397, y: 0, z: -11 })
    /**
     * 创建综合楼里的墙
     */
    createUseWall('综合楼的墙1', { baseWidth: 1, baseHeght: 50, baseLength: 159 }, { x: -413, y: 0, z: -26.5 })
    createUseWall('综合楼的墙2', { baseWidth: 41, baseHeght: 50, baseLength: 1 }, { x: -413, y: 0, z: -26.5 })

    createUseWall('综合楼的墙3', { baseWidth: 1, baseHeght: 50, baseLength: 159 }, { x: -382, y: 0, z: -26.5 })
    createUseWall('综合楼的墙4', { baseWidth: 41, baseHeght: 50, baseLength: 1 }, { x: -341, y: 0, z: -26.5 })

    createUseWall('综合楼的墙3', { baseWidth: 45, baseHeght: 50, baseLength: 1 }, { x: -410, y: 0, z: 30 })
    createUseWall('综合楼的墙4', { baseWidth: 45, baseHeght: 50, baseLength: 1 }, { x: -341, y: 0, z: 30 })
    createUseWall('综合楼的墙5', { baseWidth: 45, baseHeght: 50, baseLength: 1 }, { x: -410, y: 0, z: 87.5 })
    createUseWall('综合楼的墙6', { baseWidth: 45, baseHeght: 50, baseLength: 1 }, { x: -341, y: 0, z: 79.5 })

    createUseWall('综合楼的墙7', { baseWidth: 1, baseHeght: 50, baseLength: 57 }, { x: -410, y: 0, z: 87 })
    createUseWall('综合楼的墙8', { baseWidth: 1, baseHeght: 50, baseLength: 69 }, { x: -385, y: 0, z: 99 })
    createUseWall('综合楼的墙9', { baseWidth: 1, baseHeght: 50, baseLength: 63 }, { x: -435, y: 0, z: 150 })
    createUseWall('综合楼的墙10', { baseWidth: 1, baseHeght: 50, baseLength: 63 }, { x: -435, y: 0, z: 150 })
    createUseWall('综合楼的墙11', { baseWidth: 1, baseHeght: 50, baseLength: 40 }, { x: -421, y: 0, z: 138.5 })
    createUseWall('综合楼的墙12', { baseWidth: 36, baseHeght: 50, baseLength: 1 }, { x: -385, y: 0, z: 99.5 })
    createUseWall('综合楼的墙13', { baseWidth: 36, baseHeght: 50, baseLength: 1 }, { x: -385, y: 0, z: 139.5 })
    createUseWall('综合楼的墙14', { baseWidth: 44, baseHeght: 50, baseLength: 1 }, { x: -410, y: 0, z: 150.5 })

    createUseWall('综合楼的墙15', { baseWidth: 1, baseHeght: 50, baseLength: 16 }, { x: -409, y: 0, z: 165.5 })
    createUseWall('综合楼的墙16', { baseWidth: 1, baseHeght: 50, baseLength: 27 }, { x: -384, y: 0, z: 165.5 })
    //汽车部地板
    const mesh_qcb = createFloor(t('messages.ExternalWork'), 42, 160, { x: -362, y: 0, z: -105 })

    createLableObj(mesh_qcb, t('messages.ExternalWork'), { x: 0, y: 0, z: 0 })

    //创建产学研 baseWidth: 21, baseHeght: 25, baseLength: 32  x: -495, y: 0, z: -102.5
    createHouse(t('messages.WaterRoom'), { baseWidth: 21, baseHeght: 25, baseLength: 32 }, { x: -495, y: 0, z: -102.5 })
    createHouse(t('messages.SecurityRoom'), { baseWidth: 21, baseHeght: 25, baseLength: 32 }, { x: -495, y: 0, z: -70.5 })


    //创建盈瑞安办公区 baseWidth: 90, baseHeght: 30, baseLength: 159  x: -399, y: 0, z: 245
    createHouse(t('messages.productStudyDevelopment'), { baseWidth: 90, baseHeght: 30, baseLength: 159 }, { x: -399, y: 0, z: 245 })
    /**盈瑞安办公区里的墙 */
    createUseWall('盈瑞安办公区的墙1', { baseWidth: 90, baseHeght: 30, baseLength: 1 }, { x: -354.5, y: 0, z: 195.5 })
    createUseWall('盈瑞安办公区的墙2', { baseWidth: 90, baseHeght: 30, baseLength: 1 }, { x: -354.5, y: 0, z: 246.5 })
    createUseWall('盈瑞安办公区的墙3', { baseWidth: 90, baseHeght: 30, baseLength: 1 }, { x: -354.5, y: 0, z: 271.5 })



    //创建车间1 baseWidth: 573, baseHeght: 30, baseLength: 238  x: -17.5, y: 0, z: -137.5
    createHouse('车间1', { baseWidth: 620, baseHeght: 30, baseLength: 238 }, { x: 6, y: 0, z: -137.5 }, false)
    /**车间一内的墙 */
    createUseWall('车间1的墙1', { baseWidth: 1, baseHeght: 30, baseLength: 238 }, { x: -228, y: 0, z: -18.5 })
    createUseWall('车间1的墙2', { baseWidth: 1, baseHeght: 30, baseLength: 238 }, { x: -37, y: 0, z: -18.5 })
    createUseWall('车间1的墙3', { baseWidth: 1, baseHeght: 30, baseLength: 238 }, { x: 37, y: 0, z: -18.5 })
    createUseWall('车间1的墙4', { baseWidth: 1, baseHeght: 30, baseLength: 238 }, { x: 73, y: 0, z: -18.5 })
    createUseWall('车间1的墙5', { baseWidth: 76, baseHeght: 30, baseLength: 1 }, { x: -228, y: 0, z: -95.5 })
    createUseWall('车间1的墙5', { baseWidth: 192, baseHeght: 30, baseLength: 1 }, { x: -37, y: 0, z: -194.5 })
    createUseWall('车间1的墙5', { baseWidth: 40, baseHeght: 30, baseLength: 1 }, { x: 2, y: 0, z: -105.5 })
    createUseWall('车间1的墙5', { baseWidth: 40, baseHeght: 30, baseLength: 1 }, { x: 2, y: 0, z: -62.5 })


    //机械设计及行政办公区
    const mesh_hr = createFloor(t('messages.machineDesign'), 45, 120, { x: -431, y: 0, z: 102 })
    createLableObj(mesh_hr, t('messages.machineDesign'), { x: 0, y: 60, z: 0 })
    //电控车间
    const mesh_dkcj = createFloor(t('messages.ControllerRoom'), 76.5, 237, { x: -266, y: 0, z: -138.5 })
    createLableObj(mesh_dkcj, t('messages.ControllerRoom'), { x: 0, y: 60, z: 0 })

    //服装军团
    const mesh_fzjt = createFloor(t('messages.FuZhuangLegion'), 192, 236.5, { x: -133, y: 0, z: -138 })
    createLableObj(mesh_fzjt, t('messages.FuZhuangLegion'), { x: 0, y: 60, z: 0 })
    //配套车间
    const mesh_ptcj = createFloor(t('messages.BigPeiTao'), 110, 236.5, { x: 18.5, y: 0, z: -138 })
    createLableObj(mesh_ptcj, t('messages.BigPeiTao'), { x: 0, y: 60, z: 0 })
    //家纺军团
    const mesh_jfjt = createFloor(t('messages.JiaFangLegion'), 247, 118, { x: 192, y: 0, z: -197 })
    createLableObj(mesh_jfjt, t('messages.JiaFangLegion'), { x: 0, y: 60, z: 0 })
    //医防军团
    const mesh_yfjt = createFloor(t('messages.YiFangLegion'), 247, 119, { x: 192, y: 0, z: -78 })
    createLableObj(mesh_yfjt, `${t('messages.twoLou')}-${t('messages.YiFangLegion')}`, { x: 0, y: 60, z: 0 })




    createHouse('配套车间办公室', { baseWidth: 26, baseHeght: 25, baseLength: 54 }, { x: 24, y: 0, z: -80.5 }, false)





    //创建车间2-1 baseWidth: 147, baseHeght: 30, baseLength: 263  x: -230.5, y: 0, z: 176
    createHouse('车间2-1', { baseWidth: 147, baseHeght: 30, baseLength: 263 }, { x: -230.5, y: 0, z: 176 }, false)

    createUseWall('车间2-1的墙1', { baseWidth: 1, baseHeght: 30, baseLength: 227 }, { x: -237, y: 0, z: 269.5 })

    createUseWall('车间2-1的墙2', { baseWidth: 32, baseHeght: 30, baseLength: 1 }, { x: -207, y: 0, z: 147.5 })
    createUseWall('车间2-1的墙3', { baseWidth: 27, baseHeght: 30, baseLength: 1 }, { x: -158, y: 0, z: 147.5 })

    createUseWall('车间2-1的墙4', { baseWidth: 32, baseHeght: 30, baseLength: 1 }, { x: -207, y: 0, z: 183.5 })
    createUseWall('车间2-1的墙5', { baseWidth: 27, baseHeght: 30, baseLength: 1 }, { x: -158, y: 0, z: 183.5 })


    //汽车军团
    const mesh_qcjt = createFloor(t('messages.QiCheLegion'), 67, 263, { x: -270.5, y: 0, z: 176 })
    createLableObj(mesh_qcjt, t('messages.QiCheLegion'), { x: 0, y: 60, z: 0 })
    //精加车间
    const mesh_jjcj = createFloor('精加车间', 82, 263, { x: -198, y: 0, z: 176 })
    createLableObj(mesh_jjcj, t('messages.JingJiaRoom'), { x: 0, y: 60, z: 0 })

    //创建车间2-2 baseWidth: 95, baseHeght: 30, baseLength: 263  x: -84.5, y: 0, z: 176
    createHouse(t('messages.JiJiaRoom'), { baseWidth: 95, baseHeght: 30, baseLength: 263 }, { x: -84.5, y: 0, z: 176 })
    //创建精饰车间 baseWidth: 161, baseHeght: 30, baseLength: 263  x: 65.5, y: 0, z: 176
    createHouse('车间2-3', { baseWidth: 161, baseHeght: 30, baseLength: 263 }, { x: 65.5, y: 0, z: 176 }, false)
    createUseWall('车间2-3的墙1', { baseWidth: 1, baseHeght: 30, baseLength: 263 }, { x: 60, y: 0, z: 307 })


    //大件车间
    const mesh_djcj = createFloor('大件车间', 75, 263, { x: 22, y: 0, z: 176 })
    createLableObj(mesh_djcj, t('messages.DaJianRoom'), { x: 0, y: 60, z: 0 })
    //精饰车间
    const mesh_jscj = createFloor('精饰车间', 88, 263, { x: 101.5, y: 0, z: 176 })
    createLableObj(mesh_jscj, t('messages.JingShiRoom'), { x: 0, y: 60, z: 0 })
    // //料场
    // createHouse('料场', { baseWidth: 82, baseHeght: 30, baseLength: 263 }, { x: 187, y: 0, z: 176 }, false)
    // createUseWall('料场中间的墙', { baseWidth: 82, baseHeght: 30, baseLength: 1 }, { x: 228, y: 0, z: 183.5 })
    createUseWall('料场后面的墙', { baseWidth: 82, baseHeght: 30, baseLength: 1 }, { x: 228, y: 0, z: 308 })
    const mesh_lc = createFloor('料场', 84, 131, { x: 188, y: 0, z: 110 })
    createLableObj(mesh_lc, '料场', { x: 0, y: 60, z: 0 })

    const mesh_wfzcq = createFloor('料场', 84, 132, { x: 188, y: 0, z: 242 })
    createLableObj(mesh_wfzcq, '危废暂存间', { x: 0, y: 60, z: 0 })



    //精饰车间内的房子
    createHouse(t('messages.ManualSandblastingRoom'), { baseWidth: 26, baseHeght: 30, baseLength: 28 }, { x: 73.62, y: 0, z: 59.15 })
    createHouse(`${t('messages.DryingRoom')}B`, { baseWidth: 28, baseHeght: 30, baseLength: 46 }, { x: 130.77, y: 0, z: 67.69 })
    createHouse(t('messages.GrindingRoom'), { baseWidth: 24, baseHeght: 30, baseLength: 42 }, { x: 132.77, y: 0, z: 141.03 })


    createHouse('冷冻式空气干燥机', { baseWidth: 14, baseHeght: 20, baseLength: 18 }, { x: 66.69, y: 0, z: 123.32 }, false)
    createHouse('喷砂罐', { baseWidth: 14, baseHeght: 20, baseLength: 18 }, { x: 66.69, y: 0, z: 158.41 }, false)
    createHouse('抛丸机', { baseWidth: 19, baseHeght: 20, baseLength: 74 }, { x: 83.84, y: 0, z: 144.21 }, false)
    createHouse(t('messages.PowderSprayingRoom'), { baseWidth: 32, baseHeght: 20, baseLength: 65 }, { x: 75.94, y: 0, z: 235.64 })
    createHouse(t('messages.DaJianPaintingRoom'), { baseWidth: 27, baseHeght: 20, baseLength: 44 }, { x: 132.10, y: 0, z: 220.20 })



    //创建焊接车间 baseWidth: 85, baseHeght: 30, baseLength: 263  x: 224, y: 0, z: 176
    createHouse(t('messages.HanJieRoom'), { baseWidth: 85, baseHeght: 30, baseLength: 263 }, { x: 271, y: 0, z: 176 })

    createHouse(t('messages.boilerRoom'), { baseWidth: 25, baseHeght: 20, baseLength: 30 }, { x: 299.30, y: 0, z: 60.87 })

    //创建食堂 baseWidth: 71, baseHeght: 30, baseLength: 124  x: 312.5, y: 0, z: 221.5
    createHouse(t('messages.canteen'), { baseWidth: 71, baseHeght: 30, baseLength: 124 }, { x: 359.5, y: 0, z: 221.5 })
    //创建宿舍楼3 baseWidth: 56, baseHeght: 30, baseLength: 216  x: 393, y: 0, z: -147
    createHouse(`${t('messages.EmployeeApartment')}-9`, { baseWidth: 56, baseHeght: 30, baseLength: 216 }, { x: 440, y: 0, z: -147 })
    //创建宿舍楼1 baseWidth: 56, baseHeght: 30, baseLength: 132  x: 389, y: 0, z: 106.5
    createHouse(`${t('messages.EmployeeApartment')}-10`, { baseWidth: 56, baseHeght: 30, baseLength: 132 }, { x: 440, y: 0, z: 106.5 })
    //创建宿舍楼2 baseWidth: 56, baseHeght: 30, baseLength: 132  x: 389, y: 0, z: 106.5
    createHouse(`${t('messages.EmployeeApartment')}-11`, { baseWidth: 56, baseHeght: 30, baseLength: 132 }, { x: 440, y: 0, z: 243.5 })
    //创建围墙 baseWidth: 966, baseHeght: 5, baseLength: 677  x: 24, y: 0, z: 0
    createHouse('围墙', { baseWidth: 1013, baseHeght: 15, baseLength: 677 }, { x: 0, y: 0, z: 0 }, false)
    //创建东气泵房 baseWidth: 23, baseHeght: 30, baseLength: 16  x: -119.5, y: 0, z: 313.5
    createHouse(t('messages.eastAirPumpRoom'), { baseWidth: 23, baseHeght: 25, baseLength: 16 }, { x: -119.5, y: 0, z: 316.5 })


    createTitleFloor('', 464, 45, { x: 0, y: 0, z: 15 })
    //放置服务器
    createGlb()
    /*放置交换机************/
    //汽车军团
    createSwitch({ x: -287.44, y: 0, z: 19.24 })
    //精加车间
    createSwitch({ x: -158.01, y: 0, z: 107.47 })
    createSwitch({ x: -208.35, y: 0, z: 107.47 })
    //机加车间
    createSwitch({ x: -40.22, y: 0, z: 19.90 })
    //服装军团
    createSwitch({ x: -81.96, y: 0, z: -283.33 })
    //电控分厂
    createSwitch({ x: -232.96, y: 0, z: -64.48 })
    //大配套中心
    createSwitch({ x: 29.01, y: 0, z: -60.75 })
    //大件车间
    createSwitch({ x: 5.29, y: 0, z: 19.00 })
    //家纺 医防
    createSwitch({ x: 88.55, y: 0, z: -214.89 })
    //二道岗
    createSwitch({ x: 306.5, y: 0, z: 5.43 })
    /*交换机结束********************************* */
    /*创建wifi */
    //机加
    createWifi({ x: -46.96, y: 2, z: 156.57 })
    //大件
    createWifi({ x: 52.60, y: 2, z: 96.44 })
    createWifi({ x: 52.60, y: 2, z: 157.07 })
    //精饰
    createWifi({ x: 133.14, y: 2, z: 107.43 })
    createWifi({ x: 133.14, y: 2, z: 156.25 })
    //焊接
    createWifi({ x: 305.73, y: 2, z: 110.45 })
    createWifi({ x: 305.73, y: 2, z: 238.67 })
    //服装
    createWifi({ x: -89.13, y: 4, z: -245.33 })
    createWifi({ x: -132.07, y: 2, z: -245.33 })
    createWifi({ x: -222.31, y: 2, z: -245.33 })
    createWifi({x:-87.78,y:2 ,z:-114.15})
    createWifi({x:-176.45,y:2 ,z:-114.40})

    //家纺 医防
    createWifi({ x: 140.83, y: 2, z: -197.34 })
    createWifi({ x: 259.37, y: 2, z: -197.34 })
    createWifi({ x: 140.83, y: 2, z: -111.84 })
    createWifi({ x: 259.50, y: 2, z: -111.81 })



    /*创建红线******************/
    let redLine = 0xff0000;
    createLine(redLine, [{ x: -346.00, y: 23.6, z: 59.40 }, { x: -160.50, y: 2, z: 142.08 }])
    //服装
    createLine(redLine, [
        { x: -345.65, y: 2, z: 36.40 },
        { x: 22.67, y: 2, z: 36.40 },
        { x: 22.67, y: 2, z: -25.70 },
        { x: -47.67, y: 2, z: -25.70 },
        { x: -47.67, y: 2, z: -248.85 },
        { x: -221.76, y: 2, z: -248.85 }
    ])
    createLine(redLine, [{ x: -47.67, y: 2, z: -117.33 }, { x: -174.65, y: 2, z: -117.33 }])
    //汽车军团
    createLine(redLine, [{ x: -293.44, y: 2, z: 52.52 }, { x: -293.44, y: 2, z: 36.40 }, { x: -235.84, y: 2, z: -30.87 }])
    //机加
    createLine(redLine, [
        { x: -114.64, y: 2, z: 36.40 },
        { x: -114.64, y: 2, z: 52.42 },
        { x: -46.13, y: 2, z: 52.90 },
        { x: -46.13, y: 2, z: 153.05 }
    ])
    //家纺医防
    createLine(redLine, [
        { x: 27.47, y: 2, z: -26.11 },
        { x: 27.47, y: 2, z: -248.85 },
        { x: 69.26, y: 2, z: -248.85 },
        { x: 69.26, y: 2, z: -180.29 },
        { x: 85.51, y: 2, z: -180.29 },
        { x: 141.66, y: 2, z: -200.86 },
        { x: 260.42, y: 2, z: -200.86 },
        { x: 260.42, y: 2, z: -115.33 },
        { x: 141.66, y: 2, z: -115.33 },
        { x: 141.66, y: 2, z: -200.86 },
    ])

    //创建黄线
    let yellowLine = 0xffff00;
    //横线 主干道
    createLine(yellowLine, [
        { x: -341.87, y: 2, z: 30.98 },
        { x: 111.97, y: 2, z: 30.98 },
        { x: 111.97, y: 2, z: 175.55 },
        { x: 294.54, y: 2, z: 175.55 },
        { x: 294.54, y: 2, z: 40.43 },
        { x: 306.56, y: 2, z: 40.43 },
        { x: 306.56, y: 2, z: 235.28 }
    ])
    //精加
    createLine(yellowLine, [
        { x: -164.26, y: 2, z: 30.98 },
        { x: -164.26, y: 2, z: 140.05 },
        { x: -214.35, y: 2, z: 140.05 }

    ])
    //大件 总---精饰
    createLine(yellowLine, [
        { x: -0.71, y: 2, z: 30.98 },
        { x: -0.71, y: 2, z: 53.16 },
        { x: 133.97, y: 2, z: 53.16 },
        { x: 133.97, y: 2, z: 154.31 }
    ])
    //大件 分
    createLine(yellowLine, [
        { x: 53.43, y: 2, z: 53.16 },
        { x: 53.43, y: 2, z: 154.31 }
    ])

    //电控
    createLine(yellowLine, [
        { x: -292.24, y: 2, z: 30.98 },
        { x: -242.61, y: 2, z: -30.90 }
    ])
    //家纺 医防
    createLine(yellowLine, [
        { x: 18.30, y: 2, z: 30.98 },
        { x: 18.30, y: 2, z: -28.94 },
        { x: 25.64, y: 2, z: -28.94 },
        { x: 25.64, y: 2, z: -251.40 },
        { x: 71.44, y: 2, z: -251.40 },
        { x: 71.44, y: 2, z: -183.05 },
        { x: 83.96, y: 2, z: -183.05 }
    ])

    setTipDom()
    sethoveMesh()





    //创建综合楼
    //创建天空盒
    createSkyBox()



    const raycaster = new THREE.Raycaster();
    const pointer = new THREE.Vector2();

    function onPointerMove(event: any) {
        // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
        pointer.x = (event.clientX / iw) * 2 - 1;
        pointer.y = -(event.clientY / ih) * 2 + 1;
    }

    //animate()


    //鼠标在canvas画布上点击事件
    labelRenderer.domElement.addEventListener('mouseup', function (event: any) {
        clearInterval(timer)
        // .offsetY、.offsetX以canvas画布左上角为坐标原点,单位px
        const px = event.offsetX;
        const py = event.offsetY;
        //屏幕坐标px、py转WebGL标准设备坐标x、y
        //width、height表示canvas画布宽高度
        const x = (px / iw) * 2 - 1;
        const y = -(py / ih) * 2 + 1;
        // console.log("鼠标点击位置", "x:" + x, "y:" + y);
        // console.log("鼠标点击位置", "px:" + px, "py:" + py);


        //创建一个射线投射器`Raycaster`
        const raycaster = new THREE.Raycaster();
        //.setFromCamera()计算射线投射器`Raycaster`的射线属性.ray
        // 形象点说就是在点击位置创建一条射线，射线穿过的模型代表选中
        raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
        //.intersectObjects([mesh1, mesh2, mesh3])对参数中的网格模型对象进行射线交叉计算
        // 未选中对象返回空数组[],选中一个对象，数组1个元素，选中两个对象，数组两个元素
        const intersects = raycaster.intersectObjects(scene.children);
        if (intersects.length > 0) {
            var selected = intersects[0]; //取第一个物体
            console.log("坐标", "{x:" + selected.point.x.toFixed(2) + ",y:" + (selected.point.y.toFixed(2) - 1) + ",z:" + selected.point.z.toFixed(2) + "}");
            // console.log("非正常坐标", "{x:" + (+selected.point.x - 0.83).toFixed(2) + ",y:2 ,z:" + (selected.point.z + 3.52).toFixed(2) + "}");
            let workerShop = intersects[0]?.object?.name
            if (workerShopRoute.hasOwnProperty(workerShop) && !edit) {
                //router.push({ path: workerShopRoute[workerShop] })
            }

        }

        // console.log("点击了", intersects[0]?.object?.name);
        // intersects.length大于0说明，说明选中了模型
        // if (intersects.length > 0) {
        //   // 选中模型的第一个模型，设置为红色
        //   intersects[0].object.material.color.set(0xff0000);
        // }
        renderer.render(scene, camera)
    })

    controls.target = new THREE.Vector3(0, 0, 0)

    // const raycaster = new THREE.Raycaster()
    let mouse = new THREE.Vector2()
    let intersects = null
    labelRenderer.domElement.addEventListener('dblclick', function (event: any) {

        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        raycaster.setFromCamera(mouse, camera);
        intersects = raycaster.intersectObject(scene, true);
        if (intersects.length > 0) {
            let boxMaxY = new THREE.Box3().setFromObject(intersects[0].object).max.y

            let distance = boxMaxY + 200
            let angel = Math.PI / 3.5

            let position = {
                x: intersects[0].object.position.x + Math.cos(angel) * distance,
                y: intersects[0].object.position.y + Math.cos(angel) * distance,
                z: intersects[0].object.position.z + Math.sin(angel) * distance
            }

            let tween = new TWEEN.Tween(camera.position).to(position, 1000)
            let tween1 = new TWEEN.Tween(controls.target).to(intersects[0].object.position, 1000)

            controls.enabled = false;
            tween.onComplete(function () {
                controls.enabled = true;
            })
            // console.log("点击了", intersects[0]?.object?.name);
            tween.start()
            tween1.start()
        }
    });


    //控制对象的透明度来实现闪烁效果
    function reader(torus: any) {
        if (torus.startVal > 1) {
            torus.direction = 'down'
        }
        if (torus.startVal < 0) {
            torus.direction = 'up'
        }

        if (torus.direction === 'up') {
            torus.startVal += 0.01
            torus.material.opacity = torus.startVal
        } else {
            torus.startVal -= 0.01
            torus.material.opacity = torus.startVal
        }

        // console.log(torus.material.opacity);

    }



    //定制渲染函数
    let T0 = +new Date() //设置时间差
    function render() {
        let T1 = +new Date()
        // let t = T1 - T0 //获取时间间隔
        renderer.render(scene, camera)
        //旋转立方体,每次绕y轴旋转0.01弧度，每一秒渲染0.001弧度
        //box.rotateY(0.001 * t)
        // if (t >= 2000) {
        //     return
        // }
        boxObjects.value.forEach((element: any) => {
            let color1 = 0x88e76a
            let color2 = 0xff0000
            //判断是否是更新的传感器数据
            if (store.updateSensorData.hasOwnProperty(element.sensor_id)) {
                // console.log(store.updateSensorData,'store.updateSensorData');
                // console.log(element,'element');

                let color = store.updateSensorData[element.sensor_id].status ? color1 : color2
                element.devStatus = store.updateSensorData[element.sensor_id].status
                element.material.color = new THREE.Color(color)

            }
            // reader(element)
        });
        TWEEN.update()
        controls.update()
        labelRenderer.render(scene, camera)
        store.clearupdateSensorData()
        // reader(mesh_qcjt)
        window.requestAnimationFrame(render) //避免掉帧，就是一帧接一帧，逐帧，预备加载下一帧
    }
    render()
}



//创建线
function createLine(color: number, pointsList: any) {
    // const material = new THREE.LineBasicMaterial({ color: color });
    // const points = [];
    // pointsList.forEach(element => {
    //     points.push(new THREE.Vector3(element.x, element.y, element.z));
    // });

    // const geometry = new THREE.BufferGeometry().setFromPoints(points);
    // const line = new THREE.Line(geometry, material);
    // scene.add(line);
    // renderer.render(scene, camera);

    const geometry = new LineGeometry()
    let pointList = []
    pointsList.forEach(element => {
        let {x,y,z} = element
        let arr = [x,y,z]
        pointList.push(...arr)
    });
    geometry.setPositions(pointList)
    
    const material = new LineMaterial({
        color: color,
        linewidth: 5
    })
    material.resolution.set(iw, ih)
    // 5. 创建 Line2
    var line = new Line2(geometry, material);
    // 6. 计算下线条长度
    line.computeLineDistances();
    // 7. 添加到场景
    scene.add(line)
}

//创建wifi
function createWifi(position: positionType) {
    const loader = new GLTFLoader();

    loader.load('/models/glb/tothefuture_wifi.glb', function (gltf) {
        const mesh = gltf.scene.children[0];

        const s = 0.3;
        mesh.scale.set(s, s, s);
        mesh.position.set(position.x, position.y, position.z);
        // mesh.rotation.x = THREE.MathUtils.degToRad(270)
        mesh.castShadow = true;
        mesh.receiveShadow = true;
        scene.add(mesh);

    }, undefined, function (error) {

        console.error(error);

    });
}

//创建交换机
// function createSwitch(position: positionType, scale: number = 0.2) {
//     const loader = new GLTFLoader();

//     loader.load('/models/gltf/scene.gltf', function (gltf) {
//         const mesh = gltf.scene.children[0];

//         const s = scale;
//         mesh.scale.set(s, s, 0.5);
//         mesh.position.set(position.x-12.75, position.y, position.z+66.22);
//         mesh.rotation.z = THREE.MathUtils.degToRad(180)
//         // mesh.rotation.y = THREE.MathUtils.degToRad(90)
//         // mesh.rotation.x = THREE.MathUtils.degToRad(45)
//         mesh.castShadow = true;
//         mesh.receiveShadow = true;
//         scene.add(mesh);

//     }, undefined, function (error) {

//         console.error(error);

//     });
// }

const createSwitch = ( boxposition: positionType, shadow: boolean = true): object => {

const wallTexture = new THREE.TextureLoader().load(requires.switch);
const wall = new THREE.BoxGeometry(15, 5, 10);
const wallMaterial = new THREE.MeshPhongMaterial({
    map: wallTexture,
    color: 0xe7e7e7,
    transparent: true,
});
//墙体的网格
const wallMesh = new THREE.Mesh(wall, wallMaterial);
// 物体移动位置
// wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z);
wallMesh.position.set(boxposition.x-6, 5 + boxposition.y, boxposition.z+33.73);
// 对象是否渲染到阴影贴图当中
wallMesh.castShadow = shadow;
// 将立方体添加到场景中
group.add(wallMesh)
return wallMesh
}




//创建服务器
function createGlb() {
    const loader = new GLTFLoader();

    loader.load('/models/glb/server.glb', function (gltf) {
        const mesh = gltf.scene.children[0];

        const s = 0.12;
        mesh.scale.set(s, s, s);
        mesh.position.set(-346, 0, 51);
        mesh.castShadow = true;
        mesh.receiveShadow = true;
        createLableObj(mesh, '服务器', { x: 0, y: 60, z: 0 })
        scene.add(mesh);
    }, undefined, function (error) {

        console.error(error);

    });
}



type positionType = {
    x: number,
    y: number,
    z: number
}
//创建房子
function createHouse(houseName: string, size = { baseWidth: 40, baseHeght: 4, baseLength: 60 }, position: positionType = { x: 80, y: 1, z: 0 }, isFloor = true) {

    const { baseWidth, baseHeght, baseLength } = size
    const { x, y, z } = position;
    const faWallPosition = [-baseWidth / 2 + x, 0, -baseLength / 2 + z]
    if (isFloor) {
        //创建地板
        if (houseName == t('messages.JiJiaRoom')) {
            const mesh = createFloor('机加车间', baseWidth, baseLength, position)
            createLableObj(mesh, t('messages.JiJiaRoom'), { x: 0, y: 60, z: 0 })
        } else if (houseName == t('messages.HanJieRoom')) {
            const mesh = createFloor('焊接车间', baseWidth, baseLength, position)
            createLableObj(mesh, t('messages.HanJieRoom'), { x: 0, y: 60, z: 0 })
        } else {
            const mesh = createFloor('houseName', baseWidth, baseLength, position)
            createLableObj(mesh, houseName, { x: 0, y: 60, z: 0 })
        }
    }

    //创建左右墙
    let leftWall = createWall(1, baseHeght, baseLength)
    leftWall.name = houseName + '左侧的墙'
    leftWall.rotateY(Math.PI / 2);
    leftWall.position.set((-baseWidth / 2 + x + 1), baseHeght / 2 + y, z);
    group.add(leftWall)

    const rightWall = leftWall.clone();
    rightWall.position.set((baseWidth / 2 + x), baseHeght / 2 + y, z);
    rightWall.name = houseName + "右侧的墙";
    group.add(rightWall);
    //创建前后墙
    const frontWall = createWall(1, baseHeght, baseWidth)
    frontWall.position.set((1 / 2 + x), baseHeght / 2 + y, (baseLength / 2 + z));
    frontWall.name = houseName + "前方的墙";
    group.add(frontWall);

    const rearWall = frontWall.clone();
    rearWall.position.set((1 / 2 + x), baseHeght / 2 + y, (-baseLength / 2 + z));
    rearWall.name = houseName + "后方的墙";
    group.add(rearWall);


    // //不带门的墙
    // createNoDoorWall(baseWidth,baseHeght,baseLength,position)
    // //创建带门的墙
    // createDoorWall(baseWidth,baseHeght,baseLength,position)

    // let { roof, width } = createRoof(baseWidth,baseHeght,baseLength,position);
    // let leftRoof = roof.clone();
    // leftRoof.rotateX(THREE.MathUtils.degToRad(30));
    // leftRoof.position.set(-baseWidth / 3 + 1+x, baseHeght+2+y, z);
    // leftRoof.name = "左屋顶";
    // group.add(leftRoof);

    // //创建门
    // createDoor(baseWidth,baseLength,position)
}


// 新建2D标签
function createLableObj(mesh: any, text: string, vector: positionType) {
    let laberDiv = document.createElement('div');//创建div容器
    laberDiv.className = 'laber_name';
    laberDiv.textContent = text;
    let pointLabel = new CSS2DObject(laberDiv);
    pointLabel.position.set(vector.x, vector.y, vector.z);

    mesh.add(pointLabel);
}
type sizeType = {
    baseWidth: number,
    baseHeght: number,
    baseLength: number
}
//创建能用的墙
function createUseWall(name: string, size: sizeType, position: positionType, issensor: boolean = false): void {
    let Wall = createWall(size.baseWidth, size.baseHeght, size.baseLength)
    Wall.name = name
    Wall.rotateY(Math.PI / 2);
    Wall.position.set((-size.baseWidth / 2 + position.x + 1), size.baseHeght / 2 + position.y, -size.baseLength / 2 + position.z);
    group.add(Wall)
    return Wall
}

/**
   * 创建立方体 用作传感器
   * @param size    立方体的长宽高
   * @param boxposition 立方体的位置
   * @param boxcolor     立方体的颜色
   * @param shadow     是否渲染到阴影贴图当中
   */
const createBox = (size: sizeType, boxposition: positionType, boxcolor: number, shadow: boolean = true, result: any = {}, icon: string): object => {

    const wallTexture = new THREE.TextureLoader().load(requires[icon]);
    const wall = new THREE.BoxGeometry(size.baseWidth, size.baseHeght, size.baseLength);
    const wallMaterial = new THREE.MeshPhongMaterial({
        map: wallTexture,
        color: boxcolor,
        transparent: true,
    });
    //墙体的网格
    const wallMesh = new THREE.Mesh(wall, wallMaterial);
    // 绑定自定义数据 添加标签
    wallMesh.name = result.name
    wallMesh.devStatus = result.status
    wallMesh.direction = 'up'
    wallMesh.startVal = 1
    //用于更新状态判断
    wallMesh.sensor_id = result.id
    // 物体移动位置
    // wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z);
    wallMesh.position.set(boxposition.x, size.baseHeght / 2 + boxposition.y, boxposition.z);
    // 对象是否渲染到阴影贴图当中
    wallMesh.castShadow = shadow;
    // 将立方体添加到场景中
    group.add(wallMesh)

    boxObjects.value.push(wallMesh)
    return wallMesh
}




//创建地面
function createGround() {
    //require('@/assets/img/Factory/cao.png')
    //导入材质
    const groundTexture = new THREE.TextureLoader().load(requires.ny);
    groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
    groundTexture.repeat.set(100, 100);
    const ground = new THREE.PlaneGeometry(1014, 681);
    const groundMaterial = new THREE.MeshBasicMaterial({
        side: THREE.DoubleSide,
        map: groundTexture,
        // color: 0x00ff00,
        // transparent: true,
        // opacity: 0.2,
    });

    const groundMesh = new THREE.Mesh(ground, groundMaterial);
    groundMesh.name = "地面";//设置name属性
    groundMesh.rotateX(-Math.PI / 2);//旋转用于呈现一个水平的地面

    scene.add(groundMesh);
}

//创建标题地板
function createTitleFloor(houseName: string, baseWidth: number, baseLength: number, position: positionType) {
    const texture = new THREE.TextureLoader().load(requires.titleFloor);
    //设置地板大小，由于后面将要生成墙体存在设置为1的厚度，因此这里对地板的x，z均-2
    const floor = new THREE.BoxGeometry(baseWidth - 2, 1, baseLength);
    const material = new THREE.MeshPhongMaterial({ map: texture, transparent: true });
    const mesh = new THREE.Mesh(floor, material);
    const { x, y, z } = position
    mesh.position.set(x, y + 1 / 2, z);
    mesh.name = houseName + "地板";
    group.add(mesh);
    return mesh;
}

//创建地板，可以理解为地基
function createFloor(houseName: string, baseWidth: number, baseLength: number, position: positionType) {
    const texture = new THREE.TextureLoader().load(requires.wood);
    //设置地板大小，由于后面将要生成墙体存在设置为1的厚度，因此这里对地板的x，z均-2
    const floor = new THREE.BoxGeometry(baseWidth - 2, 1, baseLength);
    const material = new THREE.MeshPhongMaterial({ map: texture, transparent: true });
    const mesh = new THREE.Mesh(floor, material);
    const { x, y, z } = position
    mesh.position.set(x, y + 1 / 2, z);
    mesh.name = houseName + "地板";
    group.add(mesh);
    return mesh;
}

//创建左右两边墙体
function createWall(baseWidth: number = 10, baseHeght: number, baseLength: number) {
    const wallTexture = new THREE.TextureLoader().load(requires.wall1);
    const wall = new THREE.BoxGeometry(baseLength, baseHeght, baseWidth);
    const wallMaterial = new THREE.MeshPhongMaterial({
        map: wallTexture,
    });
    //墙体的网格
    const wallMesh = new THREE.Mesh(wall, wallMaterial);
    return wallMesh;
}

//不规则墙体
function genwallShape(baseWidth: number, baseHeght: number, baseLength: number) {
    const shape = new THREE.Shape();
    let height = baseHeght;//墙的高度
    shape.moveTo(0, 0); //起点
    shape.lineTo(0, height); //墙体高度
    shape.lineTo(baseWidth / 2 - 1, height + 5); //墙体顶点
    shape.lineTo(baseWidth / 2 - 1, height + 6); //墙体顶点
    shape.lineTo(baseWidth / 2 + 1, height + 6); //墙体顶点
    shape.lineTo(baseWidth / 2 + 1, height + 5); //墙体顶点
    shape.lineTo(baseWidth, height);
    shape.lineTo(baseWidth, 0);
    shape.lineTo(0, 0);
    return { shape };
}

//创建不规则墙体
function createIrregularWall(shape: any, position: any) {
    const extrudeSettings = {
        depth: 1,//定义深度，由于挤压几何体的点位都是x，y坐标组成的二位平面，这个参数定义向z轴的延展长度，即为墙的厚度
        bevelEnabled: false,
    };
    const wallTexture = new THREE.TextureLoader().load(requires.wall1);
    const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
    wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping;
    wallTexture.repeat.set(0.05, 0.05);
    const material = new THREE.MeshPhongMaterial({ map: wallTexture });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(...position);
    group.add(mesh);
    return mesh;
}

//创建不带门的不规则墙体
function createNoDoorWall(baseWidth: number, baseHeght: number, baseLength: number, position: positionType) {
    const { x, y, z } = position
    let { shape } = genwallShape(baseWidth, baseHeght, baseLength);
    let mesh = createIrregularWall(shape, [-baseWidth / 2 + x, 0, -baseLength / 2 + z]);
    mesh.name = "带门的墙对面的墙";
}


//带门的墙体
function createDoorWall(baseWidth: number, baseHeght: number, baseLength: number, position: positionType) {
    const { x, y, z } = position
    const shape = new THREE.Shape();
    const door = new THREE.Path();
    //门的位置
    door.moveTo(baseWidth / 2 + 5, 0);
    door.lineTo(baseWidth / 2 + 5, 5);
    door.lineTo(baseWidth / 2 - 5, 6);
    door.lineTo(baseWidth / 2 - 5, 0);
    door.lineTo(baseWidth / 2 + 5, 0);
    // 形状上的孔洞
    shape.holes.push(door);
    let mesh = createIrregularWall(shape, [
        -baseWidth / 2 + x,
        y,
        baseLength / 2 - 1 + z,
    ]);
    mesh.name = "带门的墙";
}


//创建屋顶
function createRoof(baseWidth: number, baseHeght: number, baseLength: number, position: positionType) {
    const { x, y, z } = position
    //屋顶宽
    let width = Math.sqrt((baseWidth / 2) ** 2 + 5 ** 2) + 5;//+5让有一点屋檐的效果
    const geometry = new THREE.BoxGeometry(baseLength / 2, width, 1);
    const texture = new THREE.TextureLoader().load(requires.tile);
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(2, 2);
    const material = new THREE.MeshPhongMaterial({ map: texture });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.rotateZ(THREE.MathUtils.degToRad(75));
    mesh.rotateY(-Math.PI / 2);
    mesh.position.set(baseWidth / 3 - 1 + x, baseHeght + 2 + y, 0 + z);
    mesh.name = "右屋顶";
    group.add(mesh);
    return { roof: mesh, width };

}

//创建门
function createDoor(baseWidth: number, baseLength: number, position: positionType) {
    const { x, y, z } = position;
    const texture = new THREE.TextureLoader().load(requires.door);
    const door = new THREE.BoxGeometry(3, 5, 0.5);
    const material = new THREE.MeshPhongMaterial({
        map: texture,
        transparent: true,
        opacity: 1,
    });
    const doorMesh = new THREE.Mesh(door, material);
    // doorMesh.rotateY(Math.PI / 2);
    // doorMesh.position.set(-baseLength / 2, 7, 0);

    doorMesh.name = "门";

    //以下代码做出了更改
    const doorGroup = new THREE.Group();//添加一个门的父级
    doorGroup.name = "门的包裹";
    doorGroup.position.set(-5 + x, 8 + y, baseLength / 2 + z);//通过父级来改变门的旋转轴
    //现在这个是相对于父级
    doorMesh.position.x = 5;
    doorGroup.add(doorMesh);
    group.add(doorGroup);
    return doorGroup;
}


//天空盒
function createSkyBox() {
    const texture = new THREE.TextureLoader().load(requires.sky);
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    // texture.repeat.set(1, 1);
    const skyBox = new THREE.SphereGeometry(900, 100, 100);
    const material = new THREE.MeshPhongMaterial({
        map: texture,
        side: THREE.BackSide,
    });
    const skyBoxMesh = new THREE.Mesh(skyBox, material);
    scene.add(skyBoxMesh);
}

function setTipDom() {
    const domTag = document.createElement("div");
    domTag.setAttribute("id2", "tipId");
    // domTag.innerText='电流'
    domTag.style.fontSize = "14px";
    domTag.style.backgroundColor = "rgba(0,0,0,.5)";
    domTag.style.padding = "5px";
    domTag.style.borderRadius = "2px";
    domTag.style.color = "#fff";
    domTag.style.visibility = "hidden";
    // domTag.innerText = mesh.name;
    const iTagDomCss3 = new CSS2DObject(domTag);
    iTagDomCss3.position.z = 2;
    iTagDomCss3.position.y = 0;
    scene.add(iTagDomCss3);
    saveTipDom = iTagDomCss3;
}

//3D标签初始化
// function initCss3DScene() {
//     cssRender = new CSS3DRenderer();
//     cssRender.setSize(iw, ih);
//     cssRender.domElement.style.position = "absolute";
//     cssRender.domElement.style.top = '0';
//     cssRender.domElement.style.outline = "none";
//     cssRender.domElement.className = "cssrender";
//     canvas.appendChild(cssRender.domElement);
// }

function sethoveMesh() {

    dragControls = new DragControls(
        boxObjects.value,
        camera,
        labelRenderer.domElement
    );

    if (!edit) {
        dragControls.deactivate();
    }
    dragControls.addEventListener("hoveron", function (event: any) {
        saveTipDom.element.innerHTML = `${event.object.name}:${event.object.devStatus ? t('messages.onLine') : t('messages.offline')
            }`;
        saveTipDom.element.style.visibility = "visible";
        saveTipDom.position.x = event.object.position.x;
        saveTipDom.position.y = event.object.position.y + 5;
        saveTipDom.position.z = event.object.position.z - 20;
        saveTipDom.visible = true;

    });

    dragControls.addEventListener("hoveroff", function (event: any) {
        saveTipDom.element.style.visibility = "hidden";
        saveTipDom.position.x = 0;
        saveTipDom.position.y = 9999;
        saveTipDom.visible = false;
    });

    dragControls.addEventListener("dragend", function (event: any) {
        let data = { 'id': event.object.sensor_id, 'x': event.object.position.x.toFixed(2), 'y': event.object.position.z.toFixed(2) }
        updateCoordinateByPoint(data).then((res: any) => {
            if (res.code == 200) {
                ElNotification({
                    message: '移动位置成功',
                    duration: 2000,
                    type: 'success'
                })
            }


        })

    });

}

onMounted(() => {
    // console.log(container.value.offsetWidth,'container');

    //初始化场景
    init()
    /**创建传感器 */
    getSensorDataTimer = setInterval(() => {
        if (store.sensorList.length > 0) {
            store.sensorList.forEach((element: any) => {
                let state = element.status ? 0x88e76a : 0xff0000;
                let wallMesh = createBox(small_size, { x: element.x, y: 0, z: element.y }, state, true, element, element.icon)

            });
            clearInterval(getSensorDataTimer)
        }
    }, 100)

    getDevDataTimer = setInterval(() => {
        if (store.devdataList.length > 0) {

            store.devdataList.forEach((element: any) => {
                let state = element.status ? 0x88e76a : 0xff0000;
                let wallMesh = createBox(small_size, { x: element.x, y: 0, z: element.y }, state, false, element, element.icon)
            });
            clearInterval(getDevDataTimer)
        }
    }, 100)



    // const length = store.result.length
    // //获取store中的数据长度
    // setInterval(() => {
    //     //获得一个随机整数
    //     const random = Math.floor(Math.random() * length)
    //     const tempdata: any = store.result[random]
    //     tempdata.status = !store.result[random]?.status
    //     store.updateResult(tempdata)

    // }, 5000)


})
</script>

<style>
/* @import url("@/assets/iconfont.css"); */

.laber_name {
    color: #FFF;
    font-family: sans-serif;
    padding: 2px;
    background: rgba(0, 0, 0, 0.6);
}
</style>
