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

zzzzzker 1月前 126

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

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

            1.场景搭建;

            2.应用开发;

            3.数据对接;

            4.项目发布;

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


       应用开发

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

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


       创建APP

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

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

app = new THING.App({
    url: "models/storehouse"
});

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

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

var app = new THING.App();var obj = app.create({
    type: "Campus",
    url: "models/storehouse/",
    complete: function() {
    console.log("Campus created: " + this.id);
    }});

         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。

     

最后于 1月前 被13716243286编辑 ,原因:
最新回复 (0)

你可以在 登录 or 注册 后,对此帖发表评论!

返回