请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 1523|回复: 0

[分享] Sketchfab模子在ThingJS上的利用

[复制链接]
avatar

10

主题

15

帖子

0

积分

游客

积分
0
ico_lz  楼主| 发表于 2019-9-10 10:05:24 | 显示全部楼层 |阅读模式

克日,需要在网页上做一个纯H5的、基于三维场景的利用,网上搜了下,发现ThingJS平台(https://www.thingjs.com/)是个不错的挑选......

ThingJS 是一个物联网3D可视化PaaS平台,基于WebGL,兼容各类阅读器及移动装备,零门坎、高效力、低本钱开辟各类3D利用。开辟看起来也挺简单,网站还供给了三维场景搭建工具,叫模模搭的,很方便。

不外呢,在3D场景构建进程中,总是需要各类3D模子,虽然ThingJS网站供给了很多模子,但总还有不够用的。又搜了一下,发现Sketchfab网站( https://sketchfab.com/ )是个不错的挑选,能免费下载的似乎有10多万呢,而且该网站供给gltf模子格式下载,是纯H5的,恰好能在ThingJS网站利用,因而尝试了一下,公然可用!而且结果不错!进程也很简单,记录以下:

下载模子

首先,在Sketchfab网站上找一个需要的模子资本。

Sketchfab模子在ThingJS上的利用

找到一个汽车模子,以下图位置,点击下载gltf格式。(来历:https://sketchfab.com/3d-models/triumph-tr4-0e249864d1df49818ef2c03c336a934c 作者:freeReef)

Sketchfab模子在ThingJS上的利用

留意:下载模子时,需认真阅读利用说明,这里有作品的版权说明。

Sketchfab模子在ThingJS上的利用

Creative Commons

Creative Commons,简称CC,中国大陆正式称号为常识同享,台湾正式称号为创用CC。是一个非营利构造,也是一种创作的授权方式。此构造的首要主旨是增加创意作品的畅通可及性,作为其他人据以创作及同享的根本,并寻觅适当的法令以确保上述理念。

Creative Commons(常识同享)是一个相对宽松的版权协议。它只保存了几种权利(some rights reserved)。利用者可以明白晓得一切者的权利,不轻易加害对方的版权,作品可以获得有用传布。

作为作者,你可以挑选以下1~4种权利组合:

1. 签名(Attribution,简写为BY):必须提到原作者。

2. 非贸易用处(Noncommercial,简写为NC):不得用于盈利性目标。

3. 制止归纳(No Derivative Works,简写为ND):不得点窜原作品, 不得再创作。

4. 不异方式同享(Share Alike,简写为SA):答应点窜原作品,但必须利用不异的答应证公布。

下载的gltf模子资本是一个zip紧缩包,把它解压到文件夹里,以下图,是这个汽车模子的文件目录结构。

Sketchfab模子在ThingJS上的利用


上传模子到ThingJS网站

接下来,让我们把模子上传到ThingJS 网站上。在控制台里,找到项目资本,并挑选一个我们要停止开辟的项目,起头上传适才的模子资本文件夹。

Sketchfab模子在ThingJS上的利用


开辟利用

上传成功后,我们便可以停止开辟了。进入到在线开辟页面,翻开项目,我们可以看到,适才上传的模子资本已经出现在了该项目下。Sketchfab模子在ThingJS上的利用

ThingJS在线开辟供给很是便利的代码块工具,首先我们需要引入模子,可以在这里间接点击天生代码块,在模子地址处,点击左侧gltf文件,即可天生模子援用地址,履行后便可以看到结果了。

Sketchfab模子在ThingJS上的利用

Sketchfab模子在ThingJS上的利用Sketchfab模子在ThingJS上的利用

接下来,我们可以对模子停止开辟利用,这里将模子加载到ThingJS官方示例场景中,并让小车移动起来。

Sketchfab模子在ThingJS上的利用

示例代码

复制代码到ThingJS平台,即可预览结果。

  1. /**
  2. * 说明:利用上传的gltf模子停止利用开辟
  3. * 留意:下载他人模子时需仔细阅读利用说明,庇护作者版权,
  4. * 此示例中的模子来历 https://sketchfab.com/3d-models/triumph-tr4-0e249864d1df49818ef2c03c336a934c
  5. * 操纵:点击按钮
  6. * 难度:★★★☆☆
  7. */
  8. // 建立App
  9. var app = new THING.App({
  10. url: "models/storehouse" ,
  11. skyBox: 'White'
  12. });
  13. app.on('load',function(){
  14. // 设备摄像机位置和方针点
  15. app.camera.position = [22.936453704722485, 18.04447171101539, 17.25607980689213];
  16. app.camera.target = [4.691186527881011, -0.8306817706834637, 4.836893685611984];
  17. // 建立Thing
  18. var car = app.create({
  19. type: 'Thing',
  20. name: 'triumph',
  21. // 上传的gltf模子地址 (来历:https://sketchfab.com/3d-models/triumph-tr4-0e249864d1df49818ef2c03c336a934c 作者:freeReef)
  22. url: '/uploads/wechat/oLX7p0099om8KZbI6F96lQK_40l0/file/%E6%96%B0%E5%BB%BA%E9%A1%B9%E7%9B%AE1/triumph/scene.gltf',
  23. position: [ 0, 0.85, 0], // 模子位置
  24. scale: [0.35, 0.35, 0.35],// 设备模子缩放
  25. complete: function () {
  26. console.log('thing created: ' + this.id);
  27. }
  28. });
  29. // 建立按钮
  30. new THING.widget.Button('方形途径', function () {
  31. // 天下坐标系下坐标点组成的数组 关于坐标的获得 可操纵「工具」——>「拾取场景坐标」
  32. var path = [[0, 0.85, 0],[ 11.556, 0.85, 1.011], [ 11.556, 0.85, 14.111]];
  33. car.movePath({
  34. orientToPath: true, // 物体移动时沿向途径偏向
  35. path: path, // 途径坐标点数组
  36. time: 5 * 1000, // 途径总时候 毫秒
  37. delayTime: 1000, // 延时 1s 履行
  38. lerpType: null, // 插值范例(默以为线性插值)此处设备为不插值
  39. // 仅当无循环时 有回调函数
  40. complete: function (ev) {
  41. console.log(ev.object.name + "移动竣事")
  42. }
  43. });
  44. })
  45. new THING.widget.Button('停止移动', function () {
  46. car.stopMoving();
  47. });
  48. }
复制代码

版权声明:本文为CSDN博主「Fov陈珏」的原创文章,遵守 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/lemonchenjue/article/details/95640777


回复

使用道具 举报

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

本版积分规则