铝型材铝架3D模型是采用Three引擎开发的一款专门用于铝型材铝架搭建的一款工具,适用于小程序。
解决的核心问题:铝型材普通用户不会按多少米来购买,客户需要同商家来回沟通想要的铝架结构。然后商家画3D模型,再和客户反复确认,最后计算出总费用。中间的沟通效率极低。通过本插件,用户则直接来生成3D模型。商家就能合出总价。提升百倍沟通效率。
流程:通过设置参数,直接生成可见3D模型,所见即所得。在生成完成后,可直接在模型中看到尺寸标注。在确定模型无问题后,可查看下料清单,获取铝型材型号、长度、总用量。角码、角槽的型号、数量数据。3D模型的误差为0.1mm以内,足以满足日常需求。3D模型下的截图可生成超大尺寸的铝型材架子细节设计效果图,可直接打印为图纸。
性能:因模型为纯JS所写,具有优秀的3D性能。且保存模型Json数据时只需存储100左右的字符量。也可通过导出加工清单来计算总价,结合商城,完成铝型材的成交。项目本身已稳定运行2年以上。
支持结构:目前支持的架子结构为:一字型、L字型、コ字型、口字型、上下包边、高低台等多种铝架设计,从20厘米到6米都可以设计。可设计各类鱼缸铝架及鱼房用铝架。支持铝型材从1515至6060,最大支持到6层。
DEMO下载:http://j.uchongs.com/down/demo.rar
开放接口
插件以组件的方式使用。通过api接口来操作。
Rack.SetDa(Json); //设置一个JSON值,用于生成对应模型,用于创建初始模型,(如:数据为用户保存的数据)
Rack.GetDa(); //获取当前模型Json数据,用该数据可生成目前所看到的铝架
Rack.ModeRandom(); //随机显示一个铝架模型,支持所有形式的铝架,可用于创建初始模型,(如:用户第一次进入)
Rack.ModeRandom(0); //随机显示拐角铝架模型
Rack.ModeRandom(1); //随机显示包边铝架模型
Rack.ModeRandom(2); //随机显示高低台铝架模型
Rack.ModeOn(); //模型显示
Rack.ModeOff(); //模型关闭
Rack.HelpOn(); //尺寸标注显示
Rack.HelpOff(); //尺寸标注关闭
Rack.ParameterSwitch(); //打开/关闭参数显示面板,可输入参数true/false强制控制,返回值为切换后状态
Rack.DesignSwitch(); //打开/关闭设计面板,可输入参数true/false强制控制,返回值为设计页板切换后状态
Rack.GetRaw(); //获取所显示模型的加工清单Json
Rack.RawOn(); //显示模型的加工清单,内部集成,直接给用户看
Rack.GetImg(img=>{}); //获取模型的截图临时路径,此为异步方法,截图失败返回null,如需要上传图片至服务器,需在回调中获取图片地址
Rack.SaveImg(); //保存模型截图至用户相册
Rack.AngleRestore(); //还原模型视角,用户在平移旋转后,快速还原。
Rack.StopLoop(); //停止渲染,页面onHide时引用
Rack.ReLoop(); //开始渲染,页面onShow时引用
Rack.Dispose(); //释放资源,页面onUnload时引用
全局配置:app.json
{
"pages":["pages/index/index"],
"plugins":{ "Rack": {"version":"版本号","provider":"wxe661b1d812ddc842"}}
}
页面配置:pages/index/index.json
{
"usingComponents":{"Rack":"plugin://Rack/Rack"}
}
pages/index/index.wxml
<Rack bindRackReady="RackReady"></Rack>
<view wx:if="{{RackOk}}" class="RackCss">
<view catchtap="ModeRandom">随机模型</view>
<view catchtap="ModeRandom0">随机拐角架</view>
<view catchtap="ModeRandom1">随机包边架</view>
<view catchtap="ModeRandom2">随机高低台</view>
<view catchtap="GetDa">模型数据获取</view>
<view catchtap="DesignSwitch">设计面板开关</view>
<view catchtap="RawOn">加工清单直显</view>
<view catchtap="ModeOn">模型开</view>
<view catchtap="ModeOff">模型关</view>
<view catchtap="HelpOn">标注开</view>
<view catchtap="HelpOff">标注关</view>
<view catchtap="ParameterSwitch">参数开关</view>
<view catchtap="SaveImg">截图至相册</view>
<view catchtap="AngleRestore">还原视角</view>
<view catchtap="StopLoop">停止渲染</view>
<view catchtap="ReLoop">开始渲染</view>
<view catchtap="Dispose">释放资源</view>
<view catchtap="SetDa" class="vip">数据转模型</view>
<view catchtap="GetRaw" class="vip">清单数据获取</view>
<view catchtap="GetImg" class="vip">截图获取</view>
</view>
pages/index/index.js
let Rack = requirePlugin('Rack');
Page(
{
RackReady()//模型引擎初始化完成回调,在此方法内传递模型数据
{
Rack.ModeRandom(); //随机生成初始化模型,也可Rack.SetDa指定数据生成模型
this.setData({RackOk:true}); //模型初始化完毕通知前端展示操作按钮
},
//用指定数据生成模型
SetDa(){Rack.SetDa({mode:0,diam:30,width:435,height:400,tier:2,bheight:80,theight:0,jiagu:0,sarr:[{leng:980,heng:0,shu:1},{leng:980,heng:1,shu:2}]});},
ModeOn(){Rack.ModeOn();}, //模型显示
ModeOff(){Rack.ModeOff();}, //模型关闭
HelpOn(){Rack.HelpOn();}, //标注显示
HelpOff(){Rack.HelpOff();}, //标注关闭
ModeRandom(){Rack.ModeRandom();}, //随机所有类型铝架
ModeRandom0(){Rack.ModeRandom(0);}, //随机显示拐角铝架
ModeRandom1(){Rack.ModeRandom(1);}, //随机显示包边铝架
ModeRandom2(){Rack.ModeRandom(2);}, //随机显示高低台铝架
GetRaw(){let re=Rack.GetRaw();console.log(re);}, //获取加工清单
RawOn(){Rack.RawOn();}, //显示清单
GetImg(){Rack.GetImg(img=>{console.log(img)});}, //获取截图临时路径,此为异步方法,截图失败返回null
SaveImg(){Rack.SaveImg();}, //保存截图至相册
AngleRestore(){Rack.AngleRestore();}, //还原模型视角
StopLoop(){Rack.StopLoop();}, //停止渲染
ReLoop(){Rack.ReLoop();}, //开始渲染
Dispose(){Rack.Dispose();}, //释放资源
ParameterSwitch(){let re=Rack.ParameterSwitch();console.log(re);}, //打开/关闭参数面板,可输入参数true/false强制控制
DesignSwitch(){let re=Rack.DesignSwitch();console.log(re);}, //打开/关闭设计面板开关,可输入参数true/false强制控制
GetDa(){wx.showModal({content:JSON.stringify(Rack.GetDa())});}, //获取模型数据
})