创建对象
有了场景,我们就可以添加物体对象了。
创建物体
在ThingJS中,可以动态创建或删除 Thing、Marker、Box等常见物体,他们大多继承自 BaseObject 。本章先以创建 Thing 物体为例,讲解创建对象时所需要的参数,其他各类对象会在相应章节中进行具体讲解网页链接
对象创建与删除
创建物体;
var truck = app.create({type: "Thing",name: "truck",position: [-5, 0, 0],url: "https://www.thingjs.com/static/models/truck/",complete: function() {console.log("truck created!")}})
删除物体
truck.destroy()注意事项:
有时候,我们经常会说制作场景,上传场景,下载场景,加载场景,这里的场景其实就是园区,我们通常也会简称为"场景"。
查看示例
示例效果如下图所示:
创建物体参数
创建的物体参数可以分为以下三种:通用参数、特定物体类型(type)的专属参数、系统其他功能。
通用参数:
注意事项
为了更清晰明确的对用户动态创建的物体对象进行管理,建议创建物体对象时,显式指明该物体对象的 parent。如果没有显式填写parent时:
如果没有开启系统层级,则该物体的父亲默认是 root (不会是园区 Campus )
注册层级后创建物体不再默认指定父物体,若需要添加到父物体上,通过设置parent参数指定父物体,不指定默认添加到root下。
type:该物体用什么物体类来创建
id:该物体的编号
name:物体的名字
position:设置世界位置
localPosition:设置在父物体下的相对位置,和 position 只能输入一个
angles:设置世界坐标系下三轴旋转角度,例如:angles:[90,45,90] ,代表在世界坐标系下物体沿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 通常是可识别的名字,例如创建一个对象:
var car = app.create({'id': '8EA88A93-3238-446E-B80D-0C61BEFC9950','name': 'myCar01','type': 'Thing','url':'https://model.3dmomoda.com/models/66b7f5979ff043afa4e79f7299853a4b/0/gltf/'})
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指挥车',
url: 'https://model.3dmomoda.com/models/17fc17b416e94527bc607917fc8269a4/0/gltf/',// 模型地址
position: [10, 0, 10],
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 将在后续发布多照片自动建模功能,敬请期待。
这是采集的雕塑照片
请点击输入图片描述
这是通过照片建模技术生成的模型: