I’m building an application where users can load and reload different 3d model floor plans.
But once i load and reload multiple floor plans the browser starts to get very laggy and slow.
You can see the slowness here (http://exkuisite.surge.sh/home/sample-home1-floor-1) as you load homes multiple times from drop down.
I must be doing something silly in terms of clean up or something else. Can someone guide me where I’m fucking up ?
The script that does the loading/reloading of floor plan is below. It does that whenever it gets a window message from parent iframe. To simulate passing message to reload home, you can try typing this on console.
window.postMessage({
home_model_url: 'https://d2dt6s2a3h81n8.cloudfront.net/lighted-house/lighted-house.json',
floorHeight: 0.4
}, "*");
and then load a different home
window.postMessage({
home_model_url: 'https://d2dt6s2a3h81n8.cloudfront.net/simple-white-house/simple-white-house.json',
floorHeight: 0.4
}, "*");
The code that does the load/unload is the file loadFloorPlan pasted below for easy reference
var LoadFloorPlan = pc.createScript('loadFloorPlan');
// LoadFloorPlan.URL = 'https://d2dt6s2a3h81n8.cloudfront.net/sample-home1-floor-1/home2.json';
// LoadFloorPlan.URL = 'https://d2dt6s2a3h81n8.cloudfront.net/simple-white-house/simple-white-house.json';
// LoadFloorPlan.URL = 'https://d2dt6s2a3h81n8.cloudfront.net/lighted-house/lighted-house.json';
LoadFloorPlan.prototype.initialize = function() {
var that = this;
window.addEventListener("message", function (event) {
if ((event.origin === 'http://localhost:3000') && event.data.home_model_url !== undefined) {
that.loadHome(event.data);
that.setPlaneCollisionGeometry(event.data);
}
}, false);
window.parent.postMessage("PLAYCANVAS_LOADED",'*');
};
LoadFloorPlan.prototype.loadHome = function(home){
if(this.app.root.findByName('floorPlan')){
this.app.root.findByName('floorPlan').destroy();
}
var floorPlanEntity = new pc.Entity('floorPlan');
floorPlanEntity.addComponent("model");
var url = home.home_model_url;
var assetFromUrl = this.app.assets.getByUrl(url);
if(assetFromUrl !== undefined){
floorPlanEntity.model.model = assetFromUrl.resource;
floorPlanEntity.addComponent("rigidbody", { type: "static", restitution: 1, friction: 0.5 });
floorPlanEntity.addComponent("collision", { type: 'mesh', asset: assetFromUrl, model: assetFromUrl});
} else
{
this.app.assets.loadFromUrl(url, "model", function (err, asset) {
floorPlanEntity.model.model = asset.resource;
floorPlanEntity.addComponent("rigidbody", { type: "static", restitution: 1, friction: 0.5 });
floorPlanEntity.addComponent("collision", { type: 'mesh', asset: asset, model: asset});
});
}
this.app.root.addChild(floorPlanEntity);
};
LoadFloorPlan.prototype.setPlaneCollisionGeometry = function(home){
if(home.floorHeight){
this.app.root.findByName('plane').removeComponent('collision');
this.app.root.findByName('plane').addComponent('collision', {
type: "box",
halfExtents: new pc.Vec3(30, 0.5 + home.floorHeight, 30)
});
}
};
Project here: https://playcanvas.com/project/554828/overview/exkuisite2
