model-viewer-cache-size

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Independent</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>


<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>  

<script src="https://unpkg.com/focus-visible@5.1.0/dist/focus-visible.js"></script>

	<script>

    var assetIndex = 0;

    function checkP() {

		  console.log( "Elements", customElements);

      var viewer = customElements.get("model-viewer");

		  console.log("Found comp", viewer);

      if(viewer) {

        console.log("Getting size", viewer.modelCacheSize);
        viewer.modelCacheSize = 0;
        console.log("Setting cache size", viewer.modelCacheSize);
      }
    }

    function cHan() {

      if( !document.getElementById("modelV") ) {

        if( assetIndex == 6 ) {
          alert("Run out of assets");
          return
        }

        console.log("ADDING")
        
        var link = "https://hark-public-temp.s3.eu-west-3.amazonaws.com/corset"+assetIndex+".glb";

        var div = document.createElement("div");
        div.id = "modelV";
        div.innerHTML = '<model-viewer  style="width: 1024px;height: 786px" src="'+link+'" camera-controls auto-rotate loading="eager" modelCacheSize="0"></model-viewer>';
        document.body.appendChild(div);

        assetIndex++;

        document.getElementById("count").innerHTML = "Asset Load Count: " + assetIndex;
      }
      else {

        var myobj = document.getElementById("modelV");
        myobj.remove();
      }
    }

    //Wait for the init of the model viewer
    setTimeout( () => checkP(), 1000 );
    
	</script>

  <button onClick="cHan()">Toggle Model Visibility</button>
  <button onClick="checkP()">Check Params</button>
  <p id="count">Asset Load Count: 0</p>

</body>
</html>

/* Add your styles here */

// Add your code here