WELCOME TO BIG DATA VISUALIZATION

新闻中心 

最新的一体化系统新闻资讯 时刻在线 持续服务
CRAFTSMANSHIP TO
CREATE A “SAID” WORKS

使用我搭世界SDK创建属于你的一个3D应用

发布于 2022年09月21日

什么是MJGL.js?

 

MJGL是基于HTML5的3D引擎,可以通过利用MJGL直接在网页上开发3D应用。

 

由于WebGL定义的接口非常底层,且难于理解,需要实现一个功能可能需要用到几个乃至十几个API,而且在浏览器中直接写WebGL的代码,浏览器是无法识别到你写的内容的。MJGL.js则把WebGL的底层接口进行二次封装,我们通过使用少量的代码做到更多的事,实现”Do Less Get More”,并且浏览器可以识别出我们写的代码是什么,是干什么用的,然后把效果呈现出来给我们看,我们进而可以直观的查看到WebGL效果,如果出现问题能够及时的发现并修改。

 

 

应用于什么场景?

 

MJGL的核心特点就是:3D、Web、无插件、跨平台,适合创建轻量的跨平台的应用网页。

 

 

可应用在以下场景:

 

▶ 数据中心(资产管理、配线管理、动力环境监控等)

 

▶ 产业园区(楼宇自控、安防管理、停车场管理等)

 

▶ 应急消防(灾害环境可视化、预案制作、实战推演、案例复盘等)

 

▶ 教育行业(智慧教室、校园安全、地下管网、无线AP覆盖等)

 

▶ 医疗行业(设备资源统一管理、数据集成管理、医院业务管理等)

 

▶ 农业解决(生长模拟、环境模拟等)

 

▶ 工业管理(MES系统、生产线可视化、仓储管理等)

 

▶ 交通行业(能耗监测、人流监测、资产管理等)

 

 

适用于什么开发者?

使用MJGL的要求不高,可能因为是”3D”技术,在字面上就劝退部分的开发者。

MJGL是基于HTML5的,所以开发者必须要熟悉JavaScript语言,JavaScript是弱类型语言,没有Java和C语言那些强类型语言所要求的多,所以在掌握难度上不会那么高,那么如果你熟悉和理解JS中的对象、Function和prototype等语言机理,就能更快上手的使用MJGL。当然我们也会提供完善的使用文档,令开发者快速的上手。

 

 

开发前的软硬件设施准备

三维应用本项目使用的是基于WEBGL引擎开发的一个3D项目,为了最终能有一个良好的运行效果,那么对软硬件的配置是有要求的。

 

硬件方面:所有的3D技术对硬件要求都较高,MJGL作为一个3D引擎也不例外。3D程序对硬件的要求体现在:显卡、CPU、内存几个方面。虽然很难用硬性指标来描述和约束硬件的具体要求,不过您还是可以参考以下几条主要的原则:

 

显卡:最好是具有独立显卡的电脑,显存容量越大越好。

 

CPU:越快越好,主流的i5、i7处理器都可以很好的支撑3D应用。

 

内存:内存和显存都是越多越好,1G的显存和2G的内存是需要的,2G的显存和4G的内存则可以更流畅的运行3D程序。

 

软件方面:主要是操作系统和浏览器,Mac OS和Win7及以上版本都可以很好的支持WebGL,如果您的机器依旧使用Windows XP操作系统,估计硬件配置也不会很好,不推荐在这样的机器上运行3D程序。

 

浏览器方面:各种主流的新版浏览器基本都可以很好的支持webGL。包括Windows IE11及以上、Windows Edge、Chrome、Safari、FireFox、Opera等。

 

总结为一句话:IE必须11以上,Chrome最佳,其他没问题。

 

如果还不能确认您的浏览器是否支持webGL,可以直接用浏览器访问页面http://webglreport.com/

 

如果支持会提醒你这一句话 ✓ This browser supports WebGL 1

 

1

 

 

 

创建第一个3D程序

 

首先,在http://h5.wodashijie.com/登录并编辑你的场景。可以参考我们公众号已发布的文章——《如何帮助零基础的客户快速搭建三维场景》,编辑一个你需要的场景,联系我们获取开发所需的SDK开发软件资源。如下图:

 

2

 

 

这次的演示项目是基于Vue-cli脚手架进行开发。

 

第一步:在场景搭建完成后和获取到开发资源后,新建个Vue项目,在index.html中引入需要用到的SKD资源。

 

3

 

第二步:在一个路由页面创建一个用于装载3D场景的盒子容器,就按照平常使用canvas的步骤一样,设置宽高即可。

 

4

 

第三步:资源引入和容器准备好以后,就是开始通过提供的SDK方法初始化容器并加载出来,在load函数里面有两个参数,是两个回调函数,一个是在加载的过程中使用,可以检测场景的加载进度,可以配合进度条样式使用,第二个回调函数是当场景加载完以后加载使用的。

 

5

 

第四步:前面的步骤的完成了以后就是运行起来,打开浏览器,查看3D场景效果的时候了。

 

 

 

数据中心 建模
预约产品DEMO演示
填写即可获得免费服务和资料下载/工作人员基于您的需求远程 演示数字孪生解决方案

姓名



公司名称



工作邮箱



手机号



所在城市



我想要


 数据中心

 数据可视化大屏

 我搭世界

 成为合作伙伴



其他需求