分享
查看: 1796|回复: 0

[分享] 3D开发是一个生态,ThingJS支持js,css,json,html外部资源引用

[复制链接]

3D开发是一个生态,ThingJS支持js,css,json,html外部资源引用

发表于 2020-9-22 12:16:00 来自 分享 阅读模式 倒序浏览
zzv_icon1796 zzr_icon0 查看全部

JavaScript是一种编程语言,它被广泛用来实现web站点和应用中的交互效果。ThingJS为3D可视化提供了161种简单开发示例,是js工程师的项目开发天堂!

HTML绘制平面图形可以采用canvas标签,但是功能上只能呈现2D图形,想要呈现3D图像需要特殊上下文,于是引入了webGL技术。如果想看它的场景演示,可以访问谷歌团队Data Arts出品的基于webGL的3D场景库,前端技术圈也视它为一个蓝海技术,3D开发应用普及指日可待。

国内的物联网可视化技术厂商ThingJS纯JS语法开发,3D效果也不输于原生应用,一切源于谷歌浏览器对webgl技术的支持。从开发生态的角度,webGL技术可以调用显卡、调用麦克风、调用摄像头等一切能用的硬件去提升服务质量,同时也支持引用js脚本和css演示,让你的3D开发效果更加有特色。


**官方如何引入外部资源呢?注意在平台新建或者上传文件仅允许js, css, html, json格式。**

我们默认js脚本和css样式会带上时间戳,且按urls数组中的顺序加载,浏览器会缓存之前的js,css的版本,我们更新了js,css文件后,浏览器不会更新。所以我们在引入相关css、js文件时使用时间戳,能够让浏览器加载我们的最新版本。如下所示。


  1. THING.Utils.dynamicLoad([
  2. '/static/vendor/twitter-bootstrap/3.3.7/css/bootstrap.min.css',
  3. '/static/vendor/twitter-bootstrap/3.3.7/js/bootstrap.min.js',
  4. '/static/vendor/moment/moment.js'],
  5. function () {
复制代码


twitter-bootstrap, moment均为外部资源,因网络原因拷贝到了thingjs网站目录。

这样在平台上引用,开发不因为访问不到资源或者访问报错而拖延,所以我们支持css库,JS库打包并提供官方文件夹储存资源,确保稳定,也方便用户无论何时何地都可开发。

ThingJS官方平台支持外部资源,可操作js, css文件新建或者icon、jpg、png、gif、js、css、html、json、ttf、woff、gltf、rvt、ifc、mp3格式的文件上传。

完整运行代码示例如下。

  1. THING.Utils.dynamicLoad([
  2. '/static/vendor/twitter-bootstrap/3.3.7/css/bootstrap.min.css',
  3. '/static/vendor/twitter-bootstrap/3.3.7/js/bootstrap.min.js',
  4. '/static/vendor/moment/moment.js'],
  5. function () {
  6. // 创建App
  7. var app = new THING.App({
  8. url: 'https://www.thingjs.com/static/models/storehouse'
  9. });
  10. // 加载场景后执行
  11. app.on('load', function (ev) {
  12. var btn = createButton();
  13. btn.on('click', function () {
  14. // 使用 moment 库获取当前时间
  15. var now = moment().format('YYYY-MM-DD HH:mm:ss');
  16. console.log(now);
  17. })
  18. });
  19. })
  20. function createButton() {
  21. // 使用 bootstrap 样式
  22. var template =
  23. <button class="btn btn-default" type="button" style="position:absolute;left:20px;top:20px;z-index:2">当前时间</button>
  24. var btn = $('#div2d').append($(template));
  25. return btn;
  26. }
复制代码


物是需要被看见的,它不同于意识,人看见了物,才会更好地连接和管理。ThingJS让仿真图像更加逼真!


avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t