数字孪生可视化开发技术（ThingJS）学习笔记

/**
 * 说明：创建App，url为园区地址（可选）
 *      使用App创建打开的三维空间我们称之为“场景”（scene）。场景包含地球、园区、模型等。
 *      创建App时，传入的url就是园区的地址，不传url则创建一个空的场景。园区可在CampusBuilder
 *      中创建编辑，有两种方法可以将园区添加到线上资源面板，方法如下：
 *          1. 园区保存后，会自动同步到网页同一账号下
 *          2. 园区保存后，导出tjs文件，在园区资源面板上传
 *      上面两种方式生成的园区资源均可在资源面板中双击自动生成脚本
 * 难度：★☆☆☆☆
 */
// 加载场景代码 
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/factory',  // 场景地址
    background: '#000000',
    env: 'Seaside',
});
// 创建提示
initThingJsTip(`使用 App 创建的三维空间称之为“场景”。有两种方法可以将客户端保存的园区添加到园区资源面板：<br>
    1. 园区保存后，会自动同步到网页同一账号下;<br>
    2. 园区保存后导出tjs文件，在园区资源面板上传。<br>`);

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/factory',  // 场景地址
    background: '#000000',
    env: 'Seaside',
});

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/factory',  // 场景地址
    background: '#000000',
    env: 'Seaside',
});

var app = new THING.App({
    background: '#000000',
    env: 'Seaside',
});
app.create({
    type:'Campus',
    url: 'https://www.thingjs.com/static/models/factory',
    complete(ev){
        app.level.change(ev.object)
    }
})

/**
 * 说明：通过动态加载场景 动态加载建筑里的楼层
 * 操作：双击建筑，动态加载场景
 */
var dataObj = { progress: 0 };  // 场景加载进度条数据对象
var loadingPanel;  // 进度条界面组件
var curCampus;
// 配置相应建筑的园区场景url
var campusUrl = [{
    name: "园区A",
    url: "https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%8A%A8%E6%80%81%E5%B1%82%E7%BA%A7%E5%A4%96%E7%AB%8B%E9%9D%A2"
}, {
    name: "园区B",
    url: "https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%9B%BE%E4%B9%A6%E9%A6%86%E5%A4%96"
}];
var buildingConfig = {
    '商业A楼': 'https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%95%86%E4%B8%9AA%E6%A5%BC%E5%B1%82%E7%BA%A7',
    '商业B楼': 'https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%95%86%E4%B8%9AB%E6%A5%BC%E5%B1%82%E7%BA%A7',
    '商业C楼': 'https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%95%86%E4%B8%9AC%E6%A5%BC%E5%B1%82%E7%BA%A7',
    '商业D楼': 'https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%95%86%E4%B8%9AD%E6%A5%BC%E5%B1%82%E7%BA%A7',
    '商业E楼': 'https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%95%86%E4%B8%9AE%E6%A5%BC%E5%B1%82%E7%BA%A7',
    '住宅A楼': 'https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E4%BD%8F%E5%AE%85%E6%A5%BC%E5%B1%82%E7%BA%A7',
    '住宅B楼': 'https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E4%BD%8F%E5%AE%85%E6%A5%BC%E5%B1%82%E7%BA%A7',
    '图书馆': 'https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%95%86%E4%B8%9AC%E6%A5%BC%E5%B1%82%E7%BA%A7',
};
var app = new THING.App({
    "url": "https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%8A%A8%E6%80%81%E5%B1%82%E7%BA%A7%E5%A4%96%E7%AB%8B%E9%9D%A2",
    "skyBox": "Universal",
});
// 主场景加载完后 删掉楼层
app.on('load', function (ev) {
    curCampus = ev.campus;
    // 进入层级切换
    app.level.change(ev.campus);
    initThingJsTip("本例程通过动态创建场景，实现场景切换。场景切换后，双击进入建筑，可动态创建楼层。<br><br>当前位于：园区A");
    // 园区加载完成后，将园区中建筑下的楼层删除（Floor）
    for (var i = 0; i < ev.buildings.length; i++) {
        ev.buildings[i].floors.destroy();
    }
    new THING.widget.Button('切换场景', changeScene);  // 切换场景
    createWidgets();
});
/**
 * 切换场景
 */
function changeScene() {
    var url = curCampus.url;  //　当前园区url
    // 动态创建园区
    if (url === campusUrl[0].url) {
        createCampus(campusUrl[1]);
    } else {
        createCampus(campusUrl[0]);
    }
}
/**
 * 创建园区
 */
function createCampus(obj) {
    app.create({
        type: "Campus",
        url: obj.url,
        position: [0, 0, 0],
        visible: false, // 创建园区过程中隐藏园区
        complete: function (ev) {
            initThingJsTip('本例程通过动态创建场景，实现场景切换。场景切换后，双击进入建筑，可动态创建楼层。<br><br>当前位于：' + obj.name);
            curCampus.destroy();  // 新园区创建完成后删除之前的
            curCampus = ev.object;  // 将新园区赋给全局变量
            curCampus.fadeIn();  // 创建完成后显示（渐现）
            app.level.change(curCampus);  // 开启层级切换
            var building = app.query(".Building");  // 获取园区中的建筑
            // 园区加载完成后，将园区中建筑下的楼层删除（Floor）
            for (var i = 0; i < building.length; i++) {
                building[i].floors.destroy();
            }
        }
    });
}
/**
 * 卸载动态创建的园区
 */
app.on(THING.EventType.LeaveLevel, '.Building', function (ev) {
    var current = ev.current;
    if (current.type == "Campus") {
        var building = ev.previous;  // 获取之前的层级
        if (!building) return;
        building._isAlreadyBuildedFloors = false;
        if (building.floors) building.floors.destroy();
        var url = curCampus.url;  //　当前园区url
        if (url === campusUrl[0].url) {
            initThingJsTip('本例程通过动态创建场景，实现场景切换。场景切换后，双击进入建筑，可动态创建楼层。<br><br>当前位于：' + campusUrl[0].name);
        } else {
            initThingJsTip('本例程通过动态创建场景，实现场景切换。场景切换后，双击进入建筑，可动态创建楼层。<br><br>当前位于：' + campusUrl[1].name);
        }
    }
}, '退出建筑时卸载建筑下的楼层');
// 进入建筑时 动态加载园区
app.on(THING.EventType.EnterLevel, '.Building', function (ev) {
    var buildingMain = ev.object;  // 获取当前建筑对象
    var buildingName = buildingMain.name;  // 获取当前建筑名称
    var preObject = ev.previous;  // 上一层级的物体
    // 如果是从楼层退出 进入Building的 则不做操作
    if (preObject instanceof THING.Floor) return;
    initThingJsTip(buildingName + '正在加载！');
    loadingPanel.visible = true;
    // 暂停进入建筑时的默认飞行操作，等待楼层创建完成
    app.pauseEvent(THING.EventType.EnterLevel, '.Building', THING.EventTag.LevelFly);
    // 暂停单击右键返回上一层级功能
    app.pauseEvent(THING.EventType.Click, '*', THING.EventTag.LevelBackOperation);
    // 动态创建园区
    var campusTmp = app.create({
        type: 'Campus',
        // 根据不同的建筑，传入园区相应的url
        url: buildingConfig[buildingName],
        // 在回调中，将动态创建的园区和园区下的建筑删除 只保留楼层 并添加到相应的建筑中
        complete: function () {
            var buildingTmp = campusTmp.buildings[0];
            buildingTmp.floors.forEach(function (floor) {
                buildingMain.add({
                    object: floor,
                    // 设置相对坐标，楼层相对于建筑的位置保持一致
                    localPosition: floor.localPosition
                });
            })
            // 楼层添加后，删除园区以及内部的园区建筑
            buildingTmp.destroy();
            campusTmp.destroy();
            loadingPanel.visible = false;
            // 恢复默认的进入建筑飞行操作
            app.resumeEvent(THING.EventType.EnterLevel, '.Building', THING.EventTag.LevelFly);
            // 恢复单击右键返回上一层级功能
            app.resumeEvent(THING.EventType.Click, '*', THING.EventTag.LevelBackOperation);
            // 这一帧内 暂停自定义的 “进入建筑创建楼层” 响应
            app.pauseEventInFrame(THING.EventType.EnterLevel, '.Building', '进入建筑创建楼层');
            // 触发进入建筑的层级切换事件 从而触发内置响应
            buildingMain.trigger(THING.EventType.EnterLevel, ev);
            initThingJsTip(buildingName + '加载完成！');
        }
    });
}, '进入建筑创建楼层', 51);
app.on(THING.EventType.LoadCampusProgress, function (ev) {
    var value = ev.progress;
    dataObj.progress = value;
}, '加载场景进度');
/**
 * 创建进度条组件
 */
function createWidgets() {
    // 进度条界面组件
    loadingPanel = new THING.widget.Panel({
        titleText: '场景加载进度',
        opacity: 0.9, // 透明度
        hasTitle: true
    });
    // 设置进度条界面位置
    loadingPanel.positionOrigin = 'TR'// 基于界面右上角定位
    loadingPanel.position = ['100%', 0];
    loadingPanel.visible = false;
    loadingPanel.addNumberSlider(dataObj, 'progress').step(0.01).min(0).max(1).isPercentage(true);
}

app.on('load',  (ev)=> {
    curCampus = ev.campus;
    // 进入层级切换
    app.level.change(ev.campus);
    initThingJsTip("本例程通过动态创建场景，实现场景切换。场景切换后，双击进入建筑，可动态创建楼层。<br><br>当前位于：园区A");
    // 园区加载完成后，将园区中建筑下的楼层删除（Floor）
    for (var i = 0; i < ev.buildings.length; i++) {
        ev.buildings[i].floors.destroy();
    }
    new THING.widget.Button('切换场景', ()=>
      {
        //　当前园区url
        var url = curCampus.url;  
        // 动态创建园区
        if (url === campusUrl[0].url) {
          createCampus(campusUrl[1]);
        } else 
        {
        createCampus(campusUrl[0]);
        }
      }
    );  // 切换场景
    createWidgets();
});

function createCampus(obj) {
    app.create({
        type: "Campus",
        url: obj.url,
        position: [0, 0, 0],
        visible: false,                             // 创建园区过程中隐藏园区
        complete: function (ev) {
            initThingJsTip('本例程通过动态创建场景，实现场景切换。场景切换后，双击进入建筑，可动态创建楼层。<br><br>当前位于：' + obj.name);
            // curCampus 是一个该函数外面的全局变量，一开始时是用于容纳所有的园区的信息[{url:'xxx', name:'xxx'},...]
            // 主场景加载完后, curCampus 被赋值为 ev.campus;
            curCampus.destroy();                    // 新园区创建完成后删除之前的园区
            curCampus = ev.object;                  // 将新园区赋给全局变量 curCampus
            curCampus.fadeIn();                     // 创建完成后显示（渐现）
            app.level.change(curCampus);            // 开启层级切换
            // 获取园区中的建筑
            var building = app.query(".Building");  
            // 园区加载完成后，将园区中建筑下的楼层删除（Floor）
            for (var i = 0; i < building.length; i++) {
                building[i].floors.destroy();
            }
        }
    });
}

{
    name: "园区A",
    url: "https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%8A%A8%E6%80%81%E5%B1%82%E7%BA%A7%E5%A4%96%E7%AB%8B%E9%9D%A2"
}

{
  name: "园区B",
  url: "https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%9B%BE%E4%B9%A6%E9%A6%86%E5%A4%96"
}

// 加载场景代码 
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/factory',  // 场景地址
    skyBox: 'Night',
    env: 'Seaside',
});
app.on('load', function () {
    initThingJsTip("天空盒是一个包裹整个场景的立方体，可以很好地渲染并展示整个场景环境。</br>点击左侧按钮，设置天空盒效果、背景色以及背景图片。");
    // 摄像机飞行到某位置
    app.camera.flyTo({
        'position': [14.929613003036518, 26.939904587373245, 67.14964454354718],
        'target': [2.1474740033704594, 17.384929223259824, 10.177959375514941],
        'time': 2000
    });
})
// 设置天空盒（目前仅能使用系统内置天空盒效果）
new THING.widget.Button('蓝天', function () {
    app.skyBox = 'BlueSky';
});
new THING.widget.Button('银河', function () {
    app.skyBox = 'MilkyWay';
});
new THING.widget.Button('黑夜', function () {
    app.skyBox = 'Night';
});
new THING.widget.Button('多云', function () {
    app.skyBox = 'CloudySky';
});
new THING.widget.Button('灰白', function () {
    app.skyBox = 'White';
});
new THING.widget.Button('暗黑', function () {
    app.skyBox = 'Dark';
});
// 背景色颜色可使用十六进制颜色或rgb字符串
new THING.widget.Button('设置背景色1', function () {
    app.background = '#0a3d62';
})
new THING.widget.Button('设置背景色2', function () {
    app.background = 'rgb(68,114,196)';
})
// 图片可在资源、页面资源上传
// 上传完成后，点击需要使用的图片，即可在代码编辑器中出现图片url地址
// 也可直接使用能访问的网络图片url
new THING.widget.Button('设置背景图片1', function () {
    app.background = 'https://www.thingjs.com/static/images/background_img_01.png';
})
new THING.widget.Button('设置背景图片2', function () {
    app.background = 'https://www.thingjs.com/static/images/background_img_02.png';
})
// 清除背景效果
new THING.widget.Button('清除背景', function () {
    app.skyBox = null;
    app.background = null;
})

// 加载场景代码 
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/factory',  // 场景地址
    skyBox: 'Night',
    env: 'Seaside',
});
// 参数
var dataObj = {
    'type': 'SpotLight',
    'lightAngle': 30,
    'intensity': 1,
    'penumbra': 0.5,
    'castShadow': false,
    'position': null,
    'height': 0,
    'color': 0xFFFFFF,
    'distance': null,
    'target': null,
    'helper': true,
    'follow': true,
};
// 叉车
let car1;
let car2;
// 当前灯光
let curLight;
let curLightPosition;
// 创建聚光灯方法
function createSpotLight(position, target) {
    dataObj['lightAngle'] = 30;
    dataObj['intensity'] = 0.5;
    dataObj['penumbra'] = 0.5;
    dataObj['castShadow'] = false;
    dataObj['position'] = position;
    dataObj['distance'] = 25;
    dataObj['color'] = 0xFFFFFF;
    dataObj['helper'] = true;
    dataObj['follow'] = true;
    //创建聚光灯
    var spotLight = app.create(dataObj);
    curLight = spotLight;
    curLightPosition = spotLight.position;
    createSpotLightControlPanel(spotLight);
    curLight.lookAt(car1);
}
/**
 * 灯光控制面板
 */
function createSpotLightControlPanel() {
    var panel = new THING.widget.Panel({
        isDrag: true,
        titleText: "灯光参数调整",
        width: '260px',
        hasTitle: true
    });
    // 设置 panel 位置    
    panel.position = [10, 35];
    panel.addNumberSlider(dataObj, 'lightAngle').caption('灯光角度').step(1).min(0).max(180).isChangeValue(true).on('change', function(value) {
        curLight.lightAngle = value;
    });
    panel.addNumberSlider(dataObj, 'intensity').caption('亮度').step(0.01).min(0).max(1).isChangeValue(true).on('change', function(value) {
        curLight.intensity = value;
    });
    panel.addNumberSlider(dataObj, 'penumbra').caption('半影').step(0.01).min(0).max(1).isChangeValue(true).on('change', function(value) {
        curLight.penumbra = value;
    });
    panel.addNumberSlider(dataObj, 'distance').caption('距离').step(0.1).min(0).max(200).isChangeValue(true).on('change', function(value) {
        curLight.distance = value;
    });
    panel.addNumberSlider(dataObj, 'height').caption('高度').step(0.1).min(0).max(200).isChangeValue(true).on('change', function(value) {
        curLight.position = [curLightPosition[0], curLightPosition[1] + value, curLightPosition[2]];
    });
    panel.addBoolean(dataObj, 'castShadow').caption('影子').on('change', function(value) {
        curLight.castShadow = value;
    });
    panel.addBoolean(dataObj, 'helper').caption('辅助线').on('change', function(value) {
        curLight.helper = value;
    });
    panel.addBoolean(dataObj, 'follow').caption('跟随物体').on('change', function(value) {
        if (value) {
            curLight.lookAt(car1);
        } else {
            curLight.lookAt(null);
        }
    });
    panel.addColor(dataObj, 'color').caption('颜色').on('change', function(value) {
        curLight.lightColor = value;
    });
}
/**
 * 注册鼠标移动事件,检查是否按下'shift'键, 按下设置聚光灯跟随鼠标位置
 */
app.on('mousemove', function(ev) {
    if (!curLight) {
        return;
    }
    if (!ev.shiftKey) {
        return;
    }
    var pickedPosition = ev.pickedPosition;
    if (pickedPosition) {
        curLight.lookAt(pickedPosition);
    }
})
/**
 * 注册场景load事件
 */
app.on('load', function(ev) {
    // createTip();
    // 主灯强度设置为0,突出聚光灯效果
    app.lighting = {
        mainLight: {
            intensity: 0
        }
    };
    // 获取场景内id为'car01' 和 'car02' 的叉车
    car1 = app.query('car01')[0];
    car2 = app.query('car02')[0];
    // 参数1: 在car2上方5米创建一个聚光灯
    // 参数2: 初始target设置为car1的位置
    createSpotLight(THING.Math.addVector(car2.position, [0, 5, 0]), car1.position);
    // 创建一个圆形路径
    var path = [];
    var radius = 6;
    for (var degree = 0; degree <= 360; degree += 10) {
        var x = Math.cos(degree * 2 * Math.PI / 360) * radius;
        var z = Math.sin(degree * 2 * Math.PI / 360) * radius;
        path.push(THING.Math.addVector(car1.position, [x, 0, z]));
    }
    // 让 car1 沿圆形路径运动
    car1.movePath({
        orientToPath: true, // 物体移动时沿向路径方向
        path: path,
        time: 10 * 1000,
        loopType: THING.LoopType.Repeat // 循环类型
    });
    initThingJsTip("左侧面板可对灯光参数进行调整。按住 shift 键，聚光灯可追踪鼠标位置");
    $(".warninfo3").css("left", "55%");
})

//  进入层级
// {String} ev.level 当前层级标识枚举值 可通过 THING.LevelType 获取枚举值，如建筑层级标识为 THING.LevelType.Building
// {THING.BaseObject} ev.object 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.current 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.previous 上一层级对象（离开的层级对象）
app.on(THING.EventType.EnterLevel, '.Thing', function (ev) {
    var object = ev.object;
});

//  层级变化
// {String} ev.level 当前层级标识枚举值 可通过 THING.LevelType 获取枚举值，如建筑层级标识为 THING.LevelType.Building
// {THING.BaseObject} ev.object 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.current 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.previous 上一层级对象（离开的层级对象）
app.on(THING.EventType.LevelChange, function (ev) {
    var object = ev.current;
    if (object instanceof THING.Campus) {
        console.log('Campus: ' + object);
    }
    else if (object instanceof THING.Building) {
        console.log('Building: ' + object);
    }
    else if (object instanceof THING.Floor) {
        console.log('Floor: ' + object);
    }
    else if (object instanceof THING.Thing) {
        console.log('Thing: ' + object);
    }
});

//  离开层级
// {String} ev.level 当前层级标识枚举值 可通过 THING.LevelType 获取枚举值，如建筑层级标识为 THING.LevelType.Building
// {THING.BaseObject} ev.object 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.current 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.previous 上一层级对象（离开的层级对象）
app.on(THING.EventType.LeaveLevel, '.Thing', function (ev) {
    var object = ev.object;
});

//  层级切换飞行结束
// {String} ev.level 当前层级标识枚举值 可通过 THING.LevelType 获取枚举值，如建筑层级标识为 THING.LevelType.Building
// {THING.BaseObject} ev.object 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.current 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.previous 上一层级对象（离开的层级对象）
app.on(THING.EventType.LevelFlyEnd, '.Thing', function (ev) {
    console.log(ev.object.id);
});

// 修改进入层级场景响应
// {String} ev.level 当前层级标识枚举值 可通过 THING.LevelType 获取枚举值，如建筑层级标识为 THING.LevelType.Building
// {THING.BaseObject} ev.object 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.current 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.previous 上一层级对象（离开的层级对象）
app.on(THING.EventType.EnterLevel, '.Thing', function (ev) {
    var object = ev.object;
    // 其他物体半透明
    var things = object.brothers.query('.Thing');
    things.style.opacity = 0.25;
}, 'customEnterLevel');
//  停止进入物体层级的默认行为
app.pauseEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelSceneOperations);

//  修改进入层级飞行响应
// {String} ev.level 当前层级标识枚举值 可通过 THING.LevelType 获取枚举值，如建筑层级标识为 THING.LevelType.Building
// {THING.BaseObject} ev.object 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.current 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.previous 上一层级对象（离开的层级对象）
app.on(THING.EventType.EnterLevel, '.Thing', function (ev) {
    var object = ev.object;
    app.camera.flyTo({
        object: object,
        xAngle: 45, //物体坐标系下沿x轴旋转角度
        yAngle: -45, //物体坐标系下沿y轴旋转角度
        radiusFactor: 2, //物体包围盒半径的倍数
        time: 3000,
        lerpType: THING.LerpType.Quartic.In,
        complete: function() {
            console.log("飞行结束");
        }
    });
}, 'customLevelFly');
//  停止进入物体层级的默认飞行行为
app.pauseEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelFly);

//  修改进入层级背景设置
// {String} ev.level 当前层级标识枚举值 可通过 THING.LevelType 获取枚举值，如建筑层级标识为 THING.LevelType.Building
// {THING.BaseObject} ev.object 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.current 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.previous 上一层级对象（离开的层级对象）
app.on(THING.EventType.EnterLevel, '.Thing', function (ev) {
        app.skyBox = null;
        app.background = 0xffffff;
}, 'customLevelSetBackground');
//  停止进入物体层级的默认背景设置
app.pauseEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelSetBackground);

//  修改进入层级选择设置
// {String} ev.level 当前层级标识枚举值 可通过 THING.LevelType 获取枚举值，如建筑层级标识为 THING.LevelType.Building
// {THING.BaseObject} ev.object 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.current 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.previous 上一层级对象（离开的层级对象）
app.on(THING.EventType.EnterLevel, '.Building', function (ev) {
    app.picker.pickedResultFunc = function (obj) {
        return obj;
    }
}, 'customLevelPickedResultFunc');
// 暂停建筑层级的默认选择行为
app.pauseEvent(THING.EventType.EnterLevel, '.Building', THING.EventTag.LevelPickedResultFunc);

//  修改退出层级场景响应
// {String} ev.level 当前层级标识枚举值 可通过 THING.LevelType 获取枚举值，如建筑层级标识为 THING.LevelType.Building
// {THING.BaseObject} ev.object 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.current 当前层级对象（将要进入的层级对象）
// {THING.BaseObject} ev.previous 上一层级对象（离开的层级对象）
app.on(THING.EventType.LeaveLevel, '.Thing', function (ev) {
    var object = ev.object;
    // 取消其他物体半透明
    var things = object.brothers.query('.Thing');
    things.style.opacity = null;
}, 'customLevelSceneOperations');
//  暂停默认退出行为
app.pauseEvent(THING.EventType.LeaveLevel, '.Thing', THING.EventTag.LevelSceneOperations);

// 修改默认的拾取物体操作
// 鼠标拾取到物体变红
app.on(THING.EventType.MouseEnter, '.Thing', function(ev) {
    ev.object.style.color = '#FF0000';
});
// 鼠标离开物体取消变红
app.on(THING.EventType.MouseLeave, '.Thing', function(ev) {
    ev.object.style.color = null;
});
//  暂停默认的拾取物体操作
app.pauseEvent(THING.EventType.Pick, '*', THING.EventTag.LevelPickOperation);

//  修改进入层级操作
//  单击进入
app.on(THING.EventType.SingleClick, function (ev) {
    var object = ev.object;
    if (object) {
        object.app.level.change(object);
    }
}, 'customLevelEnterMethod');
//  暂停双击进入
app.pauseEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);

app.on('load', function (ev) {
// 场景加载完成后 进入园区层级 开启默认的层级控制
    app.level.change(ev.campus);
});
//  修改退出层级操作
// 双击右键回到上一层级
app.on(THING.EventType.DBLClick, function (ev) {
    if (ev.button != 2) {
        return;
    }
    app.level.back();
}, 'customLevelBackMethod');
// 暂停单击返回上一层级功能
app.pauseEvent(THING.EventType.Click, null, THING.EventTag.LevelBackMethod)

// 引入jquery.easyui插件
THING.Utils.dynamicLoad(['/guide/lib/jquery.easyui.min.js', '/guide/lib/default/easyui.css'], function () {
    var panel =
        `<div class="easyui-panel" style="display:none;padding:5px; width: 220px;height: auto;margin-top: 10px;margin-left: 10px; position: absolute; top: 0px; right: 0; z-index: 1;background-color: white">
            <ul id="objectTree" class="easyui-tree"></ul>
        </div>`
    $('#div2d').append($(panel));
})
// 加载场景代码 
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/factory',  // 场景地址
    background: '#000000',
    env: 'Seaside',
});
// 定义父子树的显示状态
var objectTreeState = true;
// 这里使用了jquery.easyui的tree插件
app.on('load', function (ev) {
    // 创建提示
    initThingJsTip("父子树：在 ThingJS 加载园区后，自动创建了由 campus，building，floor，room 和一些在模模搭中添加的Thing类物体。这些物体不是独立散落在场景中的，他们会相互关联，形成一棵树的结构。</br>点击左侧按钮，创建父子树，展示场景层级");
    app.camera.position = [45.620884740847416, 39.1713011011022, 57.12763372644285];
    app.camera.target = [1.7703319346792363, 4.877514886137977, -2.025030535593601];
    var buildings = app.query('.Building');
    // 创建父子树
    new THING.widget.Button('创建父子树', function () {
        // 提示内容修改
        initThingJsTip("点击右侧界面选择框，控制对应内容显隐");
        // 父子树界面创建以及控制
        $('#objectTree').parent().show();
        $('#objectTree').tree({
            data: getRootData(app.root),
            checkbox: true,
            cascadeCheck: false,
            onCheck: function (node, checked) {
                if (app.query('#' + node.id)[0]) {
                    app.query('#' + node.id).visible = checked;
                    if ((app.query('#' + node.id)[0].type) == "Campus") {
                        changeBuilding(app.query('#' + node.id)[0].buildings);
                    }
                    if ((app.query('#' + node.id)[0].type) == "Building") {
                        if (app.query('#' + node.id)[0].facades[0]) {
                            app.query('#' + node.id)[0].floors.visible = false;
                        }
                    }
                } else {
                    app.root.visible = checked;
                }
            },
            onClick: function (node, checked) {
                var id = node.id;
                var obj = app.query('#' + id)[0];
                if (obj) {
                    app.level.change(obj);
                }
            }
        })
    });
    new THING.widget.Button('重置', function () {
        app.query("*").visible = true;
        app.query("*").style.opacity = 1;
        app.level.change(ev.campus);
        app.camera.position = [45.620884740847416, 39.1713011011022, 57.12763372644285];
        app.camera.target = [1.7703319346792363, 4.877514886137977, -2.025030535593601];
        buildings.forEach(function (item) {
            if (item.facades[0]) {
                item.floors.visible = false;
            }
        })
        $("#objectTree").html('');
        $(".easyui-panel").hide();
        initThingJsTip("父子树：在 ThingJS 加载园区后，自动创建了由 campus，building，floor，room 和一些在模模搭中添加的Thing类物体。这些物体不是独立散落在场景中的，他们会相互关联，形成一棵树的结构。</br>点击左侧按钮，创建父子树，展示场景层级");
    })
});
/**
 * 根节点信息
 * @param {Object} root - root类
 */
function getRootData(root) {
    var data = [];
    data.push(getSceneRoot(root));
    return data;
}
/**
 * 根节点信息
 * @param {Object} root - root类
 */
function getSceneRoot(root) {
    var data = {
        id: root.id,
        checked: true,
        state: 'open',
        text: 'root',
    };
    data["children"] = [];
    root.campuses.forEach(function (campus) {
        data["children"].push(getCampusData(campus));
    });
    return data;
}
/**
 * 根节点信息由建筑和室外物体组成
 * @param {Object} campus - 园区类
 */
function getCampusData(campus) {
    var data = {
        id: campus.id,
        checked: true,
        state: 'open',
        text: campus.type + ' (' + campus.id + ')'
    };
    data["children"] = [];
    campus.buildings.forEach(function (building) {
        data["children"].push(getBuildingData(building));
    });
    campus.things.forEach(function (thing) {
        data["children"].push(getThingData(thing));
    });
    return data;
}
/**
 * 收集建筑信息
 * @param {Object} building - 建筑对象
 */
function getBuildingData(building) {
    var data = {
        id: building.id,
        checked: true,
        state: 'open',
        text: building.type + ' (' + building.id + ')'
    };
    data["children"] = [];
    building.floors.forEach(function (floor) {
        data["children"].push(getFloorData(floor));
    });
    return data;
}
/**
 * 收集楼层信息
 * @param {Object} floor - 楼层对象
 */
function getFloorData(floor) {
    var data = {
        id: floor.id,
        checked: true,
        state: 'open',
        text: floor.type + ' (level:' + floor.levelNumber + ')'
    };
    data["children"] = [];
    floor.things.forEach(function (thing) {
        data["children"].push(getThingData(thing));
    });
    return data;
}
/**
 * 建筑对象
 * @param {Object} thing - 物对象
 */
function getThingData(thing) {
    return {
        id: thing.id,
        checked: true,
        text: thing.type + ' (' + thing.name + ')'
    };
}
/**
 * Building内部建筑隐藏(无外立面不隐藏内部建筑)
 * @param {Object} building - 建筑对象集合
 */
function changeBuilding(building) {
    for (let i = 0; i < building.length; i++) {
        if (building[i].facades[0]) {
            building[i].floors.visible = false;
        }
    }
}

var campus;// 园区对象
 // 加载场景代码 
 var app = new THING.App({
     url: 'https://www.thingjs.com/static/models/factory',  // 场景地址
     background: '#000000',
     env: 'Seaside',
 });
 app.on('load', function (ev) {
     // 创建提示
     initThingJsTip("点击按钮，可获取园区中的建筑（buildings）、物体（things）、地面（ground），设置建筑外立面显示隐藏");
     createHtml();
     campus = app.query(".Campus")[0];  // 获取园区对象
     new THING.widget.Button("获取buildings", function () {
         // 初始化设置
         reset();
         var buildings = campus.buildings; // 获取园区下的所有建筑，返回为 Selector 结构
         buildings.forEach(function (item) {
             // 创建标注
             var ui = app.create({
                 type: 'UIAnchor',
                 parent: item,
                 element: createElement(item.id), // 此参数填写要添加的Dom元素
                 localPosition: [0, 1, 0],
                 pivot: [0.5, 1] //[0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
             });
             $('#' + item.id + ' .text').text(item.name);
         })
     })
     new THING.widget.Button("获取things", function () {
         // 初始化设置
         reset();
         // 获取园区下的所有 Thing 类物体，返回为 Selector 结构
         var things = campus.things;
         things.forEach(function (item) {
             // 创建标注
             var ui = app.create({
                 type: 'UIAnchor',
                 parent: item,
                 element: createElement(item.id), // 此参数填写要添加的Dom元素
                 localPosition: [0, 1, 0],
                 pivot: [0.5, 1] //[0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
             });
             $('#' + item.id + ' .text').text(item.name);
         })
     })
     new THING.widget.Button("获取ground", function () {
         // 初始化设置
         reset()
         var ground = campus.ground;  // 获取园区下的 ground
         // 创建标注
         var ui = app.create({
             type: 'UIAnchor',
             element: createElement(ground.id), // 此参数填写要添加的Dom元素
             position: [1.725, 0.02, 5.151],
             pivot: [0.5, 1] //[0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
         });
         $('#' + ground.id + ' .text').text('ground');
     })
     new THING.widget.Button("隐藏外立面", function () {
         // 初始化设置
         reset(true);
         var build = app.query('107')[0];  // 获取园区中的建筑
         if ($("input[value='隐藏外立面']").length) {
             $("input[value='隐藏外立面']").val('显示外立面');
             build.facade.visible = false;  // 隐藏外立面
             build.floors.visible = true;  // 显示楼层
         } else {
             $("input[value='显示外立面']").val('隐藏外立面');
             build.facade.visible = true;  // 显示外立面
             build.floors.visible = false;  // 隐藏楼层
         }
     })
     new THING.widget.Button("重置", function () {
         // 初始化设置
         reset();
     })
     /**
      * 恢复初始化
      */
     function reset(flag) {
         $(".marker").remove();  // 移除标注
         if (flag) return;
         $("input[value='显示外立面']").val('隐藏外立面');
         var build = app.query('107')[0];  // 获取园区中的建筑
         build.facade.visible = true;  // 显示外立面
         build.floors.visible = false;  // 隐藏楼层
         createHtml();
         // 创建提示
         initThingJsTip("点击按钮，可获取园区中的建筑（buildings）、物体（things）、地面（ground），设置建筑外立面显示隐藏");
     }
 })
 /**
  * 创建html
  */
 function createHtml() {
     var html =
         `<div id="board" class="marker" style="position: absolute;">
               <div class="text" style="color: #FF0000;font-size: 12px;text-shadow: white  0px 2px, white  2px 0px, white  -2px 0px, white  0px -2px, white  -1.4px -1.4px, white  1.4px 1.4px, white  1.4px -1.4px, white  -1.4px 1.4px;margin-bottom: 5px;">
               </div>
               <div class="picture" style="height: 30px;width: 30px;margin: auto;">
                   <img src="/guide/examples/images/navigation/pointer.png" style="height: 100%;width: 100%;">
               </div>
           </div>`;
     $('#div3d').append($(html));
 }
 /**
  * 创建元素
  */
 function createElement(id) {
     var srcElem = document.getElementById('board');
     var newElem = srcElem.cloneNode(true);
     newElem.style.display = "block";
     newElem.setAttribute("id", id);
     app.domElement.insertBefore(newElem, srcElem);
     return newElem;
 }

// 加载场景代码
var app = new THING.App({
    // 场景地址
    "url": "https://www.thingjs.com/./uploads/wechat/emhhbmd4aWFuZw==/scene/建筑测试03"
});
// 加载场景
app.on('load', function (ev) {
    var campus = ev.campus; // 获取园区对象
    var floor = app.query('.Floor')[0]; // 获取楼层对象
    app.level.change(floor); // 开启层级切换
    new THING.widget.Button('获取墙', getWall); // 获取楼层中的墙
    new THING.widget.Button('获取门', getDoor); // 获取楼层中的门
    new THING.widget.Button('获取 Thing', getThing); // 获取Thing类物体，包含门
    new THING.widget.Button('获取 Misc', getMisc); // 获取楼层中的misc类物体
    new THING.widget.Button('获取楼层地板', getFloor); // 获取楼层地板
    new THING.widget.Button('获取楼层屋顶', getFloorRoof); // 获取楼层屋顶  
    new THING.widget.Button('获取房间面积', getRoomArea); // 获取房间面积
    new THING.widget.Button('重置', init); // 恢复初始化设置
    $("input[type='button']").hide(); // 隐藏按钮
})
/**
 * 获取当前楼层的Thing类物体
 */
function getThing() {
    // 初始化设置
    init();
    initThingJsTip("搭建园区时，设置了 ID、name、自定义属性的模型，在 ThingJS 中均为 Thing 类物体");
    var floor = app.level.current; // 当前楼层
    var things = floor.things; // 楼层内Thing类物体
    things.forEach(function (item) {
        // 创建标注
        createUIAnchor('ui', item);
    })
}
/**
 * 获取当前楼层中的门
 */
function getDoor() {
    // 初始化设置
    init();
    initThingJsTip("获取楼层中的门。设置了 ID、name、自定义属性的门模型，才可以被获取");
    var floor = app.level.current; // 当前楼层
    var doors = floor.doors; // 楼层中的门
    doors.forEach(function (item) {
        // 创建标注
        createUIAnchor('ui', item);
    })
}
/**
 * 获取当前楼层中的墙
 */
function getWall() {
    // 初始化设置
    init();
    initThingJsTip("设置墙的颜色为黄色");
    var floor = app.level.current; // 当前楼层
    var wall = floor.wall; // 楼层中的墙
    wall.style.color = '#ffff00'; // 设置墙的颜色
}
/**
 * 获取当前楼层misc类物体
 * 楼层下，只有在CampusBuilder中编辑了UserID、Name或自定义属性的物体（摆放的模型），
 * 才能在 ThingJS 中创建为 Thing 对象，否则将合并到楼层的 misc 中，无法单独进行管理。
 */
function getMisc() {
    // 初始化设置
    init();
    initThingJsTip("园区搭建时，没有设置 ID、name、自定义属性的模型，都将合并到楼层的 Misc 中，无法单独进行管理");
    var floor = app.level.current; // 当前楼层
    var misc = floor.misc; // 楼层内misc类物体
    misc.style.outlineColor = '#0000ff'; // 设置misc类物体的颜色
}
/**
 * 获取当前楼层的地板
 */
function getFloor() {
    // 初始化设置
    init();
    initThingJsTip("楼层地板不包含本楼层下独立管理的房间地板");
    var floor = app.level.current; // 当前楼层
    var plan = floor.plan; // 楼层地板
    plan.style.color = '#ffff00'; // 设置地板颜色
    //添加标注
    createUIAnchor('text', plan, '楼层地板');
}
/**
 * 获取当前楼层的屋顶
 */
function getFloorRoof() {
    // 初始化设置
    init();
    initThingJsTip("楼层屋顶不包含本楼层下独立管理的房间屋顶");
    var floor = app.level.current; // 当前楼层
    var roof = floor.roof; // 楼层屋顶
    roof.style.opacity = 0.8; // 设置屋顶透明度
    roof.style.color = '#0000ff'; // 设置屋顶颜色
    roof.visible = true;
    //添加标注
    createUIAnchor('text', roof, '楼层屋顶');
}
/**
 * 获取楼层内房间面积
 */
function getRoomArea() {
    // 初始化设置
    init();
    var floor = app.level.current; // 当前楼层
    var textRegions = app.query('.TextRegion'); // 获取TextRegion类
    var rooms = floor.rooms; // 楼层的房间
    rooms.forEach(function (room) {
        room.roof.visible = true; // 显示房间屋顶
        room.roof.style.opacity = 0.8; // 设置透明度
        room.roof.style.color = '#0000ff'; // 设置颜色
        var area = room.area.toFixed(2); // 获取房间面积 保留小数点后两位
        //添加标注
        createUIAnchor('text', room, area + '平方米');
        initThingJsTip("展示房间面积");
    })
}
/**
 * 初始化设置
 */
function init() {
    var floor = app.level.current; // 当前楼层
    floor.wall.style.color = null; // 设置墙体颜色
    floor.misc.style.outlineColor = null; // 设置misc类物体颜色
    floor.plan.style.color = null; // 设置楼层地板颜色
    floor.roof.style.color = null; // 设置楼层屋顶颜色
    floor.roof.visible = false; // 设置楼层屋顶隐藏
    floor.rooms.forEach(function (room) {
        room.roof.visible = false; // 设置楼层房间隐藏
        room.roof.style.color = null; // 设置楼层房间屋顶颜色
        room.plan.style.color = null; // 设置楼层房间地板颜色
    })
    app.query('.TextRegion').destroyAll(); // 获取TextRegion类
    $(".marker").remove(); // 移除标注
    // 创建元素
    createHtml();
    initThingJsTip("点击左侧按钮，查看具体效果");
}
/**
 * 创建html
 */
function createHtml() {
    var html =
        `<div id="board" class="marker" style="position: absolute;">
                <div class="text" style="color: #FF0000;font-size: 12px;text-shadow: white  0px 2px, white  2px 0px, white  -2px 0px, white  0px -2px, white  -1.4px -1.4px, white  1.4px 1.4px, white  1.4px -1.4px, white  -1.4px 1.4px;margin-bottom: 5px;">
                </div>
                <div class="picture" style="height: 30px;width: 30px;margin: auto;">
                    <img src="/guide/examples/images/navigation/pointer.png" style="height: 100%;width: 100%;">
                </div>
            </div>`;
    $('#div3d').append($(html));
}
/**
 * 创建元素
 */
function createElement(id) {
    var srcElem = document.getElementById('board');
    var newElem = srcElem.cloneNode(true);
    newElem.style.display = "block";
    newElem.setAttribute("id", id);
    app.domElement.insertBefore(newElem, srcElem);
    return newElem;
}
/**
 * 生成一个新面板
 */
function createUIAnchor(type, obj, value) {
    if (type == 'ui') {
        // 创建UIAnchor
        var ui = app.create({
            type: 'UIAnchor',
            parent: obj,
            element: createElement(obj.id), // 此参数填写要添加的Dom元素
            localPosition: [0, 1, 0],
            pivot: [0.5, 1] //[0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
        });
        if (!value) value = obj.name;
        $('#' + obj.id + ' .text').text(value);
    } else if (type == 'text') {
        // 创建文本
        var areaTxt = app.create({
            type: 'TextRegion',
            id: 'areaTxt_' + obj.id,
            parent: obj,
            localPosition: [0, 3.8, 0],
            text: value,
            inheritStyle: false,
            style: {
                fontColor: '#ff0000',
                fontSize: 20, // 文本字号大小
            }
        });
        areaTxt.rotateX(-90); // 旋转文本
    }
}
// 监听进入楼层事件
app.on(THING.EventType.EnterLevel, '.Floor', function (ev) {
    init();
    if (ev.current.name == '办公楼一层') {
        $("input[type='button']").show();
    } else {
        $("input[type='button']").hide();
    }
}, '进入楼层显示面板')
// 监听退出楼层事件
app.on(THING.EventType.LeaveLevel, '.Floor', function (ev) {
    init();
    $("input[type='button']").hide();
}, '退出楼层隐藏面板')

/**
 * 说明：自定义层级切换效果
 * 功能：
 *      1.进入建筑层级摊开楼层
 *      2.进入楼层层级更换背景图
 *      3.双击物体，播放模型动画
 * 操作：点击按钮
 */
// 加载场景代码 
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/factory',  // 场景地址
    background: '#000000',
    skyBox: 'Night',
    env: 'Seaside',
});
// 初始化完成后开启场景层级
var campus;
app.on('load', function (ev) {
    campus = ev.campus;
    // 将层级切换到园区 开启场景层级
    app.level.change(ev.campus);
    initThingJsTip("本例程修改了原有进入层级的默认响应，自定义了新的层级响应。点击按钮，查看效果");
    new THING.widget.Button('修改层级飞行响应', setEnterFly);
    new THING.widget.Button('修改层级场景响应', setEnterLevel);
    new THING.widget.Button('修改层级背景', setEnterBack);
    new THING.widget.Button('重置', reset);
});
/**
 * 修改默认的层级飞行响应
 * 双击进入建筑层级，展开楼层
 * 退出建筑关闭摊开的楼层
 */
function setEnterFly() {
    // 重置
    reset();
    initThingJsTip("修改默认进入层级飞行响应，双击进入建筑层级，展开楼层");
    //  暂停默认退出园区行为
    app.pauseEvent(THING.EventType.LeaveLevel, '.Campus', THING.EventTag.LevelSceneOperations);
    // 进入建筑摊开楼层
    app.on(THING.EventType.EnterLevel, '.Building', function (ev) {
        var previous = ev.previous;  // 上一层级
        ev.current.expandFloors({
            'time': 1000,
            'complete': function () {
                console.log('ExpandFloor complete ');
            }
        });
    }, 'customEnterBuildingOperations');
    // 进入建筑保留天空盒
    app.pauseEvent(THING.EventType.EnterLevel, '.Building', THING.EventTag.LevelSetBackground);
    //  退出建筑关闭摊开的楼层
    app.on(THING.EventType.LeaveLevel, '.Building', function (ev) {
        var current = ev.current;  // 当前层级
        ev.object.unexpandFloors({
            'time': 500,
            'complete': function () {
                console.log('Unexpand complete ');
            }
        });
    }, 'customLeaveBuildingOperations');
}
/**
 * 修改进入层级场景响应
 * @property {Object} ev 进入物体层级的辅助数据
 * @property {THING.BaseObject} ev.object 当前层级
 * @property {THING.BaseObject} ev.current 当前层级
 * @property {THING.BaseObject} ev.previous 上一层级
 */
function setEnterLevel() {
    // 重置
    reset();
    initThingJsTip("修改默认进入层级场景响应，双击飞到物体，其他物体渐隐（若物体存在动画，则播放动画）");
    // 修改进入层级场景响应
    app.on(THING.EventType.EnterLevel, '.Thing', function (ev) {
        var object = ev.object;
        // 其他物体渐隐
        var things = object.brothers.query('.Thing');
        things.fadeOut();
        // 尝试播放动画
        if (object.animationNames.length) {
            object.playAnimation({
                name: object.animationNames[0],
            });
        }
    }, 'customEnterThingOperations');
    // 停止进入物体层级的默认行为
    app.pauseEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelSceneOperations);
    // 修改退出层级场景响应
    app.on(THING.EventType.LeaveLevel, '.Thing', function (ev) {
        var object = ev.object;
        // 其他物体渐现
        var things = object.brothers.query('.Thing');
        things.fadeIn();
        // 反播动画
        if (object.animationNames.length) {
            object.playAnimation({
                name: object.animationNames[0],
                reverse: true
            });
        }
    }, 'customLeaveThingOperations');
}
/**
 * 进入楼层设置背景
 * 进入楼层层级，修改背景
 */
function setEnterBack() {
    // 重置
    reset();
    initThingJsTip("修改默认进入层级背景，进入楼层层级，修改背景");
    // 进入楼层设置背景
    app.on(THING.EventType.EnterLevel, '.Floor', function (ev) {
        var previous = ev.previous;  // 上一层级
        // 从建筑进入楼层时
        if (previous instanceof THING.Building) {
            app.background = '/uploads/wechat/emhhbmd4aWFuZw==/file/img/bg_grid.png';
        }
    }, 'setFloorBackground');
    // 停止进入楼层层级的默认行为
    app.pauseEvent(THING.EventType.EnterLevel, '.Floor', THING.EventTag.LevelSetBackground);
    // 退出楼层设置背景
    app.on(THING.EventType.LeaveLevel, '.Floor', function (ev) {
        var current = ev.current;  // 当前层级
        // 从楼层退出到建筑时
        if (current instanceof THING.Building) {
            app.background = null;
            app.skyBox = "Night";
        }
    }, 'customLeaveFloorOperations');
}
/**
 * 重置
 * app.resumeEvent 暂停事件
 * app.off 卸载事件
 */
function reset() {
    // 创建提示
    initThingJsTip('本例程修改了原有进入层级的默认响应，自定义了新的层级响应。点击按钮，查看效果');
    app.resumeEvent(THING.EventType.LeaveLevel, '.Campus', THING.EventTag.LevelSceneOperations);
    app.resumeEvent(THING.EventType.EnterLevel, '.Building', THING.EventTag.LevelSetBackground);
    app.resumeEvent(THING.EventType.EnterLevel, '.Floor', THING.EventTag.LevelSetBackground);
    app.resumeEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelSceneOperations);
    app.off(THING.EventType.EnterLevel, '.Building', 'customEnterBuildingOperations');
    app.off(THING.EventType.LeaveLevel, '.Building', 'customLeaveBuildingOperations');
    app.off(THING.EventType.EnterLevel, '.Floor', 'setFloorBackground');
    app.off(THING.EventType.LeaveLevel, '.Floor', 'customLeaveFloorOperations');
    app.off(THING.EventType.EnterLevel, '.Thing', 'customEnterThingOperations');
    app.off(THING.EventType.LeaveLevel, '.Thing', 'customLeaveThingOperations');
    var curLevel = app.level.current;  // 当前层级
    app.skyBox = 'Night';  // 设置天空盒
    if (curLevel instanceof THING.Building) {
        curLevel.unexpandFloors({
            'time': 500,
            'complete': function () {
                console.log('Unexpand complete ');
            }
        });
    }
    app.level.change(campus);
}

// 加载场景代码 
var app = new THING.App({ 
   url: '/api/scene/a5bb1ed8259a2b023ae317d3'
});
// 默认创建一个长宽高为 1m ,轴心点在中心的正方体
var box= app.create({
  type:'Box',
  position: [0, 0, 0] //世界坐标系下的位置
});
// 创建正方体参数设置
var box = app.create({
  type: 'Box',
  width: 10,// 宽度
  height: 10,// 高度
  depth: 10,// 深度
  center: 'Bottom',// 轴心
  //widthSegments: 1,// 宽度上的节数
  //heightSegments: 1,// 高度上的节数
  //depthSegments: 1,// 深度上的节数
  position:[0,0,0]// 世界坐标系下的位置
});
// 创建提示
initThingJsTip(`这是一个 Box 的示例`);

// 使用十六进制颜色
obj.style.color = '#ff0000';
// 使用 rgb 颜色
obj.style.color = 'rgb(255,0,0)';
// 取消颜色
obj.style.color = null;

obj.style.emissive = '#ffff00';

obj.style.emissiveScrollImage = 'https://www.thingjs.com/static/images/avatar.png';

obj.style.environmentImage = 'BlueSky';

obj.style.highlight = '#ffff00';

obj.style.highlightIntensity = 0.8;

// 使用图片路径
obj.style.image = 'https://www.thingjs.com/static/images/avatar.png';

obj.style.opacity = 0.8;

// 使用十六进制颜色
obj.style.outlineColor = '#ff0000';
// 使用 rgb 颜色
obj.style.outlineColor = 'rgb(255,0,0)';
// 取消勾边颜色
obj.style.outlineColor = null;

// 加载场景代码 
var app = new THING.App({ 
   url: '/api/scene/a5bb1ed8259a2b023ae317d3'
});
// 默认创建一个长宽高为 1m ,轴心点在中心的正方体
var box= app.create({
  type:'Box',
  position: [0, 0, 0] //世界坐标系下的位置
});
// 创建正方体参数设置
var box = app.create({
  type: 'Box',
  width: 10,// 宽度
  height: 10,// 高度
  depth: 10,// 深度
  center: 'Bottom',// 轴心
  position:[0,0,0]// 世界坐标系下的位置
});
// 先获取上面的盒子对象
var o = app.query(".Box");
// 指定其颜色
o.style.color = "#F400EE";
// 指定其透明度
o.style.opacity = 0.6;
// 开启线框模式
o.style.wireframe = true;

// 不添加任何条件，鼠标点击即可触发
app.on("click", function(ev){
  console.log("clicked!");
})
// 添加指定条件，这里表示只有 Thing 类型物体才会触发
app.on("click", ".Thing", function(ev){
  console.log(ev.object.id+" clicked!");
})
// 添加多重条件，对建筑、楼层触发点击事件
app.on("click", ".Building || .Floor",function(ev){
  console.log("You clicked "+ev.object.id);
})

// 当这个对象被点击，即可触发
obj.on("click", function(ev){
  console.log(ev.object.name);
});
// 添加特定条件，当这个对象为 marker 类型，或带有 marker 类型的子孙，即可触发
obj.on("click", ".Marker", function(ev){
  console.log(ev.object.name);
});
// 查询到 obj 下的所有 marker 物体（集合），注册 click 事件
obj.query(".Marker").on("click", function(ev){
  console.log(ev.object.name);
})

THING.EventType

{
   "Complete": "complete",
   "Resize": "resize",
   "Update": "update",
   "Progress": "progress",
   "Load": "load",
   "Unload": "unload",
   "Click": "click",
   "DBLClick": "dblclick",
   "SingleClick": "singleclick",
   "MouseUp": "mouseup",
   "MouseDown": "mousedown",
   "MouseMove": "mousemove",
   "MouseWheel": "mousewheel",
   "MouseEnter": "mouseenter",
   "MouseOver": "mouseover",
   "MouseLeave": "mouseleave",
   "DragStart": "dragstart",
   "Drag": "drag",
   "DragEnd": "dragend",
   "KeyDown": "keydown",
   "KeyPress": "keypress",
   "KeyUp": "keyup",
   "CameraChangeStart": "camerachangestart",
   "CameraChangeEnd": "camerachangeend",
   "CameraChange": "camerachange",
   "CameraZoom": "camerazoom",
   "CameraViewChange": "cameraviewchange",
   "Create": "create",
   "Destroy": "destroy",
   "Expand": "expand",
   "Unexpand": "unexpand",
   "Select": "select",
   "Deselect": "deselect",
   "SelectionChange": "selectionchange",
   "LevelChange": "levelchange",
   "EnterLevel": "enterLevel",
   "LeaveLevel": "leaveLevel",
   "LevelFlyEnd": "levelflyend",
   "AppComplete": "complete",
   "LoadCampusProgress": "progress",
   "LoadCampus": "load",
   "UnloadCampus": "unload",
   "PickObject": "pick",
   "Dragging": "drag",
   "CreateObject": "create",
   "DestroyObject": "destroy",
   "ExpandBuilding": "expand",
   "UnexpandBuilding": "unexpand",
   "SelectObject": "select",
   "DeselectObject": "deselect",
   "ObjectSelectionChanged": "selectionchange",
   "PickedObjectChanged": "pickchange",
   "BeforeLevelChange": "beforelevelchange",
   "Pick": "pick",
   "Unpick": "unpick",
   "PickChange": "pickchange",
   "AreaPickStart": "areapickstart",
   "AreaPicking": "areapicking",
   "AreaPickEnd": "areapickend",
   "BeforeLoad": "beforeload"
}

// 注册事件
app.on("click", ".Building", function(event){
  console.log("clicked!")
},"tag1");
// 暂停事件
app.pauseEvent("click", ".Building", "tag1");
// 恢复事件
app.resumeEvent("click", ".Building", "tag1");

// 注册事件
app.on("click", function(event){
  console.log("clicked!")
});
// 卸载注册的事件
app.off("click");
// 带 tag 的事件
app.on("click", ".Building", function(event){
  console.log("clicked!")
});
// 卸载所有 Building 的点击事件
app.off("click", ".Building");
// 只卸载带有该 tag 名的 Building 的点击事件
app.off("click", ".Building", "tagName");