说到做一个三维实景应用,尤其是开发工程师,对自己使用的各种工具肯定要了如指掌才行,大家用的各种工具也各不相同,接下来我们来了解各种三维实景制作工具撒~
ThingJS 基于 HTML5 和 WebGL 技术,可方便地在主流浏览器上进行浏览和调试,支持 PC 和移动设备。ThingJS为三维实景可视化应用提供了简单、丰富的功能,只需要具有基本的 Javascript 开发经验即可上手。
ThingJS提供了场景加载、分层级浏览,对象访问、搜索、以及对象的多种控制方式和丰富的效果展示,可以通过绑定事件进行各种交互操作,还提供了摄像机视角控制、点线面效果、温湿度云图、界面数据展示、粒子效果等各种可视化功能。
ThingJS提供如下相关组件和工具供用户使用:
CityBuilder:聚焦城市的 3D 地图搭建工具,打造你的 3D 城市地图。
CamBuilder:简单、好用、免费的 三维实景搭建工具。
ThingPano:全景图制作工具,轻松制作并开发全景图应用,实现 3D 宏观场景和全景微观场景的无缝融合。
ThingDepot:上万种模型,数十个行业,自主挑选,一次制作多次复用。
引用同域界面js
/**
* 说明:iframe引用上传到网站的 同域 的页面 函数传参相互调用
* 操作:
* 3D场景中单击物体 将物体name传给页面
* 页面中单击按钮 进入相应物体的层级,进入层级后 右键返回上一级
* 教程:ThingJS教程——>界面——>iframe引用页面
* 难度:★★☆☆☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址
});
app.on('load', function(ev) {
app.level.change(ev.campus);
})
// 界面组件
var panel = new THING.widget.Panel();
// 创建数据对象
var dataObj = {
iframe: '/uploads/wechat/emhhbmd4aWFuZw==/file/iframe01/index.html '
};
// 上传到网站的页面 与 网站 同域
// https://www.thingjs.com/uploads/wechat/emhhbmd4aWFuZw==/file/iframe01/index.html
var iframe = panel.addIframe(dataObj, 'iframe').caption('iframe');
iframe.setHeight('100px');
var iframeDom = iframe.domElement.getElementsByTagName('iframe')[0];
// 设置iframe滚动条
// iframeDom.scrolling = "auto";
app.on(THING.EventType.SingleClick, function (ev) {
if (ev.picked && ev.object) {
var obj = ev.object;
var name = obj.name;
// 调用同域的iframe页面内的方法 ChangeText
iframeDom.contentWindow.changeText(name);
}
})
// 点击iframe页面中的按钮 调用此函数
function changeLevel(value) {
var obj = app.query(value)[0];
if (obj) {
app.level.change(obj);
}
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。