Importing too many gltf & obj files, browser crashing

Questions
,
1

I’m creating an environment - r87.
5000 by 5000 ground plane, a few scattered obj.

Using Pointer Lock Controls for the navigation system like the threejs.org example.

I am importing 60+ obj with vertex colors, about 3 MB each, that rain from the sky, hit the ground plane and then reset to a point 3000 up the z axis and continue to rain down.

var faceLoader = new THREE.OBJVertexColorLoader(manager);

      for (let i = 0;  i < 62; i++) {
        faceLoad(i+1);
      }

      //function for loading faces
      function faceLoad(index) {
        faceLoader.load('eye_roll_assets/eye-roll' + index + '.obj', function (object) {
        // loader.load('face_assets/quarter.obj', function (object) {
          object.children[0].material.side = THREE.DoubleSide;
          // object.translateX(196);
          // object.translateY(196);
          // object.translateZ(130);

          object.position.x = getRandomInt(-2000, 2000);
          object.position.y = getRandomInt(15, 3000);
          object.position.z = getRandomInt(-2000, 2000);

          object.rotation.x = -90;
          object.rotation.y = 180;
          object.scale.set(0.5, 0.5, 0.5);

          object.name = 'face';

          // console.log('face', object);

          scene.add(object);
          objects.push(object);

        }, onProgress, function () {});

      }

I am also building a fence around the ground plane out of gltf files, about 15MB each. Each side will need 78 of the gltf files.

    function buildFenceSide(start, rotation, stepX, stepY, stepZ) {
          let url;
          let connector = true;
          let placeX = start.x;
          let placeY = start.y;
          let placeZ = start.z;
          
          for (let i = 0; i < 77; i++) {
            if (connector === true) {
              url = sceneInfoFence.url;
            }else{
              url = sceneInfoFence2.url;
            }

            fenceLoader.load(url, function(fenceObj) {
              
              let panel = fenceObj.scene; 
              panel.scale.set(10, 10, 10);
              panel.position.set(placeX, placeY, placeZ);
              panel.rotation.y = Math.PI / rotation;

              scene.add(panel);

              placeX += stepX;
              placeZ += stepZ;
              connector = !connector;
            });
          
          }
        }

I am wondering about how to optimize this because building just one side of the fence is crashing my browser. It crashes when I navigate to the view of the built fence. Is this a raycaster issue?

Is it even possible to optimize?

Any general or specific suggestions would be helpful.

thanks.

2

You are attempting to load 60 * 3 + 78 * 15 = ~ 1.3 gb of assets.

That’s just not going to work. Even a 100mb is probably pushing it, especially if you are expecting anybody to use your page over the web. You’ll have to come up with a different idea for your scene, maybe just create a couple of eye model and reuse them, and a couple of fence sections.

Also, reduce the size of your assets. Why does a fence section need to be 15mb?

3

oh. right. working in the browser isn’t like working in unity.
And I have no idea why the fence section file size is so large, that was the size after I converted the mesh files to gtlf. I will revisit.

thanks!