Correctly Mapping Canvas texture to Mesh As Scale Change

Hi Fellows,

I’m working on Fabric.js + Three.js project for 3D boxes design, (I do realize this is not a fabric js fourm, I will post this on SO as well, I post here just in case some fellow has experience with the following issue I’m facing).

Example code can be reviewed here:

So the front side texture is loaded from Fabric canvas, however, the canvas 2d shapes showing in the 3D Mesh are not in the correct size, it’s get streched/compressed specially in the top/bottom flips of the Mesh, and it gets more obvious when changing the Mesh scale to something not equal like 20, 20, 10, or when animating (open/close the box)

I do try to change the Fabric canvas dimension to reflect the width/height values of the Mesh, but obviously its not enough, I’m missing something critical here, and I couldn’t find any related reference.

I’ve seen an examples here, it doesn’t tackle my issue. here the Discover Three.js book mentioning that there is a way to manually mapping texture, but the rest of the book is not available any where not even purchased version.

So how can I tell the Mesh to map the canvas texture correctly when changing the mesh size? Or in other words, how can i assign the correct width/height of the canvas to the correct face of the mesh according to x,y,z values? I need the Fabric shapes to be the same size in the middle, top flip, and bottom flip parts of the 3d Box Model.

Any help is much apprecieted.

1 Like

Same issue here. Very confused. Any help will be really appreciated:

I went to discord to ask but there is no reply yet. Here is the chat history:

Hello - I have an issue with textures and I any help would really be appreciated.

[ 11:05 PM ]

Here is my issue:

[ 11:06 PM ]

Original image used for texture of a cube (1024*1024)

[ 11:06 PM ]

Using Orbit Controls, when I Zoom In and Out:

[ 11:07 PM ]

Zoomed out

[ 11:07 PM ]

Zoomed In

[ 11:08 PM ]

As you can see, the image is not stuck to the cube / scaling with the cube. The cube is just acting as a frame to show the image. That is not what I want (also, the image is distorted, which is not good)

[ 11:10 PM ]

What I want is a (2d for now) annotatable floor plan. It should ideally be able to be scrolled around, zoomed in, etc. The annotated objects should ‘float’ on top of the floor plan. It is a indoor localisation (indoor gps) project. Am I using the wrong tools? I have tried setting “sizeAttenuation:false,” Here is my full code, in case it helps.(edited)

[ 11:12 PM ]

Full code (in one single html file)(edited)

Attachment file type: document


@aldabil21Solved! Mike from slack helped me out! Thanks so much Mike!
His reply was to basically declare the texture in
var material = new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load('./ParkAvenueFloorPlan10241024.png'), //map:texture, //sizeAttenuation:false, } );

instead of envMap: a bunch of images

Glad you sort it out.
Quite sure its not a same issue here, also i noiced you make an infinite http request loop, page went dead once i opened your code, perhaps you may want to look into that as well

Good luck.