1. 首頁 > 生活百科 > >

three.js 如何用webgl搭建一個3D庫房,3D倉庫3D碼頭,3D集裝箱,車輛定位,叉車定位可視化孿生系統——第十五課( 六 )

生活百科

 2.1.2、創建室內庫房模型

three.js 如何用webgl搭建一個3D庫房,3D倉庫3D碼頭,3D集裝箱,車輛定位,叉車定位可視化孿生系統——第十五課

文章插圖
這里的模型通過代碼實現，篇幅過長 ， 不便展示 。
 2.1.3、創建箱子模型
three.js 如何用webgl搭建一個3D庫房,3D倉庫3D碼頭,3D集裝箱,車輛定位,叉車定位可視化孿生系統——第十五課

文章插圖
{ "show": true, "uuid": "", "name": name, "objType": "ExtrudeGeometry", "position": { "x": position.x, "y": position.y, "z": position.z }, "style": { "skinColor": 16711680, "skin": { "skin_up": { "skinColor": color1, "side": 1, "opacity": 1, "imgurl": imgurl1, "repeatx": true, "width": 0.01, "repeaty": true, "height": 0.01 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_side": { "skinColor": color2, "opacity": 1, "imgurl": imgurl2, "repeatx": true, "width": 0.01, "repeaty": true, "height": 0.01 } } }, "scale": { "x": size.x / 100, "y": size.y / 100, "z": size.z / 100 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 0, "y": 100, "type": "nomal" }, { "x": 100, "y": 100, "type": "nomal" }, { "x": 100, "y": 0, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 100, "curveSegments": 1, "steps": 1, "bevelEnabled": false, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 1, "extrudePathPoints": [] }, "showSortNub": 100, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }2.1.4、創建集裝箱模型
three.js 如何用webgl搭建一個3D庫房,3D倉庫3D碼頭,3D集裝箱,車輛定位,叉車定位可視化孿生系統——第十五課

文章插圖
[{"show":true,"uuid":"","name":"cube2_6","objType":"cube2","length":400,"width":200,"height":200,"x":0,"y":200,"z":0,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":2531071,"side":1,"opacity":1,"imgurl":"../img/3dImg/cbjysfk2.jpg"},"skin_down":{"skinColor":2531071,"side":1,"opacity":1,"imgurl":"../img/3dImg/cbjysfk2.jpg"},"skin_fore":{"skinColor":2531071,"side":1,"opacity":1,"imgurl":"../img/3dImg/cbjysfk2.jpg"},"skin_behind":{"skinColor":2531071,"side":1,"opacity":1,"imgurl":"../img/3dImg/cbjysfk2.jpg"},"skin_left":{"skinColor":2531071,"side":1,"opacity":1,"imgurl":"../img/3dImg/cbjysfk2.jpg"},"skin_right":{"skinColor":2531071,"side":1,"opacity":1,"imgurl":"../img/3dImg/cbjysfk2.jpg"}}},"showSortNub":6,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}]2.1.5、車輛模型
three.js 如何用webgl搭建一個3D庫房,3D倉庫3D碼頭,3D集裝箱,車輛定位,叉車定位可視化孿生系統——第十五課

文章插圖
{ "name": _name, "objType": "objmodel", "position": _position, "scale": _scale, "visible": true, "rotation": [{ "direction": "x", "degree": _rotation.x }, { "direction": "y", "degree": _rotation.y-Math.PI/2 }, { "direction": "z", "degree": _rotation.z }], "filePath": "../js/models/car/", "mtlFileName": "car03.mtl", "objFileName": "car03.obj", "mtlIsPublic": false, "showSortNub": 7, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }2.2、數據載入
通過數據生成模型，畫出庫位，載入車輛等
/* type：1://集裝箱2://箱子3://筒狀color://顏色id :設備id 唯一必填position :設備位置必填 格式 { x: 0, y: 0, z: 0} 這里矢量單位size:尺寸 默認值 { x: 1, y: 1, z: 1 };*/function createModelJsonByType(type,color, id, position, size) {if (!scale) {scale = { x: 1, y: 1, z: 1 };}var modeljson = null;switch (type) {case 1:{modeljson = {....};}break;case 2:modeljson = {.... 。};break;case 3:modeljson = {....};break;}modeljson.name = "dev_T_" + type + "_ID_" + id;if (config && config.name) {modeljson.name = config.name;}if (modeljson.children) {$.each(modeljson.children, function (_i, _o) {_o.name = "dev_T_" + type + "_ID_" + id + "OBJCREN" + _i;});}if (modeljson.position) {modeljson.position.x = position.x;if (position.y || position.y == 0) {modeljson.position.y = position.y;}modeljson.position.z = position.z;}return modeljson;}/*創建車*/function createCarModel(_name, _position, _rotation, _scale, carType) {var model = ...model;// 1.集卡（帶集裝箱的） 2.集卡（空車） 3.散卡（帶箱的小貨車） 4.正面吊 5.小鏟車 6 板車if (carType) {switch (carType) {case 1: {model.filePath = "../js/models/jika/";model.mtlFileName = "jika.mtl";model.objFileName = "jika.obj";model.scale = {x: 4.200,y: 4.200,z: 4.200}}break;case 2: {model.filePath = "../js/models/jika_nocube/";model.mtlFileName = "jika_nocube.mtl";model.objFileName = "jika_nocube.obj";model.scale = {x: 4.200,y: 4.200,z: 4.200}}break;case 3: {model.filePath = "../js/models/sanka/";model.mtlFileName = "sanka.mtl";model.objFileName = "sanka.obj";model.scale = {x: 0.080,y: 0.080,z: 0.080}model.rotation[1].degree -= Math.PI / 2;}break;case 4: {model.filePath = "../js/models/diaoche/";model.mtlFileName = "dc.mtl";model.objFileName = "dc.obj";model.scale = {x: 1.150,y: 1.150,z: 1.150}}break;case 5: {model.filePath = "../js/models/canche/";model.mtlFileName = "canche.mtl";model.objFileName = "canche.obj";model.scale = {x: 0.1,y: 0.1,z: 0.1}}break;case 6: {model.filePath = "../js/models/banche/";model.mtlFileName = "banche.mtl";model.objFileName = "banche.obj";model.scale = {x: 4.200,y: 4.200,z: 4.200}}break;}}//model.scale.x *= 0.8;//model.scale.y *= 0.8;//model.scale.z *= 0.8;return model;}

推薦閱讀