很简单，我们通过在线开发平台thingjs来阐述！ 前提你要掌握js，假设你掌握了js，ThingJS 使用当今最热门的 Javascript语言进行开发。
不仅可以针对单栋或多栋建筑组成的园区场景进行可视化开发，搭载丰富插件后，也可以针对地图级别场景进行开发。广泛应用于数据中心、仓储、学校、医院、安防、预案等多种领域。
物联网分为感知层、网络层、应用层。应用层涉及到 3D 界面的开发，对大部分企业来说都有一定挑战。ThingJS 可以极大降低 3D界面开发的成本。
ThingJS 基于 HTML5 和 webgl技术，可方便地在主流浏览器上进行浏览和调试，支持 PC 和移动设备。ThingJS为可视化应用提供了简单、丰富的功能，只需要具有基本的 Javascript 开发经验即可上手。
ThingJS提供了场景加载、分层级浏览，对象访问、搜索、以及对象的多种控制方式和丰富的效果展示，可以通过绑定事件进行各种交互操作，还提供了摄像机视角控制、点线面效果、温湿度云图、界面数据展示、粒子效果等各种可视化功能。
分享内嵌页面代码
/**
* 说明：WebView页面
* 文档:ThingJS教程——>界面——>3D界面
* 难度：★★☆☆☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});
// 加载场景后执行
app.on('load', function () {
// 设置摄像机位置和目标点
app.camera.position = [20.325589006298948, 25.47555854790737, 23.598673245623264];
app.camera.target = [2.3860871693835133, -0.2973609127471111, -5.171065071269126];
var webView01 = app.create({
type: 'WebView',
url: 'https://cn.bing.com/',
position: [10, 13, -5],
width: 1920 * 0.01, // 3D 中实际宽度 单位 米
height: 1080 * 0.01, // 3D 中实际高度 单位 米
domWidth: 1920, // 页面宽度 单位 px
domHeight: 1080// 页面高度 单位 px
});
var webView02 = app.create({
type: 'WebView',
url: 'https://www.thingjs.com',
position: [10, 0.5, 5],
width: 1920 * 0.01, // 3D 中实际宽度 单位 米
height: 1080 * 0.01, // 3D 中实际高度 单位 米
domWidth: 1920, // 页面高度 单位 px
domHeight: 1080 // 页面高度 单位 px
});
webView02.rotateX(-90);
// 设置页面不可拾取交互
webView02.pickable = false;
// 以小车为父物体创建 WebView
var car01 = app.query('car01')[0];
var webView03 = app.create({
type: 'WebView',
url: 'https://www.thingjs.com/static/pages/page02/index.html?name=' car01.name,
parent: car01, // 父物体
localPosition: [0, 3, -1], // 父物体坐标系下相对坐标位置
width: 462 * 0.008, // 3D 中实际宽度 单位 米
height: 296 * 0.008, // 3D 中实际高度 单位 米
domWidth: 462, // 页面宽度 单位 px
domHeight: 296 // 页面高度 单位 px
});
webView03.rotateX(-30);
// 设置页面不可拾取交互
webView03.pickable = false;
new THING.widget.Button('切换页面', function () {
webView01.url = 'https://www.thingjs.com/guide/cn/tutorial_Introduce/index.html'
})
});
