Issue with envMap in A-Frame 1.6.0 when using a-cubemap

Hi,

I’m encountering an issue after updating my A-Frame version from 1.5.0 to 1.6.0, specifically related to the envMap attribute. In my project, I use the a-cubemap component, and I dynamically manage the envMap based on data received from the server.

When I try to apply the envMap to an asset using the following line: el.setAttribute('material', 'envMap: #worldenvmap');

I receive the following error:

three.module.js:16447 Uncaught TypeError: Cannot read properties of undefined (reading 'width')
    at Ho._fromTexture (three.module.js:16447:108)
    at Ho.fromCubemap (three.module.js:16362:15)
    at Object.get (three.module.js:17173:102)
    at three.module.js:30947:79
    at ac.renderBufferDirect (three.module.js:29926:20)
    at qe (three.module.js:30781:11)
    at We (three.module.js:30750:6)
    at Ve (three.module.js:30602:36)
    at ac.render (three.module.js:30413:5)
    at v.render (a-scene.js:783:14)

Upon inspecting the code at line 16447 in three.module.js, I noticed that the issue seems to be related to this line: this._setSize( texture.image.length === 0 ? 16 : ( texture.image[ 0 ].width || texture.image[ 0 ].image.width ) );

However, in my case, the correct path to the width property appears to be texture.image[0].data.width.

This issue can be reproduced using the following link: https://husky-marvelous-challenge.glitch.me/

code from glitch (this is not actual project code)


<html>
  <head>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets id="sceneassets"></a-assets>
      <a-box id="box" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder
        position="1 0.75 -3"
        radius="0.5"
        height="1.5"
        color="#FFC65D"
      ></a-cylinder>
      <a-plane
        position="0 0 -4"
        rotation="-90 0 0"
        width="4"
        height="4"
        color="#7BC8A4"
      ></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
    <script>
      initEnvironmentMap();
      setTimeout(applyEnvMap, 3000);  // because of waiting some other data
      function applyEnvMap() {
        let el = document.getElementById("box");
        el.setAttribute('material', 'envMap: #worldenvmap');
      }
      function initEnvironmentMap() {
        let worldUp = 'y';  // 
        const envmap = document.createElement('a-cubemap');
        envmap.setAttribute('id', 'worldenvmap');

      let textureArray;
        switch (worldUp) {
        default:
        case 'y':
          textureArray = ['https://cdn.glitch.global/748da9ca-3bd1-4be3-a83f-f66d2ac1c11b/envYup00.jpg?v=1723458446206', 'https://cdn.glitch.global/748da9ca-3bd1-4be3-a83f-f66d2ac1c11b/envYup01.jpg?v=1723458459521', 'https://cdn.glitch.global/748da9ca-3bd1-4be3-a83f-f66d2ac1c11b/envYup02.jpg?v=1723458465139', 'https://cdn.glitch.global/748da9ca-3bd1-4be3-a83f-f66d2ac1c11b/envYup03.jpg?v=1723458479504', 'https://cdn.glitch.global/748da9ca-3bd1-4be3-a83f-f66d2ac1c11b/envYup04.jpg?v=1723458484504', 'https://cdn.glitch.global/748da9ca-3bd1-4be3-a83f-f66d2ac1c11b/envYup05.jpg?v=1723458489507'];
          break;
        case 'z':
          textureArray = ['https://cdn.glitch.global/748da9ca-3bd1-4be3-a83f-f66d2ac1c11b/envYup00.jpg?v=1723458446206', 'https://cdn.glitch.global/748da9ca-3bd1-4be3-a83f-f66d2ac1c11b/envYup01.jpg?v=1723458459521', 'https://cdn.glitch.global/748da9ca-3bd1-4be3-a83f-f66d2ac1c11b/envYup02.jpg?v=1723458465139', 'https://cdn.glitch.global/748da9ca-3bd1-4be3-a83f-f66d2ac1c11b/envYup03.jpg?v=1723458479504', 'https://cdn.glitch.global/748da9ca-3bd1-4be3-a83f-f66d2ac1c11b/envYup04.jpg?v=1723458484504', 'https://cdn.glitch.global/748da9ca-3bd1-4be3-a83f-f66d2ac1c11b/envYup05.jpg?v=1723458489507'];
          break;
        }
        appendEnvMapNodes(envmap, textureArray);

        const assetsection = document.getElementById('sceneassets');
        assetsection.append(envmap);
      }
      function appendEnvMapNodes(parent, images) {
        for (let i = 0; i < 6; ++i) {
          const img = document.createElement('img');
          img.setAttribute('crossOrigin', 'anonymous');
          img.setAttribute('src', images[i]);
          parent.append(img);
        }
      }
    </script>
  </body>
</html>

Please let me know if i am missing something with A-frame 1.6.0.

Thanks;

Screenshot 2024-08-12 at 12 08 20

A-Frame Version: 1.6.0
Platform / Device: All platforms and devices
Reproducible Code Snippet or URL: https://husky-marvelous-challenge.glitch.me/

aframevr / aframe

Issue with envMap in A-Frame 1.6.0 when using a-cubemap #5562