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;
}
