THREE.js - Texture mapping requirements

0
votes

Intro

I have a web service that returns a json result that contains an image path. These images are not necessarily square images (e.g. 200px x 250px).

Problem

It seems non-square images are not supported for texture mapping. In order for the texture mapping to work I have to manually download the image, resize it, and use that image for the texture mapping (and it works).

Questions

A) Could there be a way to make three.js/webgl use non-square images for texture mapping?

B) Could there be a way to programmatically load & resize an image and subsequently load it for texture mapping?

Thanks all.

Possible Solution?

I found what could be a viable option. Let me know what you guys think of this.

Basically, I will load the remote image and draw to a Canvas element which is square in size. Then I can get the image from the canvas (.getImageData) and save it to my web server's image folder (if this cant be done then I can just keep the image on the canvas). Finally, load the image for texture mapping.

I know this is pretty vague and simplistic. But hey, simpler the better, right? Will this work?

1
three.jstexture-mapping
three.js does support non square textures with no special treatment: jsfiddle.net/greggman/MZpx8 - gaitat
@gaitat. I don't understand. this example uses a .jpg which is a square. - AlvinfromDiaspar
no its not a square; its size is 1280x1202 - gaitat

1 Answers

1
votes

DON'T resize it in a non-conformal manner, just take a square section (e.g., if the image is 250 X 220, just chop out a 220 X 220 sub-image). The texture classification algorithm may very well depend upon angles and related features that your skew-by-resize may short-circuit.