thingjs开发文档(项目能否在thingjs平台多个js然后相互引用,求教程)

:暂无数据 2026-08-10 12:10:06 0

thingjs开发文档(项目能否在thingjs平台多个js然后相互引用,求教程)

大家好,今天小编来为大家解答以下的问题,关于thingjs开发文档,项目能否在thingjs平台多个js然后相互引用,求教程这个很多人还不知道,现在让我们一起来看看吧!

本文目录

项目能否在thingjs平台多个js然后相互引用,求教程

创建对象

有了场景,我们就可以添加物体对象了。

创建物体

在ThingJS中,可以动态创建或删除 Thing、Marker、Box等常见物体,他们大多继承自 BaseObject 。本章先以创建 Thing 物体为例,讲解创建对象时所需要的参数,其他各类对象会在相应章节中进行具体讲解网页链接

对象创建与删除

  • 创建物体;

    ***隐藏网址***
    console.log("truck created!");}});
  • 删除物体

    truck.destroy();

    注意事项:

    有时候,我们经常会说制作场景,上传场景,下载场景,加载场景,这里的场景其实就是园区,我们通常也会简称为"场景"。

    查看示例

    示例效果如下图所示:

  • 创建物体参数

    创建的物体参数可以分为以下三种:通用参数、特定物体类型(type)的专属参数、系统其他功能。

  • 通用参数:

    注意事项

    为了更清晰明确的对用户动态创建的物体对象进行管理,建议创建物体对象时,显式指明该物体对象的 parent。如果没有显式填写parent时:

  • 如果没有开启系统层级,则该物体的父亲默认是 root (不会是园区 Campus )

  • 注册层级后创建物体不再默认指定父物体,若需要添加到父物体上,通过设置parent参数指定父物体,不指定默认添加到root下。

  • type:该物体用什么物体类来创建

  • id:该物体的编号

  • name:物体的名字

  • position:设置世界位置

  • localPosition:设置在父物体下的相对位置,和 position 只能输入一个

  • angles:设置世界坐标系下三轴旋转角度,例如:angles: ,代表在世界坐标系下物体沿X轴旋转90度,沿Y轴旋转45度,沿Z轴旋转90度

  • scale:设置相对自身坐标系下的缩放比例

  • parent:设置父物体是谁

  • 特定物体类型(type)的专属参数,这里只列了 “Thing” 物体专属参数,其他物体种类参数可在 本页下方 中查看

  • url :物体模型资源路径,这个是 “Thing” 物体需要的参数

  • 系统其他功能:

  • complete:初始化完成后的函数回调

  • 创建物体参数

    ThingJS 中的大多数对象基本上都是继承自 BaseObject ,BaseObject 提供了 ThingJS 对象的基本能力。

    BaseObject 派生出很多子类,常见的物体种类详见如下:

  • 模型物体:Thing;

  • 基本形体:Box; Sphere; Plane; Cylinder; Tetrahedron; (点击查看示例)

    请点击输入图片描述

  • 建筑相关: Campus; Building; Floor; Room;

  • 界面: UIAnchor; Marker; WebView;

  • 粒子: ParticleSystem

  • 线: Line; RouteLine;

  • 其他: Heatmap;

  • 注意事项

    在 CamBuilder 中摆放的园区、建筑、楼层、房间、物体等,同步到 ThingJS 中,会自行判断物体类,分别对应类为:campus、building、floor、room、thing。也可将默认类转换为自定义类。

    在ThingJS 中创建的园区、建筑、楼层、房间、物体等,可创建自定义类

    判断对象物体类

    每个物体类都有它自己的类识别属性。

    比如 `Building` 物体,使用 `instanceof THING.Building` 方法进行判断。

  • if ( obj instanceof THING.Building ) {

  •    console.log("This is a building!");}

  • 对象属性

    对象属性类别:

  • 通用属性:

  • 对于从 CamBuilder 中导入的物体而言:

  • id 对应为 CamBuilder 中的 “UserID” ;如果用户没有填写 “UserID” , CamBuilder 中会生成的物体的唯一标识

  • name 对应为 “名称” ,如果用户在 CamBuilder 中没有自行填写 “名称” ,则在ThingJS 中 name 与 id 一致

  • 如果创建时,id 和 name 都不填写,则系统生成唯一id

  • 如果创建时,只填写了 name ,没填写 id ,则 id 取 name 的值

  • 如果创建时,用户填写了 id ,则 id 取用户填写的值,此时用户需自行维护 id 的唯一性,也可用 THING.Utils.generateUUID() 生成全局唯一标识

  • 如果创建时,只填了 id ,没填 name ,则 name 取 id 的值

  • 一般来说 id 为了保证唯一性,通常是按一定规则生成的编码(如身份证号或UUID)。

  • name 通常是可识别的名字,例如创建一个对象:

    ***隐藏网址***
  • id:一般可作为物体的唯一编号

  • name:用户设置的物体名字,这个属性 ThingJS 系统不要求全局唯一,用户可自行定义

    注意事项

    关于 id 和 name 的使用说明:

  • position:世界坐标系下位置

  • localPosition:父物体坐标下的位置

  • angles:世界坐标系下三轴旋转角度

  • localAngles:世界父物体坐标系下三轴旋转角度

  • scale:自身坐标系下三轴缩放量

  • visible:是否显示

  • style:效果控制

  • children:获取所有子物体

  • brothers:获取所有兄弟(排除自己)

  • parent:获取父物体

  • parents:获取所有父物体(返回的 Selector 结果中,第0位为直属父物体 parent,最后一位为世界根物体)

  • 类专属属性

    Thing 类物体有 url 属性,也可在 BaseObject 查看支持的 type 清单以及每个类支持什么属性。

  • CamBuilder 中用户添加的自定义属性

    在 CamBuilder 中我们可以手动添加自定义属性,如下图:

    从 CamBuilder 导入的用户自定义的属性可通过 `userData` 属性访问到

    例如上图中的属性,我们这里可以这样访问:

    obj.userData;
  • 用户在程序运行中自行添加的属性

    JS 是一个灵活的语言,允许我们动态为对象添加属性。比如,我们从后台接收到的监控数据,可以直接给对象添加自定义属性 `monitorData` 来进行存储:

    obj.monitorData = {
    温度:10,
    单位:“摄氏度”}
  • 访问自定义属性

    正如我们看到的,ThingJS 对象有丰富的属性。其中有的属性可能具有嵌套结构,比如 userData ,以及用户自行添加的 monitorData ,访问它们有时比较麻烦,如下:

  • if(obj.monitorData && obj.monitorData 》 0).....

  • 所以我们提供了一些便于访问、设置对象属性和判断对象属性是否存在的方法,例如:

  • obj.getAttribute("monitorData/温度")obj.setAttribute("monitorData/温度", 15)obj.hasAttribute("monitorData/温度")

  • 属性查看工具

    正如我们看到的,ThingJS 对象有丰富的属性。其中有的属性可能具有嵌套结构,比如 userData ,以及用户自行添加的 monitorData ,访问它们有时比较麻烦,如下:

  • 点击“工具”

  • 点击“场景信息”

    请点击输入图片描述

  • 选中场景树中的某个物体对象查看属性

  • 模型使用

    在开发中我们需要动态创建一个模型,如何获取模型呢?

    有两种途径可获取模型:

    从模型库中获取

  • 选中“组件”下拉列表,点击选择“模型库”;

  • 点击“立即探索”,进入模型库列表;

    请点击输入图片描述

  • 从模型库列表点击所需物体;

  • 在弹出层点击复制按钮,复制模型 url ;

  • 在创建物体时用模型 url 创建。

  • 上传个人模型

    obj 模型上传 CamBuilder

  • 先准备好需要上传的个人模型,需要满足以下要求:

  • 模型的每个节点的顶点数量不能超过65000;

  • 模型文件、贴图文件、材质文件、缩略图文件必须以英文名命名;

  • 需包含:

    注意事项

    将模型、贴图、材质、缩略图,同级目录压缩为 zip 导入,且 obj 模型文件,mtl 材质文件,缩略图文件三个资源文件同名时,上传到客户端 和 ThingJS 里才可以显示缩略图。

    请点击输入图片描述

    注意事项

    上传obj模型时需要满足如下条件:

    将模型、贴图、材质、缩略图,同级目录压缩为 zip 导入,且 obj 模型文件,mtl 材质文件,缩略图文件三个资源文件同名时,上传到客户端 和 ThingJS 里才可以显示缩略图

    请点击输入图片描述

  • obj 模型文件,支持 obj 格式

  • 贴图文件,支持 png、jpg、bmp、dds、tga(非压缩格式)格式

  • mtl 材质文件,支持 mtl 格式

  • 缩略图文件,支持 png 格式,命名与 obj 文件一致

  • 导入文件格式:zip 文件(建议 zip 包以英文命名);

  • 模型要求:

  • 准备好上传文件,上传使用步骤如下:

  • 选择 CamBuilder 内的 DIY 模型库,选择上传资源下的 OBJ模型上传;

    请点击输入图片描述

  • 选择将要上传的OBJ模型压缩包,点击确定,进行上传;

    请点击输入图片描述

  • 上传成功后可在已上传的OBJ模型处查看;

    请点击输入图片描述

  • 可进入搭建场景使用,上传后即可显示在「个人」,「用户上传」处可见,拖拽至场景中即可使用;

    请点击输入图片描述

  • 进入搭建场景,先点击右侧菜单栏中的「个人」,再点击点击上方「添加」按钮,选择需上传的模型,确认后上传;

    请点击输入图片描述

  • 上传后即可显示在「个人」,「用户上传」处可见,拖拽至场景中即可使用。

  • 使用后导出tjs包,则会导出obj模型,在导入ThingJS之后,点击 在线开发 里面,点击「工具」下的「自定义模型信息」即可看到用户上传的自定义模型,此时可点击该模型在左侧代码区域快速创建代码。

  • 3ds Max 模型上传

  • 通过3ds Max模型上传插件您可将自己制作的3ds Max模型上传至模模搭中使用;

  • 上传后在 ThingJS 网站 在线开发 里面,点击「工具」下的「自定义模型信息」即可看到用户上传的模型,此时可点击该模型在左侧代码区域快速创建代码。

  • 查安装与使用教程

    自定义类

    定义与注册

    用户可以定义自己的类,通过继承 ThingJS 内部类(比如:Thing 类),对 ThingJS 进行扩展和封装。

    我们推荐使用ES6语法定义一个类。例如,自定义汽车类 Car

  • // 继承 Thing 类class Car extends THING.Thing {

  •    constructor(app) {

  •        super(app);

  •    }

  •    // 添加一个 run 方法

  •    run() {

  •    }}

  • 要在ThingJS中使用自定义的类,还需要对其进行注册。

    通过 THING.factory.registerClass 方法,将继承于 ThingJS 内部类的自定义类,注册到系统中。例如:

  • // 注册自定义类 THING.factory.registerClass(’Car’, Car);

  • 使用自定义类

    用户定义并注册完自己的类后,常见的使用方式有以下两种:

  • 创建自定义类的物体

    利用 app.create 方法进行创建时,指定type为自定义类

    var car = app.create({
    type: ’Car’, // 自定义注册类的名称
    name: ’GMC指挥车’,
    ***隐藏网址***
    position: ,
    complete: function () {
    console.log(’created: ’ + this.name);
    }});

    此外,同样可对注册后的自定义类进行 query 查询,注册事件等操作

    // 查询得到所有Car类的物体var cars=app.query(’.Car’)// 给所有Car类的物体 添加Click事件app.on(’click’,’.Car’,function(ev){
    var obj=ev.object;
    console.log(obj.name);})

    查看示例

    观察此示例的场景树也可以看出,新创建的物体为自定义的Car类型

    请点击输入图片描述

  • 转换已有物体的类型

    通过 THING.Utils.convertObjectClass 方法将场景中物体,转为自定义的类型,例如:

    // 查询得到 name 中包含 car 字符串的物体集合var cars=app.query(/car/);// 遍历物体集合,逐个转换成自定义的 Car 类cars.forEach(function (obj) {
    THING.Utils.convertObjectClass(obj, ’Car’)})

    查看示例

    观察此示例中的场景树可看出

    原本场景中 name 包含“car”的Thing类型物体(即场景中的车),转换成了Car类型。

    请点击输入图片描述

  • 如何建模

    但一个 3D 模型如何制作呢?这一章将为大家介绍一下部分建模软件以及建模软件中用到的技术。

    建模软件

    当建模可使用建模软件,常用的建模软件有以下两类:

  • 通用商业3D软件

    请点击输入图片描述

  • cad 软件

    请点击输入图片描述

  • 上面这两类 3D 软件,都可输出 3D 模型,并导入到 ThingJS 平台使用

    建模软件中涉及的技术

  • mesh 建模

    大多数通用商业 3D 软件使用的建模技术,有点像雕塑,使用多边形体,进行,再贴上贴图,模拟表面的材质。

  • Nurbs

    请点击输入图片描述

    Nurbs,即非均匀有理 B 样条曲线(Non-Uniform Rational B-Splines) ,你只要知道,它是工业建模标准,大部分 3D CAD 软件支持建模方法。它主要是通过数学公式定义每条线,每个曲面,所以可以做到无限细分面,应用于数字机床加工等,我们平时看到汽车,飞机等均由这类技术设计被用于制造。

    但目前 ThingJS 平台还不能直接支持这种数据,需要转换的普通 3Dmesh 格式,并导入到 ThingJS 平台使用,导入后该模型的面数较多。

  • Loft

    请点击输入图片描述

    这个技术,就是给我一个界面 2D 图形,在给我一条路径,我就能制作一个模型给你。

    ThingJS 平台支持这项技术,比如 PolygonLine这类物体。

  • 3D扫描

    请点击输入图片描述

    通过激光等技术对物体表面进行 3D 扫描,并进行 3D 重建得到模型。ThingJS 在积极开发这项技术,敬请期待。

  • 多照片自动建模

    CamBuilder 将在后续发布多照片自动建模功能,敬请期待。

    这是采集的雕塑照片

    请点击输入图片描述

    这是通过照片建模技术生成的模型:

ThingJS平台有哪些组件和工具

ThingJS平台提供如下相关组件和工具供用户使用:

CityBuilder:聚焦城市的 3D 地图搭建工具,打造你的 3D 城市地图。

CamBuilder:简单、好用、免费的 3D 场景搭建工具。

ThingPano:全景图制作工具,轻松制作并开发全景图应用,实现 3D 宏观场景和全景微观场景的无缝融合。

ThingDepot:上万种模型,数十个行业,自主挑选,一次制作多次复用。

thingjs 导入模型无贴图

使用THingJS开发物联网可视化项目时,可能会遇到模型上传到ThingJS的园区搭建工具模模搭时,提示上传失败甚至于上传后根本就没有制作好的模型,那么究竟是怎么一回事呢?没关系,这篇文章告诉你一些小技巧,让你少去修改你模型。首先,ThingJS文档中已经写明了,推荐的max是2016、2019、2020,有人会说,我用17、18不行么?还真不行,ThingJS旗下的模型上传插件,目前就兼容这三个版本,使用别的版本,就会出现各种意想不到的问题哦。

怎么用thingjs绘制马路

根据线条来描述,使用这些的线条,可以得到一个好的一条线路。说还是要对这方面知识要要深入了解。

thingJS开发体验如何VIP套餐值得买吗

3D开发不是容易做的项目,我主要从事物联网领域,Thingjs开发平台用了半年多了,用的是javascript开发逻辑,上手快。使用时需注意两个前提。
1. ThingJS平台适合有Javascript基础的前端开发人员使用,官方提供视频教程、技术文档和场景资源参考,场景爆红、出错可配合F12检查错误源,加入qq技术交流群潜水,只要有一定的学习能力,一个月不到就能入门,降低开发报错率。
2. VIP套餐包括开发授权和项目部署授权两种服务,很多人说开发VIP还有很多其他花钱的地方,因为开发仅仅是其中的一种服务。这也跟PAAS平台的对接机制有关系,支持在线iframe分享、在线发布和离线下载,我认为开发和部署双包的套餐更划算些。
通常来说只有做特殊项目才需要用到离线部署,越来越多的在线化是不可避免的,所以做3D项目尽量考虑有PAAS能力的平台深入学习。

前段开发可视化应用难度如何

答:前端开发做可视化应用事实上有难度。

建筑拔高(ThingLayer).js

* 该示例主要展示了根据底面坐标轮廓和高度进行拔楼的功能

项目能否在thingjs平台多个js然后相互引用,求教程的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于项目能否在thingjs平台多个js然后相互引用,求教程、项目能否在thingjs平台多个js然后相互引用,求教程的信息别忘了在本站进行查找哦。

thingjs开发文档(项目能否在thingjs平台多个js然后相互引用,求教程)

本文编辑:admin

更多文章:


数据库管理系统和数据库系统分别侧重(数据库,数据库管理系统,数据库系统,这三个分别是什么意思并举个实例)

数据库管理系统和数据库系统分别侧重(数据库,数据库管理系统,数据库系统,这三个分别是什么意思并举个实例)

今天给各位分享数据库,数据库管理系统,数据库系统,这三个分别是什么意思并举个实例的知识,其中也会对数据库,数据库管理系统,数据库系统,这三个分别是什么意思并举个实例进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

2026年9月7日 17:00

编程语言出现的先后顺序(最早的编程语言是哪一个)

编程语言出现的先后顺序(最早的编程语言是哪一个)

今天给各位分享最早的编程语言是哪一个的知识,其中也会对最早的编程语言是哪一个进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

2026年9月7日 16:10

小程序源码有什么用(大商创小程序源码好用吗)

小程序源码有什么用(大商创小程序源码好用吗)

“小程序源码有什么用”相关信息最新大全有哪些,这是大家都非常关心的,接下来就一起看看小程序源码有什么用(大商创小程序源码好用吗)!

2026年9月7日 15:40

springmvc的依赖(springMVC的注入方式有哪几种,这与springMVC依赖)

springmvc的依赖(springMVC的注入方式有哪几种,这与springMVC依赖)

大家好,关于springmvc的依赖很多朋友都还不太明白,不过没关系,因为今天小编就来为大家分享关于springMVC的注入方式有哪几种,这与springMVC依赖的知识点,相信应该可以解决大家的一些困惑和问题,如果碰巧可以解决您的问题,还

2026年9月7日 14:00

it培训评价网(it培训排名机构十大IT培训机构)

it培训评价网(it培训排名机构十大IT培训机构)

这篇文章给大家聊聊关于it培训评价网,以及it培训排名机构十大IT培训机构对应的知识点,希望对各位有所帮助,不要忘了收藏本站哦。

2026年9月7日 13:00

个人博客页面布局(新手站长怎样做好独立博客初期运营工作)

个人博客页面布局(新手站长怎样做好独立博客初期运营工作)

大家好,如果您还对个人博客页面布局不太了解,没有关系,今天就由本站为大家分享个人博客页面布局的知识,包括新手站长怎样做好独立博客初期运营工作的问题都会给大家分析到,还望可以解决大家的问题,下面我们就开始吧!

2026年9月7日 12:40

display flex 自动换行(overflow-y:hidden;overflow-x:auto;无效解决方法)

display flex 自动换行(overflow-y:hidden;overflow-x:auto;无效解决方法)

大家好,关于display flex 自动换行很多朋友都还不太明白,不过没关系,因为今天小编就来为大家分享关于overflow-y:hidden;overflow-x:auto;无效解决方法的知识点,相信应该可以解决大家的一些困惑和问题,如

2026年9月7日 11:00

小程序免认证源码(小程序源码都能干嘛)

小程序免认证源码(小程序源码都能干嘛)

本篇文章给大家谈谈小程序免认证源码,以及小程序源码都能干嘛对应的知识点,文章可能有点长,但是希望大家可以阅读完,增长自己的知识,最重要的是希望对各位有所帮助,可以解决了您的问题,不要忘了收藏本站喔。

2026年9月7日 10:50

timestamp without time zone(Postgresql中to_date()函数使用问题)

timestamp without time zone(Postgresql中to_date()函数使用问题)

各位老铁们好,相信很多人对timestamp without time zone都不是特别的了解,因此呢,今天就来为大家分享下关于timestamp without time zone以及Postgresql中to_date()函数使用问题

2026年9月7日 09:40

网页制作代码特效大全(谁知道网页打字机特效的代码)

网页制作代码特效大全(谁知道网页打字机特效的代码)

大家好,如果您还对网页制作代码特效大全不太了解,没有关系,今天就由本站为大家分享网页制作代码特效大全的知识,包括谁知道网页打字机特效的代码的问题都会给大家分析到,还望可以解决大家的问题,下面我们就开始吧!

2026年9月7日 04:20

最近更新

创业加盟网1688(怎样考察加盟店)
2026-09-07 17:50:14 浏览:0
热门文章

yoga pro 14s carbon(yoga14s接口类型)
2026-07-03 17:50:01 浏览:5
domino directory(帮我翻译一下Recipient’s Domino Directory entry does not specify a valid Notes mail file)
2026-08-03 19:20:01 浏览:4
标签列表