why memory cost too much than three.js?and how to improve performance?

[luojiandan]

Hi @jscastro76 ,
Thank you for maintaining this plugin.
when I add the same model to the map for 100 times by threebox.js,the memory cost 2GB.and set the number to 500,the browser crash
but add the same model to the map for 5000 times by three.js,the memory cost 162M.
Why is the gap so large and how can I improve performance?

**model file format:**glb
**model size:**4M

three.js:
memory cost 162M

threebox.js:

          //the options setting 
          let options = {
            type: "gltf", //'gltf'/'mtl'            
            obj: "./model/Freighter.glb",  //model file path
            bin: "", //replace by mtl attribute
            units: "meters", //units in the default values are always in meters
            scale: 30, //boat size
            rotation: { x: 90, y: 180, z: 0 }, //default rotation
            anchor: "center",
            customProperties: {
              clicked: false,
            },
          };

way 1:

way 2(duplicate):

Am I in the right way or there another way?
thanks again:)

[luojiandan]

I read doc,you suggested that use obj.duplicate() when adding many identical objects. Performance considerations
but I don't know where to use?my code only get one model on map.it looks like that I'm using it in the wrong place.
can you tell me where to use?

          let i=1;
          tb.loadObj(options, function (model) {
            mdl = model.duplicate();  //use duplicate
            console.log("loop begin");
            origin.forEach((el) => {              
              mdl.setCoords(el).addTooltip("Boat", false);
              console.log("clone times "+i, mdl);
              tb.add(mdl);
              i++;
            });
            console.log("loop end");
          });

the console log is ok:

but I just get one model in map:

[luojiandan]

@jscastro76
I use this is ok!

          var origin = new Array();
          for (let index = 0; index < 100; index++) {
            var coordinates = new Array(2);
            coordinates[0] = Math.random() * (119.287 - 117.335) + 117.335;
            coordinates[1] = Math.random() * (39.413 - 38.488) + 38.488;

            origin.push(coordinates);
          }
          
          let i=1;
          tb.loadObj(options, function (model) {                     
            console.log("loop begin");
            origin.forEach((el) => {                            
              let mdl=model.duplicate().setCoords(el);  //use this type is ok!
              mdl.addTooltip("Boat", false);//.addLabel("<h1>Hello World!</h1>");//  addTooltip("Boat", false);
              console.log("clone times "+i, mdl.coordinates);
              tb.add(mdl);
              i++;
            });
            console.log("loop end");
          });
        },

[jscastro76]

Since a few days ago I see your issues reported, thanks for your interest in the project, but let me clarify some basic rules to have a healthy and structured interaction if you pretend to receive help.
With partial parts of code and shifting from one topic to another in every issue is hard to follow what you are trying to describe.
Please, keep an order in each issue on and don't mix topics in a single issue, my time, as yours I guess, is limited and this is an open source project under MIT license, so don´t consider this a support service desktop. Otherwise I'll be forced to ignore and close the issues you open.

Having said so, first you mentioned you use three.js to add 5000 objects, please share the sample code you are using in comparison to the sample code of threebox, without that is impossible I can help you with it.

Second, I see you found the right way to clone objects with duplicate(), which was open in other issue too, good. But did that solved your memory issue?

[jscastro76]

@luojiandan check out the new v.2.0.6 as it includes an important change in loadObj method. Now is not anymore needed to clone explicitly 3D loaded models as loadObj method manages it automatically through the internal cache.
I have added a new example that shows how to create 1000 objects in miliseconds.