Couldn't create Texture from resized DOM Image

Describe the bug If the DOM image is resized with CSS, like: width: 10%, and you try to create texture with THREE.Texture(DOM_ELEMENT) class, that will result in: GL ERROR :GL_INVALID_VALUE : glTexSubImage2D: bad dimensions. The behaviour appears since v135. It is not present in v134.

To Reproduce

Steps to reproduce the behavior:

1. Create a DOM image in HTML
2. Resize it with CSS: img{width: 10%}
3. Create a texture from image with THREE.Texture(DomElement) class
4. Use texture on any material
5. You will get: GL ERROR :GL_INVALID_VALUE : glTexSubImage2D: bad dimensions. in latest Chrome.

Code

  let material = new THREE.MeshBasicMaterial();
  let img = document.querySelector('img')
  let texture = new THREE.Texture(img)
  texture.needsUpdate = true;
  material.map = texture;
  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

Live example

• ~jsfiddle-latest-release (forgot to set display:block here, hence new demo)~
• bug

Expected behavior

To see sphere with kitten texture.

Screenshots

This is the expected result of demo.

Platform:

• Device: Desktop
• OS: MacOs
• Browser: Chrome
• Three.js version: r136

[akella]

Yeah, so, instead of

let texture = new THREE.Texture(DOM_IMG)

I used this workaround:

let image = new Image();
image.src = DOM_IMG.src;
let texture = new THREE.Texture(image);

also in one case this:

let CLONED_IMAGE = DOM_IMG.cloneNode(true); // this helped when i set image width in JS
let texture = new THREE.Texture(CLONED_IMAGE);

But of course, would be perfect to fix issue, to not do this. Or is it best practice now to clone everything from DOM before converting it to texture? 🤔

[akella]

could asking other developers on discord be a way to make up a decision? For me as one of three.js dev-users it is obvious that i expect three.js to disregard any CSS, when i convert DOM element to WebGL Texture. And my hypothesis is its like that for 99% people. Because those are two different mental models/concepts/coordinate-systems, and i dont want them to interfere.

What are the possible drawbacks of using naturalWidth here?