Сторінка індивідуального гравіювання Shopify з попереднім переглядом 3D моделі в реальному часі

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

Ключовою вимогою є інтеграція перегляду гравіювання в реальному часі з системою оформлення замовлень Shopify, що дозволяє клієнтам додавати персоналізовані продукти в кошик і проходити через процес замовлення Shopify.

Вимоги до проекту:

1. Кастомна сторінка теми Shopify для гравіювання

• Розробити кастомну сторінку Shopify, інтегровану в нашу тему, присвячену персоналізації продукту Champagne Sabre.
• Сторінка повинна дозволяти користувачам:
  • Вводити кастомний текст для гравіювання (до 40 символів).
  • Вибирати з 3 доступних шрифтів для гравіювання (у нас є шрифти в різних форматах, і їх, можливо, потрібно буде конвертувати в формат .json, сумісний з Three.js).
  • Переглядати гравіювання на лезі саблі в призначеній зоні гравіювання (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 тощо) і їх потрібно конвертувати в формат .json, сумісний з Three.js (використовуючи інструменти, такі як 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 інтеграцією.