ThingJS支持塌陷性能，加快3D渲染速度

在3D建模阶段，塌陷性能其实就是附加，材质也会合并会变成一种材质。加快渲染速度。ThingJS在导入塌陷后的模型后再进行轻量3D开发。

今天来讲讲如何基于js语法来开发一个物体模型拆解展开的效果，专业名称叫“物体爆炸图”，标准ThingJS体系模型出于互动模型性能考虑，都要求在模型上传前做塌陷，这种建模细节对于提升3D开发效率很有必要，目的是减少模型对内存的占用。

在3D开发之前，模型本身会重叠很多命令，占用很大一部分内存和CPU，拖慢电脑，所以针对模型进行塌陷后（指的是把很多个物体合并成一个，转换为一个命令可编辑多边形或可编辑网格），就会去除这些多余的命令参数，不再花时间记录和存储，从而加快运行速度。

制作物体模型时，根据爆炸图中各个零件的拆分需要，针对子模型或子节点定义并命名物体子对象，在3DMAX等建模软件里就能创建子对象。这些子对象在ThingJS在线开发中可作为模型子节点来控制，能够像单独模型对象物体一样进行移动、添加事件等操作。

拆分后磨性子节点如果有多材质或点数超过上限，那在ThingJS开发中会继续拆分，并在子节点中被命名成组，组内继续拆分“01”、“02”等对象。例如：3dmax命名，一个子节点名字为“box”，由于该子节点使用了多种材质，该子节点在在线开发中会被命名成组，组内会被拆分并命名为“box_0”，“box_1”等对象。

注意经塌陷的模型不再有子节点保留，只有上述分项控制模型局部要求，保留已命名的子对象信息，最大程度上提高开发性能，又满足模型拆分的特殊需要。

官方示例请各位看官参考：

// 加载场景代码
var app = new THING.App({ url: '/api/scene/406e419fae9000a47a4a8899'
});// 发电机模型节点数据
var nodeObjData = {'1': {name: '机座', offset: [0, 0, -1]},'2': {name: '保护装置', offset: [0, -1, 0]},'3': {name: '电瓶', offset: [0, -1, 0]},'4': {name: '排气口', offset: [0, 0, 1]},'5_0': {name: '过滤器', offset: [0, 0, 1]},'5_1': {name: '过滤网', offset: [0.5, 0, 1]},'6': {name: '供给装置', offset: [0, 0, 1]},'7': {name: '烟囱', offset: [-1, 0, 0]},'8': {name: '发电机'},'9': {name: '控制器', offset: [0, 1, 0]}
}
// 发电机模型节点对象
var nodeJsonData = null;
// 发电机对象
var generatorObj = null;
// 发电机展开状态
var expandState = false;
// 发电机展开次数
var expandCount = 0;// 场景加载完成后执行
app.on('load', function (ev) {// 查询发电机对象generatorObj = app.query('#generator')[0]// 获取发电机模型节点对象nodeJsonData = getNode(generatorObj);// 创建测试按钮new THING.widget.Button('展开', expandObj);new THING.widget.Button('还原', unexpandObj);new THING.widget.Button('顶牌显示', createAllPanel);new THING.widget.Button('顶牌隐藏', hiddenAllPanel);
})/*** 说明：显示所有顶牌*/
function createAllPanel(){for (let key in nodeObjData) {nodeJsonData[key].name = nodeObjData[key].name;createPanel(nodeJsonData[key]);}
}/*** 说明：隐藏所有顶牌*/
function hiddenAllPanel(){for (let key in nodeObjData) {hiddenPanel(nodeJsonData[key]);}
}/*** 说明：展开物体*/
function expandObj() {// 防止发电机在执行一次展开过程中多次点击if (expandState) {return;}expandState = true;expandCount++;for (let key in nodeObjData) {// 各子节点进行偏移objOffset(nodeJsonData[key], nodeObjData[key].offset);}
}/*** 说明：还原物体*/
function unexpandObj() {// 展开次数为0，代表未展开if (expandCount == 0) {return;}for (let key in nodeObjData) {if(nodeObjData[key].offset){// 计算还原时子节点需要进行的偏移量，数值为 -1 * 展开次数 * nodeObjData中定义的该子节点对应的偏移量let offsetValue = [-1 * expandCount * nodeObjData[key].offset[0], -1 * expandCount * nodeObjData[key].offset[1], -1 * expandCount * nodeObjData[key].offset[2]]objOffset(nodeJsonData[key], offsetValue);}}expandCount = 0;
}/*** 说明：获取节点对象*/
function getNode(obj) {let nodeJson = {};// obj.subNodes 即可获取到一个物体的所有子节点for (let i = 0; i < obj.subNodes.length; i++) {let subnode = obj.subNodes[i];// 获取物体子节点对象中node属性的type值，只有当type值为Mesh时，才能对物体添加事件let type = subnode.node.type;if(type == 'Mesh'){nodeJson[subnode.name] = subnode;}}return nodeJson;
}/*** 说明：物体偏移*/
function objOffset(obj, value) {if (!value) {return;}// 物体移动obj.moveTo({offsetPosition: value,  // 自身坐标系下的相对位置time: 500,  // 移动完成需要的时间complete: function () {expandState = false;}});
}/*** 说明：创建面板*/
function createPanel(obj) {// 判断是否已经创建过面板，如果已创建，显示，否则创建面板var panel = obj.getAttribute('panel');if (panel != null) {panel.visible = true;return;}// 创建panelpanel = new THING.widget.Panel({// 设置面板宽度width: '100px',// 没有角标 none ，没有线的角标 noline ，折线角标 polylinecornerType: 'polyline'})// 绑定物体身上相应的属性数据panel.addString(obj, 'name').caption('');// 创建UIAnchor面板var uiAnchor = app.create({// 类型type: 'UIAnchor',// 设置父物体parent: obj,// 要绑定的dom元素对象element: panel.domElement,// 设置 localPosition 为 [0, 0, 0]localPosition: [0, 0, 0],// 相对于面板左上角的偏移像素值，当前用值是角标的中心点pivotPixel: [-16, 109]});// 更改面板文本样式$('.ThingJS_wrap .main .ThingJS_UI .ThingJS_string-value').css('text-align', 'center');obj.setAttribute('panel', uiAnchor);
}/*** 说明：隐藏面板*/
function hiddenPanel(obj) {var panel = obj.getAttribute('panel');if (panel != null) {panel.visible = false;}
}

ThingJS仅需一周便可入门3D开发，商业用户享受更多VIP功能！

ThingJS支持塌陷性能，加快3D渲染速度相关推荐

图形渲染CPU重要还是显卡重要？3D渲染、三维建模速度和显卡有关吗？三维制图电脑配置！3D设计用什么显卡
图形渲染CPU重要还是显卡重要?3D渲染.三维建模速度和显卡有关吗?三维制图电脑配置!3D设计用什么显卡来源: 冀高升的日志本文结论:3D渲染最终主要靠CPU来完成,同时内存容量也要足够大.而3D ...
3D 渲染和建模的最佳显卡推荐，值得一看
购买用于 3D 渲染和建模的显卡时应考虑的事项为创意工作购买显卡时,最重要的是了解最重要的规格,认清自己的技能水平和工作范围,因此不要多付钱. 我们的指南将让您更好地了解要查找的内容以及如何浏览市场 ...
用3dmax测试软件会烧掉硬件吗,以3ds Max软件为例 3D渲染和三维建模是CPU重要还是显卡重要？...
以3ds Max的图形制作用电脑为例,其作用包括三个阶段:第一阶段是建立模型,第二阶段是光源材质,第三阶段是渲染.这三个阶段对工作站的子系统的要求侧重点各不相同,在3ds Max里面,对硬件的要求也主 ...
2022适合3D渲染的电脑配置清单来了，如何选电脑？
无论是建筑.医疗还是任何其他领域,3D 渲染都是天赐之物,可以更有效地完成工作,并且只需要花费很少的时间和金钱.3D 渲染让您可以创建逼真的逼真图像,同时使用 PC 轻而易举地保留最微小的细节.然而, ...
如何更快地渲染？深入了解3D渲染性能的指南！（5）
上文<如何更快地渲染?深入了解3D渲染性能的指南!(4)>我们介绍了从场景内部灯光.用料.反射.材质等方面的优化,提升场景渲染的速度.本文Renderbus云渲染农场将继续从渲染设置.全局 ...
NASA样本实验室之3D渲染图，一分钟搭建教程！3D 可视化 ThingJS
ThingJS在实现物理空间与信息空间的融合过程中,空间数据模型无疑是两者之间重要的联系纽带. 号外!美国宇航局(NASA)约翰逊航天中心向公众发布了目前正在建设中的实验室的渲染图,该实验室将用于研究 ...
如何更快地渲染？深入了解3D渲染性能的指南！（4）
上文<如何更快地渲染?深入了解3D渲染性能的指南!(3)>中,我们介绍了如何快速渲染中对场景中多边形数量的优化,从而加速场景的渲染速度.本文Renderbus云渲染农场将继续带您从场景内部 ...
光线追踪是怎么影响渲染速度的，什么显卡可以支持？
在 3D 世界中,慢慢地人们倾向于让它尽可能逼真.他们可以应用许多技术和技巧,但有一种技术可以为您提供很多帮助,称为光线追踪.然而,众所周知,它是非常计算密集型的.在本文中,让我们进一步探讨它,并回答 ...
预览速度提升30倍，这是什么黑科技？（天猫618之3D渲染篇）
简介: 天猫618宣布的 3D 购物时代,相信有很多小伙伴好奇,这背后有哪些"黑科技"?橙子从以下三点为你揭秘--3D实景复刻.3D渲染.3D算法,上周讲了<天猫618宣布开 ...

ThingJS支持塌陷性能，加快3D渲染速度

ThingJS支持塌陷性能，加快3D渲染速度相关推荐

最新文章

热门文章