如何用webgl(three.js)搭建不规则建筑模型，客流量热力图模拟

最新推荐文章于 2024-09-29 16:36:07 发布
最新推荐文章于 2024-09-29 16:36:07 发布
阅读量966 收藏 5
点赞数 1
分类专栏： three.js
原文链接：https://www.cnblogs.com/yeyunfei/p/10473050.html
版权

　三、逻辑控制代码

function ModelBusiness() { }
ModelBusiness.prototype.init = function () {
    var _this = this;
    _this.currentShow = "mainModel";
    w3DShowObj.mouseMoveEvent = _this.mouseMoveEvent;
}
//双击事件
ModelBusiness.prototype.dbclickForeFunc = function (_obj, _face) {
    var _this = this;
    if (indexPage.currentShow != "main") {

        if ("|m1_room_4_1|m1_room_4_2|m1_mark_4_1|m1_mark_4_2|m1_hitmap_b4_f2|m1_hitmap_b4_f1|".indexOf("|" + _obj.name + "|") >= 0) {
            this.changeToDetailModel(function () {
                indexPage.showLeftAndRightBottons();
            });
        } else {
            console.log(_obj.name);
            if (_obj.name.indexOf("m1_") >= 0) {
                layer.msg("选中的场馆无对应模型");
            }
        }
    } else {
        console.log(_obj.name);
        indexPage.hideDetailBtn();
        //显示热力图
        if (_obj.name.indexOf("m1_room_") >= 0 || _obj.name.indexOf("m1_mark_") >= 0) {
            var buildbub = parseInt(_obj.name.split("_")[2]);
            var floorNub = 0;
            if (_obj.name.split("_")[3]) {
                floorNub = parseInt(_obj.name.split("_")[3]);
            }
            //此处获取热力图数据
            _this.gethitMapData(buildbub, floorNub, function (data) {
                var postion = _this.hitMapToABPosition["h" + buildbub];
                var roomname = "m1_room_" + buildbub + "_" + floorNub;
                if (floorNub == 0) {
                    roomname = "m1_room_" + buildbub;
                }
                var room = w3DShowObj.commonFunc.findObject(roomname);
                var position = {};
                position.x = room.position.x + postion.x;
               position.y = room.position.y + postion.y+10;
               position.z = room.position.z + postion.z;
               var pageposition = indexPage.getMSGPositionToIframe();
               var p = new THREE.Vector3(pageposition.x, pageposition.y, -1).unproject(w3DShowObj.camera)
               _this.addLinkLine(position, p);
               indexPage.showDetailBtn();
           _this.setHeatMap(buildbub, floorNub, data, function (hitmapobj) {
                    hitmapobj.visible = true;
                    indexPage.setbackground(hitmapobj.canvas, buildbub, floorNub);
                });
            });
        } else if (_obj.name.indexOf("m1_hitmap_") >= 0){
            _obj.visible = false;
        }
    }
    return false;
}
//切换到模型场景
ModelBusiness.prototype.changeToDetailModel = function (suncFunc) {
    var _this = this;
    _this.currentShow = "m4";
    //闪动
    var flashnames = ["m1_room_4_1", "m1_room_4_2", "m1_mark_4_1", "m1_mark_4_2"];
    w3DShowObj.commonFunc.flashObjsByName(flashnames, "flashFloor", 0x00ffff, 10, 200);
    //渐变消失
    setTimeout(function () {
        var mainmodels = _this.getMainModels();
        var showmodels = [];
        var needVModels = [];
        $.each(mainmodels, function (_index, _obj) {
            console.log(flashnames.indexOf(_obj.name));
            if (flashnames.indexOf(_obj.name) < 0) {
                needVModels.push(_obj);
            } else {
                showmodels.push(_obj);
            }
        });
        _this.vModels(needVModels, function () {//虚化主场景其它
            _this.hideModels(needVModels, function () {//隐藏主场景其它
                _this.vModels(showmodels, function () {//虚化主场景其它
                    _this.hideModels(showmodels, function () {//隐藏主场景其它
                        w3DShowObj.commonFunc.changeCameraPosition( { x: -1348.8785043951725, y: 3454.620429471695, z: -5559.115429190126 }, { x: -348.1110525967623, y: -733.5693407220991, z: -512.3146780764563 }, 20, function () {
                            var floorModels = _this.getFloorModels("m4_");
    
                                });
                            });
                        });

                    });
                });

            });
        });
    }, 2000);
}


//却换到主模型场景
ModelBusiness.prototype.changeToMainModel = function (suncFunc) {
    var _this = this;
    if (_this.currentShow == "mainModel") { return; }
    //渐变消失
    this.deleteMarks("m4_mark_");
    var mainmodels = _this.getFloorModels("m4_");
        var showmodels = [];
        var needVModels = [];
        $.each(mainmodels, function (_index, _obj) {
                needVModels.push(_obj);
        });
        _this.vModels(needVModels, function () {//虚化场景
            _this.hideModels(needVModels, function () {//隐藏场景
                w3DShowObj.commonFunc.changeCameraPosition({ x: -922.1363992414555, y: 8950.677755024317, z: 1045.3150882408095 }, { x: -922.1292538636429, y: 170.32798224199792,  ainModels();
                     _this.showModels(_Models, function () {
                         _this.eModels(_Models, function () {
                              if (suncFunc) {
                                  suncFunc();
                              }
                        });
                    });
                });
            });
        });

    _this.currentShow = "mainModel";
}

ModelBusiness.prototype.f1 = null;
ModelBusiness.prototype.f2 = null;
ModelBusiness.prototype.f0 = null;
ModelBusiness.prototype.currentShowFloor = 0;
ModelBusiness.prototype.currentShowFloorState = 0;
//显示楼层
ModelBuw3DShowObj.commonFunc.findObject("m4_floor_1");
    }
    if (!_this.f2) {
        _this.f2 = w3DShowObj.commonFunc.findObject("m4_floor_2");
    }
    if (!_this.f0) {
        _this.f0 = w3DShowObj.commonFunc.findObject("m4_base");
    }
    var floor1 = _this.f1;
    var floor2 = _this.f2;
  ;
            floor2.visible = true;
            _this.currentShowFloorState = 0;
            _this.currentShowFloor = 0;
            setTimeout(function () {
            _this.showMarks(0,"all");
            }, 100);
        } else if (nub == 1) {
            if (_this.currentShowFloor == 0) {
                var oldy = floor2.position.y;
                var intervalIndex2 = setInterval(function () { floor2.position.y += 100 }, 20);
                setTimeout(function () {
                    clearInterval(intervalIndex2);
                    floor2.visible = false;
                    floor2.position.y = oldy;
                    _this.currentShowFloor = 1;
                    _this.currentShowFloorState = 0;

                    setTimeout(function () {
                        _this.showMarks(1, "all");
                    }, 100);
                }, 2000);
            } else if (_this.currentShowFloor == 2) {
                floor1.visible = true;
                floor0.visible = true;
                var oldy = floor2.position.y;
                var intervalIndex2 = setInterval(function () { floor2.position.y += 100 }, 20);
                setTimeout(function () {
                    clearInterval(intervalIndex2);
                    floor2.visible = false;
                    wFloorState = 0;
                    setTimeout(function () {
                        _this.showMarks(1, "all");
                    }, 100);
                }, 2000);
            } else {
                _this.currentShowFloorState = 0;
                setTimeout(function () {
                    _this.showMarks(1, "all");
                }, 100);
            }
            //m4_floor_1
        } else if (nub == 2) {
            if (_this.currentShowFloor == 0) {
                var old1y = floor1.position.y;
                var old0y = floor0.position.y;
                var intervalIndex2 = setInterval(function () { floor1.position.y -= 100; floor0.position.y -= 100; }, 20);
                setTimeout(function () {
                    clearInterval(intervalIndex2);
                    floor1.visible = false;
                    floor1.position.y = old1y;
                    floor0.visible = false;
                    floor0.position.y = old0y;
                    _this.currentShowFloor =2;
                    _this.currentShowFloorState = 0;
                    setTimeout(function () {
                        _this.showMarks(2, "all");
                    }, 100);
                }, 2000);
            } else if (_this.currentShowFloor == 1){
                floor2.visible = true;
                var old1y = floor1.position.y;
                var old0y = floor0.position.y;
                var intervalIndex2 = setInterval(function () { floor1.position.y -= 100; floor0.position.y -= 100; }, 20);
                setTimeout(function () {
                    clearInterval(intervalIndex2);
                    floor1.visible = false;
                    floor1.position.y = old1y;
                    floor0.visible = false;
                    floor0.position.y = old0y;
                    _this.currentShowFloor = 2;
                    _this.currentShowFloorState = 0;
                    setTimeout(function () {
                        _this.showMarks(2, "all");
                    }, 100);
                }, 2000);
            }else {
                _this.currentShowFloorState = 0;
                setTimeout(function () {
                    _this.showMarks(2, "all");
                }, 100);
            }
        }
    }, 2000);
}
ModelBusiness.prototype.showMarks = function (floornub, markType) {
    var _this = this;
    if (this.markNames && this.markNames.length > 0) {
        $.each(w3DShowObj.scene.children, function (_index, _obj) {
            (function (_obj) {
                if (_this.markNames.indexOf(_obj.name) >= 0) {
                    setTimeout(function () {
                        var modeobj (modeobj);
                    }, 50);
                }
            })(_obj);

        });
        //$.each(_this.markNames, function (_index, _obj) {
        //        (function (_obj) {
        //              setTimeout(function () {
        //                var modeobj = w3DShowObj.commonFunc.findObject(_obj);
        //                if (modeobj) {
        //                    modeobj.visible = false;
        //                }
        //                w3DShowObj.destoryObj(modeobj);
        //             }, 1000 * Math.random());
        //        })(_obj);
        //});
    }
    this.markNames = [];
    var datas1 = this.getMarkData(1);
    var datas2 = this.getMarkData(2);

    var needfloorData = [];
    if (floornub == 0) {
        needfloorData = datas1.concat(datas2);
    } else if (floornub == 1) {
        needfloorData = datas1;
    } else if (floornub == 2) {
        needfloorData = datas2;
    }
    console.log();
    var needShowData = [];
    switch (markType) {
        case "0": 
                    needShowData.push(_obj);
                }
            });
            break;
        case "10":
            $.each(needfloorData, function (_index, _obj) {
                if (_obj.value == 3 || _obj.value == 4) {
                    _obj.markType = "10";
                    needShowData.push(_obj);
                }
            });
            break;
        case "20":
            $.each(needfloorData, function (_index, _obj) {
                if (_obj.value ==5) {
                    _obj.markType = "20";
                    needShowData.push(_obj);
                }
            });
            break;
        case "30":
            $.each(needfloorData, function (_index, _obj) {
                if (_obj.value == 6) {
                    _obj.markType = "30";
                    needShowData.push(_obj);
                }
            });
            break;
        case "all":
            $.each(needfloorData, function (_index, _obj) {
                if (_obj.value == 0 || _obj.value == 1 || _obj.value == 2) {
                    _obj.markType = "0";
                }
                if (_obj.value == 3 || _obj.value == 4) {
                    _obj.markType = "10";
                }
                if (_obj.value == 5) {
                    _obj.markType = "20";
                }
                if (_obj.value == 6) {
                    _obj.markType = "30";
                }
                    needShowData.push(_obj);
            });
            break;
    }

    $.each(needShowData, function (__index, __obj) {
        (function (_index, _obj) {
            setTimeout(function () {
                _this.addMark 
            }, 1000 * Math.random());

        })(__index, __obj);
    });
}
//删除标志
ModelBusiness.prototype.deleteMarks = function (filterStr) {//"m4_mark_"
    setTimeout(function () {
        $.each(w3DShowObj.scene.children, function (_index, _obj) {
            if (_obj && _obj.name && _obj.name.indexOf(filterStr) >= 0) {
                console.log(_obj.name);
                if (_obj) {
                    _obj.visible = false;

                    w3DShowObj.destoryObj(_obj);
                }
            }
        });
    }, 500)
}

ModelBusiness.prototype.getMarkData = function (floornub) {
    var datas = [];
    //模拟数据
    for (i = -1200; i <= 1100; i +=200) {
        for (j = -2960; j <= 2750; j += 400) {
            if (j < 1800 || i <400) {
            datas.push({
                x:j,
                y:floornub == 1 ? -900 : -600,
                z:i,
                value: Math.floor(Math.random() * 10 %7)
            });
            }
        }
    }
    return datas;
}
//显示人数密度
ModelBusiness.prototype.showPNubs = function (nub) {//0 10 20 30
    this.showMarks(this.currentShowFloor, nub + "");
}
//获取整体模型的所有对象
ModelBusiness.prototype.CacheDataMainModels = [];
ModelBusiness.prototype.getMainModels = function () {
    var _this = this;
    var models = [];
    if (_this.CacheDataMainModels.length > 0) {
        models= _this.C );
            }
        });
        _this.CacheDataMainModels = models;
    }
    return models;
}
ModelBusiness.prototype.CacheFloorModels = {};
ModelBusiness.prototype.getFloorModels = function (floorName) {
    var _this = this;
    var models = [];
    if (_this.CacheFloorModels[floorName]) {
        models = _this.CacheFloorModels[floorName];
    } else {
        $.each(w3DShowObj.scene.children, function (_index, _obj) {
            if (_obj.name.indexOf(floorName) >= 0) {
                models.push(_obj);
            }
        });
        _this.CacheFloorModels[floorName] = models;
    }
    return models;
}
ModelBusiness.prototype.intoFloor = function () {
}
/*
///通用方法///
*/
//虚化场景
ModelBusiness.prototype.vModels = function (models, sucFunc) {
    var _this = this;
    if (models) {
        w3DShowObj.commonFunc.changeObjsOpacity(models, 1, 0.05, 1000, function () {
            if (sucFunc) {
                sucFunc();
            }
        });
    }

}
//实体场景
ModelBusiness.prototype.eModels = function (models, sucFunc) {
    var _this = this;
    if (models) {
        $.each(models, function (_index, _obj) {
            _obj.visible = true;
        });
        w3DShowObj.commonFunc.changeObjsOpacity(models, 0.05, 1, 1000, function () {
            if (sucFunc) {
                sucFunc();
            }
        });
    }
}
//隐藏模型
ModelBusiness.prototype.hideModels = function (models, sucFunc) {
    setTimeout(function () {
        $.each(models, function (_index, _obj) {
            _obj.visible = false;
        });
        if (sucFunc) {
            sucFunc();
        }
    }, 50);
}
//显示模型
ModelBusiness.prototype.showModels = function (models, sucFunc) {
    setTimeout(function () {
        $.each(models, function (_index, _obj) {
            _obj.visible = true;
        });
        if (sucFunc) {
            sucFunc();
        }
    }, 50);
}

//add
ModelBusiness.prototype.setHeatMap = function (buildnub, floor, value,suncfunc) {
    var hitMap = null;
     if (buildnub == 0) {//场馆模型添加热力图
        if (floor = 1) {
            if (!this.hiteMapObj["m4_hitmap_f" + floor]) {
            this.createHeatMapModels("m4_hitmap_f" + floor, { x: 0, y: -680, z: 0 },{x:10,y:10,z:1})
            }
           hitMap = this.hiteMapObj["m4_hitmap_f" + floor];
        } else {
            if (!this.hiteMapObj["m4_hitmap_f" + floor]) {
                this.createHeatMapModels("m4_hitmap_f" + floor, { x: 0, y: -980, z: 0 }, { x: 10, y: 10, z: 1 })
            }
            hitMap = this.hiteMapObj["m4_hitmap_f" + floor];
        }
    } else {
         var postion = this.hitMapToABPosition["h" + buildnub];
         var roomname = "m1_room_" + buildnub + "_" + floor;
         if (floor == 0) {
             roomname = "m1_room_" + buildnub ;
         }
         if (!this.hiteMapObj["m1_hitmap_b" + buildnub+"_f" + floor]) {
             this.createHeatMapModels("m1_hitmap_b" + buildnub + "_f" + floor, { x: 0, y: -980, z: 0 }, { x: 2.5, y:2, z: 1 })
         } 
         hitMap.rotation.z = postion.ty / 180 * Math.PI;
    }
     setTimeout(function () {
         console.log(value);
         hitMap.freshData(value);
         if (suncfunc) {
             suncfunc(hitMap);
         }
     }, 100);

}
//位置对应关系
ModelBusiness.prototype.hitMapToABPosition = {
    h1: {
        x: -745,
        y: 5,
        z: -295,
        ty: 0
    },
    h2: {
        x: -745,
        y: 5,
        z: 295,
        ty: 0
    },
    h3: {
        x: -295,
        y: 5,
        z: 745,
        ty:90
    },
    h4: {
        x: 295,
        y:5,
        z:745,
        ty:90
    },
    h5: {
        x: 745,
        y: 5,
        z: 295,
        ty:180
    },
    h6: {
        x: 745,
        y: 5,
        z: -295,
        ty: -90,
        ty: 180
    },
    h7: {
        x: 295,
        y: 5,
        z: -745,
        ty:-90
    },
    h8: {
        x: -295,
        y: 5,
        z: -745,
        ty: -90
    }
}
ModelBusiness.prototype.hiteMapObj = {};
//创建热力图
ModelBusiness.prototype.createHeatMapModels =function(name,postion,scale) {
    var modeljson = {
        show: true,
        name: name,
        showSortNub: 10000,
        id: "",
        objType: "CloudChart",
        size: { x: 600, y: 300, z: 0 },
        position: postion,
        scale: scale,
        rotation: { x: -Math.PI / 2, y: 0, z: 0 },
        pictype: "rectangle", //arc圆 rectangle矩形 triangle三角形
        side: 1,
        opacity: 1,
        maxValue: 45,
        minValue: 0,
        materialType: "basic",
        panelColor: 0x00ffff,
        background: {
            color: 0xffffff,
            size: {
                x: 100, y: 100,//画布大小
                r: 50,//圆半径
                start: 0,
                end: 360,
                angle_r: 10, x1: 0, y1: 0, x2: 100, y2: 100, x3: 100, y3: 0
            },
            imgurl: "",
            type: "arc", //arc圆 rectangle矩形 triangle三角形
            border: {
                color: 0xff0000,
                width: 1
            }
        },
        values: [
            {
                value: 10,
                x: 1,
                y: 1
            },
            {
                value: 30,
                x: 600,
                y: 300
            },
        ],
    };
    this.hiteMapObj[name] = w3DShowObj.InitAddObject(modeljson);
}
//获取热力图数据
ModelBusiness.prototype.gethitMapData = function (buildnub, floor, sucFunc) {
    var datas = []; 
    var maxvalue = 0;
    //模拟数据
    for (i =40; i <600; i +=40) {
        for (j = 20; j <300; j += 20) {
            var value = Math.floor(Math.random() * 40);
            if (value > maxvalue) {
                maxvalue = value;
            }
            if (i < 500 || j < 200) {
                datas.push({
                    x: i,
                    y: j,
                    value: value
                });
            }
        }
    }
    data = {
        max: 45,
        data: datas
    }
    if (sucFunc) {
        sucFunc(data);
    }
    return data;
}



ModelBusiness.prototype.markNames = [];
//添加标记
ModelBusiness.prototype.addMark = function (markName, position, marktype) {
    var bkimg = "";
    var markStr = "";
    var markcolor = { r: 255, g: 255, b: 255 };
    switch (marktype) {
        case "0":
            bkimg = "../../img/3dImg/qp1.png";
            markStr = "0-15";
            markcolor = { r: 0, g: 0, b: 255, "a": 1  };
            break;
        case "10":
            bkimg = "../../img/3dImg/qp2.png";
            markStr = "10-25";
            markcolor = { r: 255, g: 0, b: 0, "a": 1   };
            break;
        case "20":
            bkimg = "../../img/3dImg/qp3.png";
            markStr = "20-35";
            markcolor = { r: 0, g: 100, b: 255, "a": 1  };
            break;
        case "30":
            bkimg = "../../img/3dImg/qp4.png";
            markStr = "30-45";
            markcolor = { r: 255, g: 255, b: 0, "a": 1  };
            break;
    }
    var markjson = [{ "name": markName, "objType": "picIdentification", "size": { "x": 160, "y": 160 }, "position": position, "imgurl": bkimg, "showSortNub": 317, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "name": markName + "_nub", "objType": "makeTextSprite", "textColor": markcolor, "message": markStr, "fontsize": 180, "canvasWidth": 250, "canvasHeight": 250, "position": position, "showSortNub": 318, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }];
    this.markNames.push(markName);
    this.markNames.push(markName + "_nub");
    w3DShowObj.commonFunc.loadModelsByJsons(markjson, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 });
}

//添加连线
ModelBusiness.prototype.addlinesNames = [];

ModelBusiness.prototype.addLinkLine = function (position, lineEndPosition) {
    this.removeLinkLine();
    var timestrik = new Date().getTime();
    var jsons = [{
        "show": true, "uuid": "", "name": "m1_splinecurve_1_" + timestrik, "objType": "SplineCurve", "segments": 2, "points": [{ "x": 0, "y": 0, "z": 0 }, { "x": 0, "y": 250, "z": 100 }, {
            "x": lineEndPosition.x - position.x, "y": lineEndPosition.y - position.y, "z": lineEndPosition.z - position.z
        }], "style": { "skinColor": 717311 }, "LineStyle": "LinePieces", "position": position, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "showSortNub": 59, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": ""
    }, { "show": true, "uuid": "", "name": "m1_cube2_1_" + timestrik, "objType": "cube2", "length": 20, "width": 20, "height": 20, "x": position.x, "y": position.y, "z": position.z, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 717311, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 717311, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 717311, "side": 1, "opacity": 1 }, "skin_behind": { "skinColor": 717311, "side": 1, "opacity": 1 }, "skin_left": { "skinColor": 717311, "side": 1, "opacity": 1 }, "skin_right": { "skinColor": 717311, "side": 1, "opacity": 1 } } }, "showSortNub": 57, "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": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_torus_1_" + timestrik, "objType": "torus", "style": { "skinColor": 717311, "opacity": 1 }, "segments": 16, "radialSegments": 2, "arc": 6.283185307179586, "rotation": [{ "direction": "x", "degree": 1.5707963267948963 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "scale": { "x": 1, "y": 1, "z": 1 }, "position": position, "radius": 40, "tuberadius": 5, "showSortNub": 54, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "phiLength": 6.283185307179586, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_torus_2_" + timestrik, "objType": "torus", "style": { "skinColor": 717311, "opacity": 1 }, "segments": 16, "radialSegments": 2, "arc": 6.283185307179586, "rotation": [{ "direction": "x", "degree": 1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "scale": { "x": 1, "y": 1, "z": 1 }, "position": position, "radius": 80, "tuberadius": 5, "showSortNub": 54, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "phiLength": 6.283185307179586, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m3_torus_3_" + timestrik, "objType": "torus", "style": { "skinColor": 717311, "opacity": 0.8 }, "segments": 16, "radialSegments": 2, "arc": 6.283185307179586, "rotation": [{ "direction": "x", "degree": 1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "scale": { "x": 1, "y": 1, "z": 1 }, "position": position, "radius": 160, "tuberadius": 5, "showSortNub": 54, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "phiLength": 6.283185307179586, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }];
    w3DShowObj.commonFunc.loadModelsByJsons(jsons, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 });
    this.addlinesNames = ["m1_splinecurve_1_" + timestrik, "m1_cube2_1_" + timestrik, "m1_torus_1_" + timestrik, "m1_torus_2_" + timestrik, "m3_torus_3_" + timestrik];
}

ModelBusiness.prototype.removeLinkLine = function () {
    var _this = this;
    if (this.addlinesNames && this.addlinesNames.length && this.addlinesNames.length > 0) {

        $.each(_this.addlinesNames, function (_index, _obj) {
            _obj.visible = false;
            w3DShowObj.destoryObjByName(_obj);
        });
        this.addlinesNames = [];
    }
}
//移动事件
ModelBusiness.prototype.mouseMoveEvent = function () {
    console.log("移动事件");
    console.log(mousedown);
    if (mousedown) {
        console.log("移动事件2");

        modelBusiness.removeLinkLine();
        indexPage.hideDetailBtn();
    }
}

//ModelBusiness.prototype.

var modelBusiness = null;
var indexPage = null;
function getModelBusinessInstance() {
    if (modelBusiness == null) {
        modelBusiness = new ModelBusiness();
        modelBusiness.init();
    }
    return modelBusiness;
}
//两秒后自动创建对象
setTimeout(function () {
    getModelBusinessInstance()
    if (parent) {
        parent.modelBusiness = modelBusiness;
        parent.w3DShowObj = w3DShowObj;
        indexPage = parent.indexPage;
    }
}, 2000);

四、接口对接代码

function ServerAPI() {
    //websocket接口
    this.webSocketUrl = "ws://xxx/monitoring/plaWebSocket";
    this.restFulUrl = "xxx";
    
}
ServerAPI.prototype.startServer = function () {
    var _this = this;
    startWebsocket(_this.webSocketUrl);
}
ServerAPI.prototype.getData = function () {

}



/*
*
*/
//获取获取所有场馆实时数据
ServerAPI.prototype.getAllRoomData = function (room,suncFunc, failFunc) {
    var _this = this;
    var dataurl = _this.restFulUrl + "headMap?room=" + room;
    httpGet(dataurl, function (rs) {
        if (rs) {
            suncFunc(rs.result);
        }
    }, function (err) {
        failFunc(err);
    });
}
//获取场馆的预警值
/*
http://118.24.33.58:8080/monitoring/pla/personNumWarn
参数:url?room={0}
*/
ServerAPI.prototype.getAlarmData = function (room, suncFunc, failFunc) {
    var _this = this;
    var dataurl = _this.restFulUrl + "personNumWarn?room=" + room;
    httpGet(dataurl, function (rs) {
        if (rs) {
            suncFunc(rs.result);
        }
    }, function (err) {
        failFunc(err);
    });
}
/**
 * 历史人流量数据接口
 */


/*
场馆来源地统计接口
*/
/*
性别比例数据查询统计接口
*/
/*
APP排名统计接口
*/
ServerAPI.prototype.getAppData = function (room, suncFunc, failFunc) {
    var _this = this;
    var dataurl = _this.restFulUrl + "personNumWarn?room=" + room;
    httpGet(dataurl, function (rs) {
        if (rs) {
            suncFunc(rs.result);
        }
    }, function (err) {
        failFunc(err);
    });
}
/**
年龄分布接口
*/
ServerAPI.prototype.getAgesData = function (room, starttime,suncFunc, failFunc) {
    var _this = this;
    var dataurl = _this.restFulUrl + "agesStatic?room=" + room + "&startTime=" + starttime;
    httpGet(dataurl, function (rs) {
        if (rs) {
            suncFunc(rs.result);
        }
    }, function (err) {
        failFunc(err);
    });
}
var serverAPI = null;

技术交流邮箱 有不足之处，还望指正：

 

 

 

 

w844916072
关注
专栏目录
ThreeJS热力图
张琳的博客
07-06 1101
ThreeJS热力图欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
threejs-热力图
NCQuan
04-21 2030
1.绘制温度调色板 let createPalette = () => { //颜色条的颜色分布 let colorStops = { 1.0: "#f00", 0.8: "#e2fa00", 0.6: "#33f900", 0.3: "#0349df", 0.0: "#fff" } //颜色条的大小 let width = 256, height = 10 // 创建c
使用ThreeJS画一个房子（附源码）
YC_Deram的博客
03-07 1010
这段代码是一个Vue组件，利用Three.js库创建了一个简单的3D房屋场景，并实现了鼠标控制房屋旋转的功能。这个组件可以被添加到Vue应用中，以显示一个交互式的3D场景。
three.js 通过着色器实现热力图效果
最新发布
09-29 836
three.js 通过着色器实现热力图效果。
three.js 热力图
tianyapai的专栏
03-17 3653
<!DOCTYPE html> <html> <head> <title>Test5</title> <style> canvas { width: 100%; height: 100%; background-color: #00ff00; } </style> <script src...
【Three.js热力点图】
chenyong_1997的博客
07-21 610
Three.js热力点图实现效果1、基本配置2、解析结构3、进行解析核心部分绘制 实现效果 1、基本配置 首先需要配置基本场景、相机、渲染器 import * as THREE from 'three' // 场景 this.scene = new THREE.Scene(); // 正交相机 this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 1, 10000000); this.camera.position.set(0, 0, 5.5)
使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课...
weixin_30682415的博客
09-30 2194
前言： 今年是建国70周年，爱国热情异常的高涨，为自己身在如此安全、蓬勃发展的国家深感自豪。 我们公司楼下为庆祝国庆，拉了这样的标语，每个人做好一件事，就组成了我们强大的祖国。 看到这句话，深有感触，是的，强大的背后离不开我们每个人的奋力拼搏，作为基础研发的我们，我们也认认真真的做好每一次研发，不管成功失败，都是在前进的路上。 序： 今天要讲解的课程是《智慧园区与灯杆三维展示》...
Threejs生成地图板块和城市建筑白模
02-17
Threejs生成地图板块和城市建筑白模
threejs模型可视化编辑器_常见的建筑相关可视化经验之谈
weixin_39609051的博客
11-30 1849
我发现很多朋友在做数据可视化的时候会用到一些建筑模型数据，而且对整个工作流程都不是很明白。这里我谈谈以往的经验：首先明确下平台：承载数据可视化表现的平台目前市面上可以用于做数据可视化的有Unity、Ventus、虚幻4、C4D、AE、PS、CesiumJS、ThreeJS、ThingJS、51WORLD等等分类：仅视觉层面无交互的：PS、C4D、AE可交互需要开发参与的：Unity、Ve...
three.js实现热力图（vue heatmap.js）
yunbabac的博客
04-16 1027
heatmap.js这个库太久没维护了，换别人二开的库@rengr/heatmap.js。使用方式与heatmap.js这个库一样。vue+three.js项目。
基于WebGL的Revit三维建筑模型重建_
11-26
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Three.js模型包
06-23
Three.js模型包,包含各种示例使用模型
three.js制作3d模型工具_制作景观建筑模型需要的材料和工具有哪些？
weixin_39618956的博客
11-02 452
关于模型的制作，rac studio可能就比较有发言权了~毕竟在每一位出国同学的作品集中，都会出现模型~rac studio也开设了这方面非常专业的课程~帮助同学们制作模型~下面 rac studio来回答一下这个问题~制作模型的材料主要有以下几种，但是不局限于这些，只要能表现出自己想要的效果，都可以，哪怕是普通的土壤，树枝，用的巧妙，都可以成为模型材料~全文分为两个部分，模型材料和操作工具！01...
threejs-热力图(shader)
NCQuan
04-21 1296
相比于通过改变imageData的方式，本次将透明度阶梯图和温度调色板图传入着色器，在着色器中进行纹理采样最终生成热力图。 着色器代码很简单，先对透明度阶梯图采样，再根据采样值对温度调色板图采样得到最终片元颜色。 <script type="x-shader/x-vertex" id="vertexshader"> varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * mod
使用Three.js实现热力图（heatMap）的绘制
热门推荐
weixin_42443851的博客
09-25 1万+
在项目开发过程中，需要将每一块区域的温度通过热力图的方式进行呈现，通过在网上查阅一部分资料和学习，想要实现这一技术需要在canvas上进行绘制。首先简单的说一下整体的思路： 1、我们需要每一块区域的温度值和该温度所对应的坐标值，然后对每一个温度位置绘制出辐射圆椭圆，辐射圆的目的是为了获取每一个像素点的透明度的值（0-255），透明度的值越高则该区域的温度越高，对每一个像素点通过透明度的高低进行着色...
ArcGIS pro分割不规则形状的热力图
qq_26034277的博客
04-05 1030
ArcGIS pro分割不规则形状的热力图
threejs 热力图做成材质_ThreeJS 热力图
weixin_39879881的博客
12-29 733
环境ThreeJS 107版本three.min.jsOrbitControls.jsheatmap.min.js说明地球上添加热力图的原理是先生成平面的热力图，绘制在canvas上，再将canvas作为材质贴到地球球体上。可以实现色带配置，以及辐射范围。解决方案创建球的过程参见"ThreeJS制作地球"创建热力图groupvar gHeatmap = new THREE.Group();使用he...
Three.js入门：模型材质设置与WebGL三维图形开发
"Three.js 入门指南 - 有材质的模型 - Word2000VBA一册通" 在Three.js中，模型的材质是非常重要的组成部分，它决定了模型在渲染时的颜色、光照反应以及纹理等视觉效果。本部分将重点讨论如何在Three.js中为模型设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值