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).
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.
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)
@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, } );
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
