Hello Everyone, I am new to three.js and I want to create a tajine customization app (earthenware plate+lid), so far I got the basics where the user can choose the size apply texture, etc. But I have came across an issue where I have no idea what I am supposed to do so that the user can upload a 2d image and then have it appear “Plastered” on the model where they can adjust it’s size rotation and move it, I am using angular not react as I am familiar with the former and this is the best example of what I want to implement look like.
Except here you are limited on where you can move it, I don’t know if what I have in mind is remotely even feasable I hope someone can atleast just tell me so that I don’t waste time on this.
Hello,
Yes, it’s feasible to create a tajine customization app in three.js where users can upload a 2D image and adjust its size, rotation, and HP Instant Ink Login position on a 3D model. You can achieve this by:
Loading the 3D Model: Use GLTFLoader to load your tajine model.
Creating a Canvas for the Image: Allow users to upload and manipulate the image on an HTML canvas.
Applying the Image as a Texture: Convert the canvas to a texture and apply it to the model using decals.
Implementing Controls: Use TransformControls to enable users to adjust the image’s position, rotation, and scale.
For a detailed example, refer to the [three.js documentation] and the [example on image alignment via decals].