3D可视化应用范围有多大一看便知！

3D可视化应用范围有多广你一定不知道，社区、医院、电力、校园、安防、消防、粮仓、煤矿、工厂、城市等等，都可以制作可视化场景以便更好应用起来。3D可视化场景制作出来如何让它“活动起来”？这就需要thingjs在线开发平台的各种交互事件，行走、飞行、跳跃、喷水、下雨等等你能想到的事件都可以通过快捷代码来实现。最重要的一点，前端工程师一个星期就能活学活用啦~只要掌握js，了解webgl就可以和实施人员一起搞定3D可视化应用啦！

thingjs物体顶牌.js

/**

* 说明：用快捷界面库 给物体添加UIAnchor

* 教程：ThingJS教程——>界面——>2D html界面 及 快捷界面库

* 难度：★★☆☆☆

*/

var app = new THING.App({

    url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址

});

app.on('load', function () {

    var car = app.query('car01')[0];

    car.style.color = 'rgb(255,0,0)';

    // 用快捷界面库 给物体添加UIAnchor

    var uiAnchor = createUIAnchor(car);

    new THING.widget.Button('显示/隐藏', function () {

        // 显示/隐藏 uiAnchor

        uiAnchor.visible = !uiAnchor.visible;

    })

})

// 创建UIAnchor

function createUIAnchor(obj) {

    // 创建widget (绑定数据用)

    var panel = new THING.widget.Panel({

        // 设置面板宽度

        width: '150px',

        // cornerType 角标样式

        // 没有角标 none ，没有线的角标 noline ，折线角标 polyline

        cornerType: 'polyline'

    })

    // 绑定物体身上相应的属性数据

    panel.addString(obj, 'name').caption('名称');

    panel.addString(obj.userData, 'power').caption('马力');

    // 创建UIAnchor面板

    var uiAnchor = app.create({

        // 类型

        type: 'UIAnchor',

        // 父节点设置

        parent: obj,

        // 要绑定的页面的 element 对象

        element: panel.domElement,

        // 设置 localPosition 为 [0, 0, 0]

        localPosition: [0, 0, 0],

        // 指定页面的哪个点放到localPosition位置上(百分比)

        pivot: [-0.2, 1.5]

    });

    return uiAnchor;

}