Custom Shopify Engraving Page with Live 3D Model Preview

We are looking for an experienced developer with expertise in Shopify, 3D modeling (using Three.js or similar libraries), and custom font integration to help us create a custom engraving feature for a Champagne Sabre product. The main goal of the project is to allow users to personalize the sabre by adding custom text engraving, selecting from three different font options, and live-previewing the engraving on a 3D model of the sabre.

The key requirement is to integrate the live engraving preview with Shopify’s checkout system, enabling customers to add personalized products to the cart and proceed through the Shopify order process.

Project Requirements:

1. Custom Shopify Theme Page for Engraving

• Develop a custom Shopify page integrated within our theme, dedicated to personalizing the Champagne Sabre product.
• The page should allow users to:
  • Enter custom text for engraving (up to 40 characters).
  • Choose from 3 available fonts for engraving (we have fonts in various formats and may need to convert them to Three.js compatible .json format).
  • Preview engraving on the sabre’s blade in a designated engraving area (180mm x 20mm) via a 3D model viewer. (We are currently using the "Prestige" Shopify theme. The custom engraving page should seamlessly integrate with the overall design and layout of the theme)

2. 3D Model Integration & Engraving Preview

• 3D Model of the Champagne Sabre:
  • The 3D model is already hosted on AWS (Amazon S3), and we need to integrate it into the Shopify page.
  • The model will allow for zoom, rotation, and pan (using Three.js or similar).
  • Implement text rendering on the 3D model that shows the live preview of the engraving centered on the blade, using one of the selected fonts.
  • Fonts need to be converted into Three.js-readable geometric fonts (e.g., in .json format) and applied onto the 3D model in real-time based on user input.

3. Font Integration

• We have the fonts (currently in .woff, .woff2, .ttf, etc.) and need them converted to a Three.js compatible .json format (using tools such as Facetype.js or others).
• Geometric Font Rendering:
  • The text should be geometrically rendered (not as an image) and must align perfectly within the engraving area of the blade.
  • Ensure proper scaling, rotation, and alignment of the text.
  • Allow easy swapping between the 3 font options while preserving the live preview functionality.

4. Product Customization and Cart Integration

• Once the user finalizes their text engraving and font choice, the personalized product should be added to the cart.
• Shopify Product Integration:
  • The custom engraving text and selected font should be sent to Shopify’s cart, and passed through the order process.
  • Custom attributes (e.g., engraving text, font) should appear in the Shopify order, ensuring they are visible in the order details for fulfillment. 

5. Quality & Testing

• Test the page for usability and performance, ensuring smooth real-time preview and cart integration.
• The page should be responsive and work seamlessly on desktop, tablet, and mobile devices.

Technical Requirements:

• Languages & Frameworks:
  • Strong experience in JavaScript (specifically Three.js) and Shopify Liquid for custom theme development.
  • Familiarity with HTML5, CSS3, and Shopify APIs.
• 3D Modeling:
  • Expertise in rendering 3D models using Three.js or other WebGL libraries.
  • Experience working with fonts and geometric text in Three.js (converting and using custom fonts).
• AWS S3 Integration:
  • Ability to integrate and load the 3D model from Amazon S3.
• Shopify Integration:
  • Deep understanding of Shopify's customization, product, and cart integration.
  • Ability to handle Shopify checkout process customization, especially for personalized products.

Expected Deliverables:

1. Fully functional custom Shopify page for the Champagne Sabre product, allowing for engraving personalization with live 3D preview.
2. Fonts converted to compatible formats for geometric rendering on a 3D model using Three.js.
3. Complete integration of product customization with Shopify’s cart and checkout process.
4. Finalized page design that is responsive and user-friendly across all devices.
5. Testing and debugging to ensure seamless performance.

Project Timeline

• We are looking for a developer who can complete this task within next 3-4 days. Please provide examples of past similar projects with custom 3D integration