ThingJS-securityHtml/广西东盟项目/JS/RegisterEvent.js

/**
 * 说明：注册事件
 */
function registerEvent() {
    var _this = this;
    $('#83849').on('click', function () {
        stopRotate();
        console.log("......................")
        restarRotate();
    });

    // 楼层横向展开按钮的点击事件，楼层展开只在建筑有2层或2层以上的楼层才会生效
    $('#horizontalExpansion').on('click', function () {
        // if (sidebar.expandBuilding == true) {
        //     sidebar.expandBuilding = false
        // }
        stopRotate();
        checkBtnActives(['#mapBg', '#sceneSetting']);
        let expandState = building.getAttribute('expandState');
        if ($(this).hasClass('active')) {
            // 楼层横向展开关闭
            if (expandState == 'horizontal') {
                $(this).removeClass('active');
                horizontalExpand(building, 'close');
            }
        } else {
            // 楼层横向展开前应判断楼层是否处于垂直展开状态，是，则应先关闭垂直展开，然后横向展开
            if (expandState != 'moving') {
                $(this).addClass('active');
                $('#verticalExpansion').removeClass('active');
                if (expandState == 'vertical') {
                    verticalToHorizontal(building);
                } else {
                    horizontalExpand(building, 'horizontal');
                }
            }
        }
        restarRotate();
    });
    // 楼层垂直展开按钮的点击事件，楼层展开只在建筑有2层或2层以上的楼层才会生效
    $('#verticalExpansion').on('click', function () {
        // if (sidebar.expandBuilding == true) {
        //     sidebar.expandBuilding = false
        // }
        stopRotate();
        checkBtnActives(['#mapBg', '#sceneSetting']);
        let expandState = building.getAttribute('expandState');
        if ($(this).hasClass('active')) {
            // 楼层垂直展开关闭
            if (expandState == 'vertical') {
                $(this).removeClass('active');
                verticalExpand(building, 'close');
            }
        } else {
            // 楼层垂直展开前应判断楼层是否处于横向展开状态，是，则应先关闭横向展开，然后垂直展开
            if (expandState != 'moving') {
                $(this).addClass('active');
                $('#horizontalExpansion').removeClass('active');
                if (expandState == 'horizontal') {
                    horizontalToVertical(building);
                } else {
                    verticalExpand(building, 'vertical');
                }
            }
        }
        restarRotate();
    });

    // 设置按钮点击事件，按钮的tip与功能面板的互相切换
    $('#sceneSetting').on('click', function () {
        checkBtnActives(['#mapBg']);
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(this).children('.control-menu').removeClass('actives');
            $(this).find('.tooltiptext').css({ "visibility": "visible" });
        } else {
            $(this).addClass('active');
            $(this).children('.control-menu').addClass('actives');
            $(this).find('.tooltiptext').css({ "visibility": "hidden" });
        }
    }).hover(function () {
        if (!$(this).hasClass('active')) {
            $(this).find('.tooltiptext').css({ "visibility": "visible" });
        }
    }, function () {
        $(this).find('.tooltiptext').css({ "visibility": "hidden" });
    });

    // 设置li标签添加点击事件
    $('#sceneSetting .control-menu-pane li').on('click', function (ev) {
        //ev.stopPropagation();
        if ($(this).hasClass('selected')) {
            stopRotate();
            $(this).removeClass('selected');
        } else {
            $(this).addClass('selected');
            restarRotate();
        }
    });



    // 小地图的开启/关闭按钮的鼠标点击事件
    $('#miniMap').on('click', function () {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            destoryMiniMap();
        } else {
            $(this).addClass('active');
            createMiniMap();
        }
        checkBtnActives(['#mapBg', '#sceneSetting']);
    });

    // 地图背景的开启/关闭按钮的鼠标点击事件，按钮的tip与功能面板的互相切换
    $('#mapBg').on('click', function () {
        checkBtnActives(['#sceneSetting']);
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(this).children('.control-menu').removeClass('actives');
            $(this).find('.tooltiptext').css({ "visibility": "visible" });
        } else {
            $(this).addClass('active');
            $(this).children('.control-menu').addClass('actives');
            $(this).find('.tooltiptext').css({ "visibility": "hidden" });
        }
    }).hover(function () {
        if (!$(this).hasClass('active')) {
            $(this).find('.tooltiptext').css({ "visibility": "visible" });
        }
    }, function () {
        $(this).find('.tooltiptext').css({ "visibility": "hidden" });
    });


    // 进入层级事件
    app.on(THING.EventType.EnterLevel, function (ev) {
        app.skyBox = null;
        var visible = true;

        var car = app.query(new_name)[0]
        app.background = '/uploads/wechat/163607/file/广西东盟项目/Image/op0.png';
        stopRotate();
        mainPanle.addButton(ev.object.type);//创建设备选择器
        // 进入建筑层级
        let name = ev.object.name;

        //判断行走小人是否显示隐藏
        car.visible = name != "十三楼" ? false : true;
        //判断多选面板是否显示隐藏
        if(ev.object.type != 'Floor' && panel_ != undefined){
            delete_ui();//销毁面板
            panel_.destroy()
            sidebar.equipment = false
            sidebar.device_add = false
            delete_dome();//删除设备选择器
        }
        if (ev.object.type == 'Building') {
            //销毁面板
            let floors = ev.object.floors;
            if (floors.length > 1) {
                // reset();//销毁已创建的物品
                building = ev.object;
                addFloorPos(building);

                let expandState = building.getAttribute('expandState');
                if (expandState == null) {
                    building.setAttribute('expandState', 'close');
                }
                $('#horizontalExpansion').css({ 'display': 'block' });
                $('#verticalExpansion').css({ 'display': 'block' });
            }
        }else if(ev.object.type == 'Floor'){
            floorID = ev.object.id;
            select_device();
            click_userData();
        } else {
            $('#horizontalExpansion').css({ 'display': 'none' });
            $('#verticalExpansion').css({ 'display': 'none' });
            // 进入园区层级
            if (ev.object.type == 'Campus') {
                showAllPanels()
                if (building != null) {
                    exitBuildingCloseFloor(building);
                    $('#horizontalExpansion').removeClass('active');
                    $('#verticalExpansion').removeClass('active');
                    building = null;
                }
            } else{
                
            }
        }
        if (skyBox != null) {
            app.skyBox = skyBox;
        }

        // 重新创建小地图
        if ($('#miniMap').hasClass('active')) {
            destoryMiniMap();
            createMiniMap();
        }

    });

    // 行走按钮的鼠标点击事件
    $('#moveByFps').on('click', function () {
        stopRotate();
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            if (box != null) {
                // 恢复默认双击进入层级事件
                app.resumeEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);
                // 恢复默认右键退出层级事件
                app.resumeEvent(THING.EventType.Click, '*', THING.EventTag.LevelBackOperation);
                box.destroy();
                box = null;
            }
            if (fpsCtrl != null) {
                exitFps();
            }
        } else {
            $(this).addClass('active');
            // 禁用默认双击进入层级事件
            app.pauseEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);
            // 禁用默认右键退出层级事件
            app.pauseEvent(THING.EventType.Click, '*', THING.EventTag.LevelBackOperation);
            // 记录摄像机当前位置
            cameraInitPos = [app.camera.position, app.camera.target];
            createBox();
        }
        checkBtnActives(['#mapBg', '#sceneSetting']);
    });

    // 全屏按钮的鼠标抬起事件
    $('#fullScreen').mouseup(function () {
        if (!fullScreenState) {
            $('.btn-full-screen').css('display', 'none');
            $('.btn-narrow').css('display', 'block');
            $('#fullScreen span').text('退出全屏');
            fullScreen();
            fullScreenState = true;
        } else {
            $('.btn-full-screen').css('display', 'block');
            $('.btn-narrow').css('display', 'none');
            $('#fullScreen span').text('全屏');
            exitFullScreen();
            fullScreenState = false;
            if ($('#mapBg').hasClass('active')) {
                destoryMiniMap();
                createMiniMap();
            }
        }
        checkBtnActives(['#mapBg', '#sceneSetting']);
    });

    // 鼠标键按下事件，功能按钮隐藏
    app.on(THING.EventType.MouseDown, function (ev) {
        if (ev.picked) {
            if (ev.object.type === "Thing") { 
                var obj = ev.object
                // 设置物体可拖拽
                obj.draggable = true;
                
                /* drag dragstart dragend 事件参数:
                    {Number} ev.x 鼠标拾取处的屏幕横坐标
                    {Number} ev.y 鼠标拾取处的屏幕纵坐标
                    {THING.BaseObject} ev.object 拖拽的物体
                    {Array} ev.pickedPosition 鼠标拾取 3D 场景中的世界坐标
                    {Boolean} ev.altKey 拖拽时是否按下 Alt 键
                    {Boolean} ev.ctrlKey 拖拽时是否按下 Ctrl 键
                    {Boolean} ev.shiftKey 拖拽时是否按下 Shift 键
                */ 
                // 开始拖拽
                obj.on('dragstart', function(ev) { 
                    console.log('开始拖拽');
                }); 
                // 拖拽中 
                obj.on('drag', function(ev) { 
                    if (position == undefined) {
                        position = ev.object.position[1]
                    }
                    ev.pickedPosition[1] = 0
                    //创建设备编辑器
                    add_dome(ev);
                }); 
                // 拖拽结束 
                obj.on('dragend',function(ev) { 
                    console.log('结束拖拽');
                }); 
            }
        }

        
        app.pauseEvent(THING.EventType.CameraZoom, null, '摄像机前后滚动，功能图片隐藏');
        if (showControlTimer != null) {
            clearTimeout(showControlTimer);
            showControlTimer = null;

        }
        stopRotate();
        if (hiddenControlTimer == null) {
            clearTimeout(showControlTimer);
            hiddenControlTimer = setTimeout(function () {
                $('#all-controls').css('display', 'none');
                clearTimeout(hiddenControlTimer);
                hiddenControlTimer = null;

            }, 300);
        }
        // app.camera.enablePan = false;  // 禁用平移
    });
    // 鼠标键抬起事件，功能按钮显示
    app.on(THING.EventType.MouseUp, function () {
        app.resumeEvent(THING.EventType.CameraZoom, null, '摄像机前后滚动，功能图片隐藏');
        if (hiddenControlTimer != null) {
            clearTimeout(hiddenControlTimer);
            hiddenControlTimer = null;
        }
        if (showControlTimer == null) {
            showControlTimer = setTimeout(function () {
                $('#all-controls').css('display', 'block');
                clearTimeout(showControlTimer);
                showControlTimer = null;
                restarRotate();
            }, 300);
        }
    });
    let count = 0;
    // 鼠标滑轮滚动
    app.on(THING.EventType.CameraZoom, function () {
        if (showControlTimer != null) {
            count = 0;
            return;
        }
        stopRotate();
        if (showControlTimer == null) {
            $('#all-controls').css('display', 'none');
            showControlTimer = setInterval(function () {
                count++;
                if (count >= 2) {
                    $('#all-controls').css('display', 'block');
                    restarRotate();
                    clearInterval(showControlTimer);
                    showControlTimer = null;
                }
            }, 300);
        }
    }, '摄像机前后滚动，功能图片隐藏');

    // 鼠标移动事件，已创建的红色胶囊跟随鼠标移动
    app.on(THING.EventType.MouseMove, function (ev) {
        if (box != null) {
            if (ev.picked) {
                box.position = ev.pickedPosition;
            }
        }
        if(device != null){
            if (ev.picked) {
                device.position = ev.pickedPosition;
            }
        }
    });

    // 摄像机位置改变结束事件，记录当前摄像机位置与目标点x，y，z的差
    app.on(THING.EventType.CameraChangeEnd, function () {
        if (cameraDistace.length > 0) {
            let caPos = app.camera.position;
            let scePos = app.root.defaultCampus.position;
            cameraDistace = [caPos[0] - scePos[0], caPos[1] - scePos[1], caPos[2] - scePos[2]];
        }
        restarRotate();
    });

    // 点击事件，放置红色胶囊，进入第一人称行走
    app.on(THING.EventType.Click, function (ev) {
        stopRotate();
        if (ev.button == 0 && box != null) {
            let pos = box.position;
            box.destroy();
            box = null;
            app.camera.flyTo(pos);
            enterFps([pos[0], pos[1] + 2, pos[2]]);
        }
        //创建设备
        if (device != null) {
            device = null;
        }
        checkBtnActives(['#mapBg', '#sceneSetting']);
    });

    // 进入层级事件，退出第一人称行走
    app.on(THING.EventType.EnterLevel, function () {
        if (fpsCtrl != null) {
            exitFps();
        }
    });
    

    // 离开层级事件，停止旋转
    app.on(THING.EventType.LeaveLevel, function () {
        stopRotate();
    })
    // 鼠标滑轮事件，停止旋转
    app.on(THING.EventType.MouseWheel, function () {
        app.camera.distanceLimited = [30, 200];  // 设置摄像机距离范围
        stopRotate();
    })

    // 场景添加键盘按下事件，当进入第一人称行走时，按下esc键退出第一人称行走
    app.on(THING.EventType.KeyDown, function (ev) {
        if (ev.code == 'Escape') {
            if (box != null) {
                app.resumeEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);
                app.resumeEvent(THING.EventType.Click, '*', THING.EventTag.LevelBackOperation);
                box.destroy();
                box = null;
                $('#moveByFps').removeClass('active');
                restarRotate();
            }
            if (fpsCtrl != null) {
                exitFps();

                restarRotate();
            }
            checkBtnActives(['#mapBg', '#sceneSetting']);
        }
    });

    window.onresize = function () {
        if (!checkFull()) {
            //要执行的动作
            if (fullScreenState == true) {
                $('.btn-full-screen').css('display', 'block');
                $('.btn-narrow').css('display', 'none');
                $('#fullScreen span').text('全屏');
                fullScreenState = false;
            }
        }
    }
}

/**
 * 说明：检测菜单项是否已打开
 */
function checkBtnActives(arr) {
    for (let i = 0; i < arr.length; i++) {
        let temp = arr[i];
        if ($(temp).hasClass('active')) {
            $(temp).removeClass('active');
            $(temp).find('.control-menu').removeClass('actives');
        }
    }
}

/**
 * 说明：判断是否全屏
 */
function checkFull() {
    var isFull =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement;
    //to fix : false || undefined == undefined
    if (isFull === undefined) isFull = false;
    return isFull;
}


/**
 * 说明：创建胶囊
 */
function createBox() {
    if (box == null) {
        box = app.create({
            type: 'Thing',
            url: 'https://model.3dmomoda.com/models/9CD08ED91F5C4E0ABB6B0833C86F2942/0/gltf/',
            position: [0, 0, 0],
            angle: 180,
            scale: [1.7, 1.7, 1.7],
            style: {
                color: '#FF0000'
            }
        });
    }
}

/**
 * 说明：第一人称行走
 */
function enterFps(pos) {
    if (fpsCtrl == null) {
        app.pauseEvent(THING.EventType.Pick, '*', THING.EventTag.LevelPickOperation);
        app.pauseEvent(THING.EventType.KeyUp, null, '空格键切换视角');
        app.camera.position = pos;  // 起始位置为鼠标点击时的位置
        // 添加第一人称行走控件
        fpsCtrl = app.addControl(
            new THING.WalkControl({  // 参数可以动态修改
                walkSpeed: 0.02,  // 行走速度
                turnSpeed: 0.25,  // 右键旋转速度
                gravity: 26,  // 物体重量
                eyeHeight: 1.6,  // 人高度
                jumpSpeed: 10,  // 按空格键 跳跃的速度
                enableKeyRotate: false,  // 默认不开启键盘控制旋转
                useCollision: true,  // 默认不开启碰撞检测
                useGravity: true,  // 默认开启重力
                groundObjects: [app.scene],  // 把整个场景都添加,可把楼层或其他需要检测的添加进入碰撞体系里 | 默认值 园区地板，如果园区过大，可取消提升性能
                collisionObjects: [app.scene]  // 把整个场景都添加,可把楼层或其他需要检测的添加进入碰撞体系里 | 默认值 园区地板，如果园区过大，可取消提升性能
            })
        );
    }
}

/**
 * 说明：退出第一人称行走
 */
function exitFps() {
    app.removeControl(fpsCtrl);
    fpsCtrl = null;
    cameraFly(cameraInitPos[0], cameraInitPos[1]);
    // 恢复默认双击事件
    app.resumeEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);
    // 恢复默认点击事件
    app.resumeEvent(THING.EventType.Click, '*', THING.EventTag.LevelBackOperation);
    // 恢复默认拾取事件
    app.resumeEvent(THING.EventType.Pick, '*', THING.EventTag.LevelPickOperation);
    // 恢复默认键盘键抬起事件
    app.resumeEvent(THING.EventType.KeyUp, null, '空格键切换视角');
    $('#moveByFps').removeClass('active');
}

/**
 * 说明：开启小地图
 */
function createMiniMap() {
    if (miniMapCtrl == null) {
        // 添加小地图控件
        miniMapCtrl = app.addControl(new THING.MiniMapControl({
            width: 200,
            height: 200,
            position: THING.CornerType.LeftBottom,
            opacity: 0.8,
            scale: 1,
            angle: 0,
            mousewheel: true,
            cameraViewImg: 'https://www.thingjs.com/static/images/minimap1.png',
            cameraCenterImg: 'https://www.thingjs.com/static/images/minimap0.png'
        }));
        $('.minimap').css('border', '1px solid rgba(255, 255, 255, 0.8)');
        $('.minimap').css('left', '3px');
        $('.minimap').css('bottom', '3px');
    } else {
        destoryMiniMap();
        createMiniMap();
    }
}

/**
 * 说明：关闭小地图
 */
function destoryMiniMap() {
    if (miniMapCtrl != null) {
        app.removeControl(miniMapCtrl);
        miniMapCtrl = null;
    }
}

/**
 * 说明：全屏显示
 */
function fullScreen() {
    let el = document.documentElement;
    let rfs = el.requestFullScreen || el.webkitRequestFullScreen;
    if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
    } else if (typeof window.ActiveXObject != "undefined") {
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}

/**
 * 说明：退出全屏
 */
function exitFullScreen() {
    let el = document;
    let cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.exitFullScreen;
    if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
    } else if (typeof window.ActiveXObject != "undefined") {
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}

/**
 * 说明：摄像机飞行
 */
function cameraFly(position, target) {
    // 摄像机飞行到某位置
    app.camera.flyTo({
        'position': position,
        'target': target,
        'time': 1000,
        'complete': function () {
        }
    });
}

/**
 * 说明：自动旋转
 */
function startRotate() {
    app.camera.enableRotate = false;  // 关闭默认的旋转操作
    app.camera.enablePan = false;  // 关闭默认的平移操作
    app.camera.enableZoom = false;  // 关闭默认的缩放操作
    // 绕摄像机当前目标点旋转
    app.camera.rotateAround({
        target: app.camera.target,  // 围绕摄像机当前目标点
        // object: obj,  // 环绕的物体 (object 与 target 的设置互斥)
        speed: 4,  // 环绕飞行的时间（3min）
        yRotateAngle: 360,  // 环绕y轴飞行的旋转角度
        loopType: THING.LoopType.Repeat  // 设置循环类型
    });

}

/**
 * 说明：停止自动旋转
 */
function stopRotate() {
    app.camera.enableRotate = true;  // 开启默认的旋转操作
    app.camera.enablePan = true;  // 开启默认的平移操作
    app.camera.enableZoom = true;  // 开启默认的缩放操作
    app.camera.stopRotateAround();
    if (rotateTimer) {
        clearTimeout(rotateTimer);
        rotateTimer = null;
    }
}
/**
 * 说明：重新开始转动，未进行任何操作5s后开始自动旋转
 */
function restarRotate() {
    if (fpsCtrl != null || !$('#sceneSetting .control-menu-pane li.autoRotate').hasClass('selected')) {
        return;
    }
    if (rotateTimer == null) {
        rotateTimer = setTimeout(function () {
            startRotate();
        }, restartTime);
    } else {
        clearTimeout(rotateTimer);
        rotateTimer = null;
        restarRotate();
    }
}