请选择 进入手机版 | 继续访问电脑版
分享
查看: 2025|回复: 0

[分享] 3D建模基础之初识ThingJS“在线开发”

[复制链接]

3D建模基础之初识ThingJS“在线开发”

发表于 2019-9-16 17:30:06 来自 分享 阅读模式 倒序浏览
zzv_icon2025 zzr_icon0 查看全部
1.html:62

ThingJS 是物联网可视化开发平台,帮助物联网开发商轻松集成 3D 可视化界面。ThingJS 名称源于 物联网Internet of Things (IoT)中的 Thing (物),ThingJS 使用当今最热门的 Javascript 语言进行开发。不仅可以针对单栋或多栋建筑组成的园区场景进行可视化开发,搭载丰富插件后,也可以针对地图级别场景进行开发。广泛应用于数据中心、仓储、学校、医院、安防、预案等多种领域。

当我们选择使用ThingJS的时候,我们就相当于选择了一种简单、便捷、门槛低的“工具”,使用ThingJS一般分为四个大块:

1.场景搭建;

2.应用开发;

3.数据对接;

4.项目发布;

场景搭建这个我们已经有了一定的了解,并且也搭建了一个房屋场景,可以说我们已经完成了第一步:场景搭建,现在我们需要的是完成第二步,应用开发。


应用开发

应用开发需要我们有一定的JavaScript基础,同时也得了解ThingJS封装的一些简单的功能和API,现在,就让我们一起了解应用开发的步骤,学习和使用ThingJS来进行在线开发吧!

“在线开发”是ThingJS网站中的在线编辑器,提供了开发3D可视化场景的环境,同时也封装了大量的常用方法,可以让我们直接找到我们需要的方法而不必去创造方法,同时官方示例也提供了大量的例子让我们可以从零开始学习。注意:用户只有在注册并登录 ThingJS 网站后,才能新建和保存项目,否则“我的项目”列表将不会出现在左侧导航栏中)

3D建模基础之初识ThingJS“在线开发”

3D建模基础之初识ThingJS“在线开发”


创建APP

那么就让我们开始学习第一个也是最重要的一个属性:APP。

当启动 ThingJS 系统的时候。我们需要创建 App 对象。

  1. app = new THING.App({
  2. url: "models/storehouse"
  3. });
复制代码

上述代码中 url: "models/storehouse" 指园区场景数据的地址,此处为选填,该地址可写绝对路径也可写相对路径。

当然也可以不输入路径,在你需要的时候通过 app.create 创建园区物体,从而加载园区,如下例:

  1. var app = new THING.App();var obj = app.create({
  2. type: "Campus",
  3. url: "models/storehouse/",
  4. complete: function() {
  5. console.log("Campus created: " + this.id);
  6. }});
复制代码

App作为 ThingJS 库的功能入口提供了如下功能:

1. 负责 3D 的初始化,如上述例子所见;

2. 园区的加载;

3. 提供了通过 create 创建物体、创建基本形状等;

4. 提供了 query 搜索功能;

5. 一些全局对象访问入口,如 root ,如 camera ;

6. 通过 level 提供场景层级的控制;

7. 提供了全局事件绑定功能;

8. 时间:

通过 deltaTime 获取距离上一帧的流逝时间(毫秒);

通过 elapsedTime 获取从启动到现在的流逝时间(毫秒)。

9. 效果控制:

通过 background 设置背景颜色或者图片;

提供了 lighting 设置灯光参数;

通过 postEffect 设置后期处理参数;

通过 fog 设置雾参数;

通过 skyBox 设置天空盒;

通过 skyEffect 设置时间线效果。

10. 键盘输入

通过 isKeyPressed 判断某按键是否按下。

11. 系统

通过 isMobileDevice 判断是否为移动端设备;

通过 pixelRatio 设置像素比例。

通过 pixelRatio 获取像素比例。

12. 页面相关

通过 app.domElement 获取包裹 3D 场景的 div。

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

本版积分规则

130700ppkpl8x3t7tt1b1t