Кастомная страница гравировки Shopify с предварительным просмотром 3D модели в реальном времени

Мы ищем опытного разработчика с экспертизой в Shopify, 3D моделировании (с использованием Three.js или аналогичных библиотек) и интеграции пользовательских шрифтов, чтобы помочь нам создать функцию индивидуальной гравировки для продукта Champagne Sabre. Основная цель проекта - позволить пользователям персонализировать саблю, добавляя индивидуальный текст гравировки, выбирая из трех различных вариантов шрифтов и предварительно просматривая гравировку на 3D модели сабли.

Ключевое требование - интегрировать предварительный просмотр гравировки с системой оформления заказов Shopify, позволяя клиентам добавлять персонализированные продукты в корзину и проходить через процесс оформления заказа Shopify.

Требования к проекту:

1. Пользовательская страница темы Shopify для гравировки

• Разработать пользовательскую страницу Shopify, интегрированную в нашу тему, посвященную персонализации продукта Champagne Sabre.
• Страница должна позволять пользователям:
  • Вводить индивидуальный текст для гравировки (до 40 символов).
  • Выбирать из 3 доступных шрифтов для гравировки (у нас есть шрифты в различных форматах, и их может потребоваться конвертировать в совместимый с Three.js .json формат).
  • Предварительно просматривать гравировку на лезвии сабли в определенной области гравировки (180 мм x 20 мм) через просмотрщик 3D модели. (В настоящее время мы используем "Prestige" тему Shopify. Страница индивидуальной гравировки должна бесшовно интегрироваться в общий дизайн и макет темы)

2. Интеграция 3D модели и предварительный просмотр гравировки

• 3D модель Champagne Sabre:
  • 3D модель уже размещена на AWS (Amazon S3), и нам нужно интегрировать ее на страницу Shopify.
  • Модель должна позволять масштабирование, вращение и панорамирование (с использованием Three.js или аналогичного).
  • Реализовать рендеринг текста на 3D модели, который показывает предварительный просмотр гравировки, центрированной на лезвии, с использованием одного из выбранных шрифтов.
  • Шрифты необходимо конвертировать в геометрические шрифты, читаемые Three.js (например, в .json формате) и применять к 3D модели в реальном времени на основе ввода пользователя.

3. Интеграция шрифтов

• У нас есть шрифты (в настоящее время в .woff, .woff2, .ttf и т.д.) и их необходимо конвертировать в совместимый с Three.js .json формат (с использованием таких инструментов, как Facetype.js или других).
• Геометрический рендеринг шрифтов:
  • Текст должен быть геометрически отрендерен (не как изображение) и должен идеально соответствовать области гравировки на лезвии.
  • Обеспечить правильное масштабирование, вращение и выравнивание текста.
  • Позволить легкую замену между 3 вариантами шрифтов, сохраняя функциональность предварительного просмотра в реальном времени.

4. Персонализация продукта и интеграция корзины

• После того, как пользователь завершит свой текст гравировки и выбор шрифта, персонализированный продукт должен быть добавлен в корзину.
• Интеграция продукта Shopify:
  • Индивидуальный текст гравировки и выбранный шрифт должны быть отправлены в корзину Shopify и пройти через процесс оформления заказа.
  • Индивидуальные атрибуты (например, текст гравировки, шрифт) должны отображаться в заказе Shopify, обеспечивая их видимость в деталях заказа для выполнения. 

5. Качество и тестирование

• Проверить страницу на удобство использования и производительность, обеспечивая плавный предварительный просмотр в реальном времени и интеграцию корзины.
• Страница должна быть адаптивной и работать безупречно на настольных, планшетных и мобильных устройствах.

Технические требования:

• Языки и фреймворки:
  • Сильный опыт в JavaScript (в частности, Three.js) и Shopify Liquid для разработки пользовательских тем.
  • Знание HTML5, CSS3 и Shopify APIs.
• 3D моделирование:
  • Экспертиза в рендеринге 3D моделей с использованием Three.js или других библиотек WebGL.
  • Опыт работы с шрифтами и геометрическим текстом в Three.js (конвертация и использование пользовательских шрифтов).
• Интеграция AWS S3:
  • Способность интегрировать и загружать 3D модель из Amazon S3.
• Интеграция Shopify:
  • Глубокое понимание кастомизации Shopify, интеграции продуктов и корзины.
  • Способность обрабатывать кастомизацию процесса оформления заказа Shopify, особенно для персонализированных продуктов.

Ожидаемые результаты:

1. Полностью функциональная пользовательская страница Shopify для продукта Champagne Sabre, позволяющая персонализацию гравировки с живым 3D предварительным просмотром.
2. Шрифты, конвертированные в совместимые форматы для геометрического рендеринга на 3D модели с использованием Three.js.
3. Полная интеграция персонализации продукта с корзиной и процессом оформления заказа Shopify.
4. Завершенный дизайн страницы, который является адаптивным и удобным для пользователей на всех устройствах.
5. Тестирование и отладка для обеспечения бесперебойной работы.

Сроки проекта

• Мы ищем разработчика, который сможет завершить эту задачу в течение следующих 3-4 дней. Пожалуйста, предоставьте примеры прошлых аналогичных проектов с индивидуальной 3D интеграцией.