Implement Javascript (three.js) 3D for web

We have a website where customers can upload their photo, and we print it on a physical canvas and send it to them. We want to offer the ability to preview that canvas in 3D within the browser before they buy it. We are looking for you to implement the front-end of that in a modular format so that one of our engineers can plug it into our website. User story (full experience we are going to implement) - When a user has selected the 11x14 standard width product and uploaded a photo, the 3D View button will appear - When the 3D view button is clicked, the user's photo will be applied to the OBJ canvas model (front and side surfaces, but not back) and displayed in a modal window - The 3D preview should use either the portrait or landscape 3D model, depending on which way the customer's photo is oriented in the crop window - The model should be rotated slightly in all 3 axes to show some depth by default. See mockup (attached) - When the user clicks and drags (mouse or finger), the model be able to be rotated in the z axis only - rotating from front to back Requirements for you, the freelancer, to implement. We're open to discussion on changes to this if you feel something else makes more sense: 1. Implement a JS function that takes the following inputs: Image (in dataurl format - this is how we store it in the browser after upload) - image will be one of the following dimensions: Landscape: 2400x1950 Portrait: 1950x2400 - URL of OBJ model to use (11x14 portrait or landscape) - DOM element 2. JS function will apply the image to the model, and insert the appropriate HTML into the provided DOM element. 3. Use [login to view URL] or propose a new library and reason for using that one instead 4. Implement a demo that shows all of the above working properly, only for demo purposes. For the image, either allow the user to select an image from their computer that will get loaded into the dataurl object, or input a URL of an image hosted somewhere. We have other files