Aframe maxCanvasWidth

test case for maxCanvasWidth & Height

by s_light

HTML

<script src="https://cdn.jsdelivr.net/gh/s-light/aframe@fix_maxCanvas_embedded/dist/aframe-master.js"></script>
<html>
  <head>
    <title>Aframe Test: maxCanvasSize with Fix </title>
  </head>
  <body>
    <a-scene
      stats
      embedded
      shadow="type: pcfsoft; autoUpdate: true;"
        renderer="
            antialias: true;
            colorManagement: true;
            physicallyCorrectLights: true;
            maxCanvasWidth: 512;
            maxCanvasHeight: 512;
            "
    >
      <a-box 
      position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"
        animation__y="property: object3D.rotation.y; to: 360; dur: 30000; easing: linear; loop: true"
      ></a-box>
      
      <a-box 
      position="1 0.5 -3" rotation="0 45 0" color="#4CC3D9"
        animation__y="property: object3D.rotation.y; to: 360; dur: 30000; easing: linear; loop: true"
      ></a-box>
      
      
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      
      
      <a-entity
            id="light_ambient"
            light="
                type: ambient;
                intensity: 1.0
            "
        ></a-entity>
        <a-entity
            id="light_sun"
            light="
                type: directional;
                intensity: 2;
                castShadow: true;
                shadowBias: -0.0004;

                shadowMapHeight: 4096;
                shadowMapWidth: 4096;

                shadowCameraNear: 0;
                shadowCameraFar: 50;
                shadowCameraFov: 102;

                shadowCameraBottom: 12;
                shadowCameraTop: -5;
                shadowCameraRight: 10;
                shadowCameraLeft: -10;

                shadowRadius: 2
            "
            position="4 10 10"
        ></a-entity>
      
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

CSS

html, 
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

a-scene {
  width: 100%;
  height: 100%;
}