> Для AI-агентів: це Markdown-версія сторінки https://figmatica.com/uk/blog/three-js-product-configurator-manufacturing. Повний індекс сайту Figmatica для LLM: https://figmatica.com/llms.txt

# 3D-конфігуратор для виробника: що three.js робить на кожному етапі продажу

- Автор: [Михайло Ємчура](https://figmatica.com/uk/blog/authors/mike-yemchura), Засновник і CEO
- Опубліковано: 2026-09-29
- Оновлено: 2026-10-06
- Категорія: Веб-дизайн

**Що таке three.js і візуальний CPQ, як одна 3D-модель працює на всьому продажі виробника, від першого візиту і RFQ до лінії збирання, дилерів і запчастин, який конфігуратор підходить для MTS, ATO, CTO і ETO, SendCutSend від головної до кошика і шлях від SolidWorks до сайту.**

Вівторок, відділ закупівель заводу-партнера. Інженер отримав від постачальника PDF на сорок сторінок: креслення, таблиці розмірів, фото деталі на білому тлі. Щоб зрозуміти, чи стане редуктор на його раму, він пише менеджеру. Менеджер пересилає питання конструктору. Відповідь приходить у четвер, комерційна пропозиція в понеділок.

В іншій вкладці відкритий сайт іншого виробника. Там той самий тип редуктора можна покрутити мишкою, розібрати на деталі, вибрати фланець під свій двигун і покриття, і ціна за партію перераховується одразу. Інженер зберігає посилання і надсилає його керівнику. Лист першому постачальнику так і лишається чернеткою.

Ця стаття для маркетологів виробничих компаній: що таке three.js, як 3D-модель на сайті працює на кожному етапі продажу, від першого візиту до замовлення запчастини, і з чого почати, якщо у ваших інженерів уже є CAD-моделі.

## 3D-конфігуратор від Figmatica: один редуктор, чотири етапи продажу

Починаємо з власної роботи. Ми змоделювали одноступеневий редуктор так, як це зробив би інженер заводу: 17 деталей, від литого корпусу до підшипників, сальників і восьми болтів фланця. Експортували його в STEP, файл, який відкриває будь-яка CAD-система, перетворили для вебу і стиснули з 4,5 МБ до 0,7 МБ. А потім поставили один файл за чотири екрани, по одному на кожен етап, де покупець має інше питання.

![3D-переглядач Figmatica: редуктор повільно обертається, потім розходиться на 17 деталей повзунком розібраного вигляду і збирається назад](https://d338fcbjvovhvo.cloudfront.net/assets/blog/3d-product-configurator-manufacturing/demo-showcase.mp4)
*Вітрина: продукт, який можна покрутити й розібрати*

Екран пропозиції змінює покриття корпусу, від сирого чавуну до синього анодування чи порошкової фарби, і модель перефарбовується разом зі зміною ціни. Повзунок кількості застосовує знижки на партію, і підсумок стоїть поруч із моделлю. У робочій версії ціни беруться з вашого прайсу чи ERP.

![Конфігурація і пропозиція: корпус змінюється з чавуну на синє анодування і чорне оксидування, повзунок кількості йде з 10 до 100 штук, і підсумкова ціна оновлюється](https://d338fcbjvovhvo.cloudfront.net/assets/blog/3d-product-configurator-manufacturing/demo-quote.mp4)
*Пропозиція: кожен вибір видно на моделі і в ціні*

Екран збирання це той самий файл на планшеті біля лінії: редуктор складається деталь за деталлю в порядку специфікації, і поточна деталь підсвічується з назвою і номером. Екран запчастин шукає за назвою чи номером, підсвічує деталь усередині збірки, показує її матеріал і ціну і додає до запиту.

![Режим лінії збирання: редуктор складається крок за кроком, кожна нова деталь підсвічена синім, а її назва й номер у списку збоку](https://d338fcbjvovhvo.cloudfront.net/assets/blog/3d-product-configurator-manufacturing/demo-assembly.mp4)
*Виробництво: та сама модель веде збирання*

Той самий підхід уже працює на сайті клієнта. Для One Right Eye, стартапу в офтальмології, всю історію продукту розповідає одне 3D-око, яке обертається під час скролу. А на сайті BloxFi, який теж зробили ми, кожну функцію фінтех-API показує одна коротка анімація.

- [One Right Eye](https://figmatica.com/uk/cases/one-right-eye): Офтальмологічний стартап з Австрії. Бренд і сайт на Webflow з нуля, з 3D-оком, яке пояснює продукт.
- [BloxFi](https://figmatica.com/uk/cases/bloxfi): Глобальний API для конвертації валют і розрахунків. Редизайн сайту.

![Режим запчастин: пошук gear знаходить зубчасте колесо, решта збірки стає прозорою, картка деталі показує бронзу CuSn12 і ціну, і деталь додається до запиту на запчастини](https://d338fcbjvovhvo.cloudfront.net/assets/blog/3d-product-configurator-manufacturing/demo-parts.mp4)
*Після покупки: знайти деталь, побачити її у збірці, замовити*

## Головне

- **3D на сайті вже норма.** Бібліотеку three.js, на якій будують 3D у браузері, завантажують 61 млн разів на місяць, у шість разів більше, ніж рік тому, і вона працює на ~220 000 живих сайтів, серед них Stripe, ChatGPT, Walmart і Webflow.
- **Покупець хоче розібратися сам.** 67% B2B-покупців воліють купувати без менеджера. Інженери називають конфігуратор найціннішим онлайн-інструментом у 44% випадків, 3D-графіку у 30%, чат-бота лише в 9%.
- **Промислове обладнання досі показують на фото.** Із десяти відомих конфігураторів, які ми перевірили, справжнє 3D є у меблевиків і в навантажувачів Toyota. Caterpillar, John Deere, Bobcat, Scania і Trek міняють картинки. Це вікно можливостей.
- **Одна модель працює на шести етапах.** Пізнавання, підбір і RFQ, пропозиція, лінія збирання, дилери, запчастини.
- **Тип виробництва визначає, що ставити на сайт.** Переглядач каталогу, конфігуратор опцій або завантаження креслення з миттєвою ціною.
- **CAD-моделі у вас уже є.** Шлях від SolidWorks до сайту це конвертація і стиснення, а не нове 3D-моделювання.

## Чому зараз

Рік тому three.js завантажували 10 млн разів на місяць, зараз 61 млн. За 2016 рік, перший, за який npm публікує кількість завантажень, набралося 0,34 млн. Завантаження рахують кожну збірку й кожен тест, і весь реєстр npm за цей рік теж виріс: React, найпопулярніша бібліотека інтерфейсів, у 3,7 раза. Three.js виріс у 6,1 раза, тобто помітно швидше. Частину цього росту, імовірно, дають AI-асистенти, які беруть three.js, коли їх просять зробити щось у 3D.

Живих сайтів на three.js близько 220 000, серед них Stripe, ChatGPT, Walmart, Webflow, Roblox. Найближчий конкурент, Babylon.js, стоїть на 870. 3D у браузері стало звичайним інструментом, і стандарт у нього один.

Друга зміна відбувається з покупцем. За опитуванням Gartner серед 646 B2B-покупців, 67% воліють купувати без менеджера. Технічні покупці проходять близько 60% шляху онлайн, перш ніж звернутися до постачальника, за опитуванням понад 1 000 інженерів від GlobalSpec. У тому ж опитуванні конфігуратор продукту назвали серед найцінніших онлайн-інструментів 44% інженерів, інтерактивну 2D- і 3D-графіку 30%, чат-бота 9%. Інженер хоче перевірити сумісність сам, до розмови з менеджером. А за даними 6sense, постачальник, до якого покупець звертається першим, виграє угоду приблизно у 80% випадків, тож поки ви чекаєте на лист, рішення вже приймається.

Третя зміна, на наш погляд, найважливіша. Кастомне виготовлення дешевшає. Stratasys випустив 3D-принтер Dimension за $29 900, і це було приблизно вдвічі дешевше за будь-що на ринку. Сьогодні настільний ЧПК-верстат Shapeoko коштує від $1 800. Коли зробити щось якісне стає дешевше, ринок таких речей росте, і в нього заходять нові гравці: стартапи, дизайнери, невеликі бренди. Їм потрібен хтось, хто спроєктує й виготовить, бо тримати й обслуговувати обладнання самим вони не хочуть.

- **SendCutSend** ріже, гне і фарбує листовий метал на онлайн-замовлення. Перейшов $100 млн виручки, росте приблизно на 80% за рік, обслуговує понад 300 000 клієнтів і нещодавно отримав оцінку $1,01 млрд.
- **Xometry** маркетплейс кастомних деталей, за останній квартал виріс на 41%, до $229 млн, а активних покупців стало 89 557, на 20% більше. Його CEO каже, що компанія займає менше 1% ринку на $275 млрд, який досі живе на e-mail-пропозиціях і багатоденному очікуванні.
- **Protolabs** мережа партнерських цехів, тобто виготовлення без власних верстатів, росте на 15,7%, власні заводи на 4,1%.
- **3D-друк** за Wohlers Report це ринок $24,2 млрд. Друк деталей на замовлення становить 48% і росте на 15,5%, а продажі самих принтерів лише на 3,6%.
- **MISUMI** японський гігант компонентів, купив платформу кастомних деталей Fictiv за $350 млн.

![Графік завантажень three.js на npm по місяцях: до 5 млн до 2023 року, 10 млн рік тому, 61 млн зараз](https://figmatica.com/assets/blog/3d-product-configurator-manufacturing/npm-trend.webp)
*Завантаження three.js з npm за місяць, мільйони*

Ми перевірили конфігуратори десяти відомих виробників. Справжнє 3D, яке крутиться в руках, знайшли у меблевиків USM Haller, Vitra, Herman Miller і Steelcase і в навантажувачів Toyota. Caterpillar, John Deere, Bobcat, Scania і Trek досі показують фото, які змінюються при виборі опцій. John Deere прямо пише під фото: «Photo is representative and will not reflect your configured product». Для промислового обладнання 3D поки рідкість.

Якщо ваші конкуренти ще надсилають PDF, у вас є вікно. Коли вони покажуть 3D, наздоганятимете вже ви.

> Кастом стає новим масовим ринком. Його забере той, хто зробить замовлення кастомної деталі таким самим простим, як покупку в інтернет-магазині: завантажив файл, побачив деталь у 3D, отримав ціну.
> Mykhailo Yemchura

## Що таке three.js, для маркетолога

Three.js це безкоштовна бібліотека з відкритим кодом, яка показує 3D-модель прямо на сторінці сайту, без плагінів і без встановлення програм. Вона працює на WebGL, технології браузера для графіки, тож модель відкривається на ноутбуці, телефоні й планшеті в цеху.

Для маркетолога важливе одне: three.js це не окремий продукт і не підписка. Це інструмент, на якому ваш сайт, портал чи конфігуратор показує 3D, і він уже є стандартом. На сайті виробника з ним можна показати:

- модель, яку покупець крутить і наближає;
- розібраний вигляд, де деталі розходяться і видно, як вузол зібраний;
- розріз, який показує внутрішню будову;
- підсвітку деталі з назвою, номером і матеріалом;
- зміну розміру, матеріалу, покриття й комплектації;
- ціну, що перераховується разом із моделлю.

## Що таке CPQ і що робить його візуальним

CPQ (configure, price, quote) це процес і програма, у яких продавець або сам покупець налаштовує продукт, отримує ціну й комерційну пропозицію. Ринок CPQ-програм оцінюють приблизно в $3 млрд із ростом 15–20% на рік, а найбільшим покупцем конфігураторів називають машинобудування. Звичайний CPQ це форма з полями й таблиця. Візуальний CPQ додає 3D-модель: кожен вибір одразу видно на продукті, і покупець перевіряє сумісність очима, а не за артикулами.

## Цикл продажу виробника: де працює 3D

B2B-купівля фізичних товарів триває в середньому 7,3 місяця, за опитуванням 6sense серед близько 4 000 покупців. Ми розклали її на шість етапів, на кожному з яких покупець має до вас інше питання.

| Етап | Питання покупця | Що показує 3D | Що вимірюємо |
| --- | --- | --- | --- |
| Пізнавання: виставка, пошук, LinkedIn | Ви це взагалі вмієте? | Модель на головній, розібраний вигляд, процес виготовлення | Час на сторінці, запити з сайту |
| Підбір і RFQ | Чи підійде мені варіант X? | Конфігуратор опцій, розміри, сумісність | Кількість RFQ, частка повних запитів |
| Пропозиція | Що саме я купую і за скільки? | Візуальний CPQ: конфігурація, ціна, модель для погодження інженером | Час до пропозиції, частка виграних пропозицій |
| Виробництво | Як це збирається? | Та сама модель на планшеті біля лінії: дерево збірки, пошук деталі, підсвітка | Помилки збирання, час навчання |
| Партнери й дилери | Як мені це продавати? | Портал з конфігуратором і моделями для їхніх сайтів | Продажі через партнерів |
| Після покупки | Яку деталь замовити на заміну? | Модель з клікабельними запчастинами, інструкція в 3D | Замовлення запчастин, звернення в підтримку |

Головна думка таблиці: 3D-модель створюється один раз, а працює на шести етапах. Для маркетолога це аргумент для бюджету: витрати на 3D ділять між собою маркетинг, продажі, виробництво і сервіс.

## Пізнавання: сайт замість шоуруму

Vitra вбудовує 3D прямо в сторінку крісла ID Air. Модель крутиться під пальцем, вибір оббивки наводить камеру на сидіння і відкриває 96 тканин з фільтрами, ціна $1 290 і строк 8–10 тижнів оновлюються наживо, а кнопка «Show in room» ставить крісло у ваш офіс. Caterpillar робить простішу версію: 360-тур навантажувача 255 з мітками «More Lift Height» і «Greater Rated Operating Capacity» і меню збоку, яке веде від однієї переваги до іншої. Кожна перевага прив'язана до конкретного місця на продукті, і це пояснює якість швидше, ніж абзац про високоточну обробку.

![Конфігуратор крісла Vitra ID Air: крісло в 3D, камера наближена до сидіння, панель із 96 тканинами оббивки з фільтрами, ціна і строк](https://figmatica.com/assets/blog/3d-product-configurator-manufacturing/vitra-idair.webp)
*Vitra: обираєш тканину, і камера їде до сидіння*

## Підбір і RFQ: менше листів «а чи підійде»

RFQ (request for quote) це запит комерційної пропозиції: специфікація, кількість, терміни, креслення. 67% промислових покупців у 2020 році чекали відповідь менше ніж за 24 години, за опитуванням Paperless Parts серед понад 400 покупців деталей. Кожен уточнювальний лист додає дні. Конфігуратор знімає питання сумісності ще до запиту, і RFQ приходить уже з повною специфікацією. Три приклади:

- **igus RBTX.** Планувальник роботизованої комірки в 3D. Інженер додає робота, захват, раму, і в шапці весь час горить ціна обладнання: $21 585,82, з монтажем і запуском $24 810,82. CAD можна завантажити.
- **item Engineering Tool.** Повноцінний CAD у браузері в гостьовому режимі, без акаунта. Робочий стіл стає живою 3D-моделлю з полями висоти, глибини, ширини і матеріалу стільниці.
- **Festo.** Конфігуратор пневмоциліндра показує його в 3D з розмірними лініями і збирає код замовлення з вибраних опцій.

![Планувальник igus RBTX: роботизована комірка в 3D з рамою, маніпулятором і захватом, і поточна ціна обладнання в шапці](https://figmatica.com/assets/blog/3d-product-configurator-manufacturing/igus-rbtx.webp)
*igus RBTX: ціна горить у шапці, поки ти збираєш комірку*

## Пропозиція: ціна, яку видно до реєстрації

Тут найсильніший аргумент ціна, яку видно до реєстрації. SendCutSend показує її на кожному кроці, розбір нижче. MISUMI збирає номер деталі з ваших виборів, вал стає FPSFJAA-D10-L200, показує його в 3D і ставить поруч ціну $23,04 і дату відвантаження, без логіну. Toyota у Великій Британії продає навантажувач Traigo як в інтернет-магазині: 3D-модель на складі з видом зовні й з кабіни, £23 196, ціна кожної опції поруч (літій-іонна батарея додає £6 630) і «Add to cart». Той самий принцип ми застосовуємо у фінтех-сайтах: спершу гроші, потім форма.

![Сторінка навантажувача Toyota Traigo: навантажувач у 3D на складі, вид зовні й з кабіни, ціна і опції з різницею в ціні, кнопка Add to cart](https://figmatica.com/assets/blog/3d-product-configurator-manufacturing/toyota-traigo.webp)
*Toyota: навантажувач, проданий як товар інтернет-магазину*

## Виробництво: та сама модель на лінії збирання

Технолог зберігає модель у SolidWorks, і за кілька хвилин вона з'являється на планшеті біля лінії: дерево збірки, пошук деталі за номером, підсвітка кольором, покроковий порядок збирання. Нових працівників навчають на моделі, а не на паперовому кресленні. OSH Cut, виробник деталей з листа й труби, показує інший бік цього своїм клієнтам: у конструкторі гнутих труб, зробленому на three.js, кнопка «Show bending animation» запускає 3D-верстат, який гне саме вашу трубу, поруч позначка «Design check: Passed» і ціни за трьома строками: $107,67 стандартно, $272,67 прискорено, $317,67 терміново.

![Конструктор гнутих труб OSH Cut: 3D-верстат гне трубу клієнта, кнопки відтворення, позначка перевірки Passed і три ціни за строками](https://figmatica.com/assets/blog/3d-product-configurator-manufacturing/oshcut-bending.webp)
*OSH Cut: дивишся, як верстат гне твою деталь*

## Партнери й дилери: конфігуратор, яким користуються і вони

Дилер отримує той самий конфігуратор для свого сайту або порталу, і ваш продукт виглядає однаково в усіх каналах. Herman Miller у конфігураторі крісла Aeron показує ціну кожної опції (обмежувач нахилу додає $100), збирає артикул наживо з кожного вибору і дає кнопку «Download SIF», файл специфікації, з яким дилер одразу оформлює замовлення, а поруч «View in AR» і «Share your design». Steelcase підписує конфігуратор крісла Gesture словами «built to start the conversation», а далі «contact your local dealer»: покупець збирає крісло в 3D, бачить прайсову ціну $2 510, завантажує PDF і йде з ним до дилера. USM Haller так само: модульна шафа в 3D, ціна, що росте з кожним модулем, і кнопка «I want to buy this configuration», яка передає конфігурацію партнеру.

![Конфігуратор Herman Miller Aeron: крісло в 3D, опції з різницею в ціні, артикул, що оновлюється, кнопки Download SIF і View in AR](https://figmatica.com/assets/blog/3d-product-configurator-manufacturing/hermanmiller-aeron.webp)
*Herman Miller: файл специфікації для дилера в один клік*

## Після покупки: запчастина в один клік

Каталог запчастин Festo показує розібране креслення поруч зі списком: клік по рядку підсвічує деталь синім, біля кожного рядка кошик і інструкція з ремонту, а шукати можна за кодом замовлення чи фото шильдика, все без логіну. Креслення там двовимірне, і 3D-модель зробила б той самий хід наочнішим. Клієнт клікає на деталь у моделі, бачить її номер і додає до замовлення: менше помилок з артикулами, менше дзвінків у сервіс. І це найприбутковіша частина бізнесу. За даними BCG, маржа на запчастинах у середньому близько 50% проти 15–25% на самому обладнанні.

![Каталог запчастин Festo: розібране креслення поруч зі списком деталей, одна деталь підсвічена синім, біля кожного рядка кошик](https://figmatica.com/assets/blog/3d-product-configurator-manufacturing/festo-spareparts.webp)
*Festo: клік по рядку підсвічує деталь на кресленні*

## Тип виробництва визначає, що ставити на сайт

Кастомне виготовлення, про яке ми писали вище, це ETO у найчистішому вигляді, і саме тут 3D на сайті дає найбільший виграш.

| Тип | Що це | Що ставимо на сайт |
| --- | --- | --- |
| MTS, виробництво на склад | Стандартний каталог, готові позиції | 3D-переглядач у картці товару |
| ATO, збирання під замовлення | Продукт збирають із готових модулів | Конфігуратор модулів з ціною |
| CTO, конфігурування під замовлення | Покупець обирає параметри в заданих межах | Конфігуратор з розмірами, перевіркою сумісності і CPQ |
| ETO, інжиніринг під замовлення | Кожен виріб проєктують під клієнта | Завантаження креслення, 3D-перегляд, миттєва або швидка ціна |

*Виробництво на склад, під замовлення й інжиніринг під замовлення це три базові типи в моделі ланцюга поставок SCOR.*

## Шість рівнів 3D на сайті виробника

Починати з верхнього рівня не обов'язково. Перший робиться з наявних CAD-моделей, а кожен наступний спирається на попередній.

- **1. 3D-переглядач 360°.** Продукт, який можна покрутити, наблизити й розібрати.
- **2. Конфігуратор опцій.** Розміри, матеріали, покриття, модулі, видимі на моделі.
- **3. Конфігуратор з ціною, візуальний CPQ.** Кожен вибір змінює модель і ціну одночасно.
- **4. Завантаження CAD-файлу з миттєвою пропозицією.** Власна деталь покупця, оцінена одразу.
- **5. AR.** Продукт у цеху клієнта через камеру телефона.
- **6. Цифровий двійник.** Та сама модель для лінії і для сервісу.

## Як це працює в SendCutSend: від головної до ціни

SendCutSend ріже, гне і фарбує листовий метал на замовлення і перейшов $100 млн виручки. Ми пройшли його сайт від головної до кнопки «Додати в кошик», нічого не завантажуючи й не реєструючись.

![Головна SendCutSend: «Fast custom parts, at any scale», червона кнопка Get Started і «No CAD? Start with a template»](https://figmatica.com/assets/blog/3d-product-configurator-manufacturing/scs-home.webp)
*Крок 1: одна кнопка і вхід для людей без креслення*

- **1. Головна.** «Fast custom parts, at any scale»: різка, ЧПК та інше, доставка від 24 годин. Одна червона кнопка Get Started, а під нею рядок для тих, у кого немає креслення: «No CAD? Start with a template!»
- **2. Завантаження.** Поле на 10 файлів і обіцянка під ним: права на ваш дизайн лишаються за вами. Нижче три двері для людини без CAD: AI Part Builder, де деталь описують словами чи ескізом, конструктор із шаблонів і ручний розрахунок для складних випадків.
- **3. Шаблони.** Кронштейни, шестерні, фланці. Ми взяли прямокутний фланець з отвором по центру.
- **4. Розміри.** Ширина 6", висота 4", радіус кутів, діаметр отворів. Креслення перемальовується з кожною цифрою. Додаємо лінію згину.

- **5. Матеріал, і тут з'являється 3D.** Деталь стає об'ємною моделлю з кубом орієнтації, її можна крутити. Метали, композити, пластики, дерево, гума. Алюміній 5052 H32 позначено як найпопулярніший.
- **6. Товщина і перша ціна.** Товщина 3,2 мм: $14,81 за штуку, і одразу сходинки партій: 10 штук по $9,02, 100 по $5,89, 1 000 по $3,88. Під ціною найближча дата доставки.

![SendCutSend: фланець у 3D з алюмінію 5052, варіанти товщини, $14,81 за штуку і сходинки партій аж до $3,88 за 1 000, з найближчою датою доставки](https://figmatica.com/assets/blog/3d-product-configurator-manufacturing/scs-thickness-price.webp)
*Кроки 5–6: деталь стає 3D, і перша ціна приходить зі сходинками партій*

- **7. Послуги.** Згин, зенкування, різьба, запресування кріплень, зварювання. Обираємо згин на 90°, і пластина складається прямо в 3D. Ціна стає $29,12, доставка зсувається на три дні.

![SendCutSend: застосовано згин 90°, фланець складений у 3D, ціна тепер $29,12, а дата доставки на три дні пізніше](https://figmatica.com/assets/blog/3d-product-configurator-manufacturing/scs-bend.webp)
*Крок 7: згин 90° складає деталь у 3D і зсуває ціну й дату*

- **8. Оздоблення.** Зачищення, анодування, порошкове фарбування. Обираємо Safety Orange, модель перефарбовується в помаранчевий: $41,46, доставка ще на чотири дні пізніше.
- **9. Кошик.** Логін потрібен тільки тут. До цього моменту покупець уже знає, що отримає, скільки це коштує і коли приїде.

![SendCutSend: обрано порошкове фарбування Safety Orange, зігнутий фланець перефарбований у помаранчевий у 3D, $41,46 за штуку](https://figmatica.com/assets/blog/3d-product-configurator-manufacturing/scs-powder-coat.webp)
*Крок 8: покриття перефарбовує модель, і ціна йде слідом*

Що з цього взяти виробнику:

- **Шлях для людини без креслення.** Шаблони й AI-конструктор перетворюють «я тільки дивлюся» на першу конфігурацію.
- **Кожен вибір видно двічі: на моделі і в ціні.** Згин складає деталь, фарба її перефарбовує, і в ту ж секунду змінюються сума й дата.
- **Сходинки партій на екрані.** Покупець сам бачить, що 100 штук дешевші за 10, і це продає більшу партію без менеджера.
- **Дата поруч з ціною.** Для закупівельника строк важить не менше за гроші.
- **Реєстрація в кінці, а не на вході.** Protolabs і Fictiv просять акаунт до будь-якого розрахунку; SendCutSend, OSH Cut і Craftcloud спершу показують ціну.

## Інші ідеї, які варто взяти

- **Craftcloud: зразки для тих, у кого немає файлу.** Кнопка «Try it out» відкриває готові моделі, і відвідувач без креслення бачить 145 матеріалів з цінами від 150+ виробників, «No registration required». Етап: підбір.
- **JLCPCB: ціна прямо на головній.** Форма розрахунку друкованих плат стоїть у першому екрані: 5 плат за $4, без завантаження і логіну. Етап: пропозиція.
- **JLC3DP і PCBWay: безкоштовний 3D-переглядач як вхід у воронку.** Окремий онлайн-переглядач моделей з вимірюванням, розрізом і розбором, а з нього кнопка на миттєвий розрахунок. Етап: підбір.
- **Xometry: довіра на екрані завантаження.** Під полем для файлу надруковано номери патентів на рушій миттєвого розрахунку і 14 CAD-форматів, які він читає. Етап: пропозиція.
- **Protolabs: дві двері на головній.** «Get Instant Quote» для прототипу і «Start Production Quote» для серії розділяють покупців ще до першого кліку. Етап: пізнавання.
- **Fictiv: кілька партій в одній пропозиції.** До п'яти кількостей порівнюються в одному розрахунку. Етап: пропозиція.

## Що роблять найсміливіші 3D-сайти продуктів

Кілька сайтів показують, куди все рухається. Atlas Motion, виробник моторів і приводів для дронів і роботів, розповідає свій процес у чотири кроки, інтеграція, оцінка, виробництво, розвиток, і під час скролу його мотор, намальований білими лініями, розходиться на одинадцять деталей, а на останньому кроці підсвічуються магніти статора. Сторінка закінчується словами «Built to spec. Ready to scale.» і кнопкою замовлення. Процес виготовлення стає причиною купити.

![Atlas Motion: біле лінійне креслення мотора дрона, розібране на деталі, магніти статора підсвічені рожевим, і кроки Integrate, Evaluate, Manufacture, Innovate](https://figmatica.com/assets/blog/3d-product-configurator-manufacturing/atlas-motion.webp)
*Atlas Motion: мотор розбирається, поки розповідають про процес*

- **Mind Robotics: цех як скрол.** Ізометрична 3D-комірка змінює завдання під час скролу: від pick-and-place з конвеєром і шестернями до сортування з палетами й навантажувачем, кожне з карткою-підписом і шкалою прогресу. Етап: виробництво і пізнавання.
- **Thömus: конфігуратор велосипеда з ціною.** Швейцарський виробник велосипедів перефарбовує раму з вибором кольору, дає задати розмір і положення сідла, а ціну й щомісячний платіж тримає поруч із моделлю, з кнопками «Ask experts» і «Share configuration». Етап: підбір і пропозиція.
- **Copentek: тканина на виробі, а не зразок.** Виробник технічних тканин для маркіз ставить 3D-маркізу поруч із сіткою зразків: клік по зразку одразу перетягує маркізу, а кожен зразок має артикул для монтажника. Етап: дилери і проєктувальники.
- **Zipline: система, пояснена моделлю.** Дрон доставки летить крізь хмари і під час скролу спускає контейнер на тросі, а на дроні й контейнері мітки з поясненнями. Етап: пізнавання.
- **Цифровий завод у справжньому складі.** 3D-скан порожнього складу з розміщеною всередині віртуальною лінією переробки: нею можна пройтися або перемкнутися на вид усього поверху. Етап: планування виробництва і пресейл розміщення лінії.

![Mind Robotics: ізометрична 3D-комірка цеху з конвеєром, шестернями і маніпулятором, картка з підписом і шкалою прогресу для завдання pick-and-place](https://figmatica.com/assets/blog/3d-product-configurator-manufacturing/mind-robotics.webp)
*Mind Robotics: цех, станція за станцією*

## Від SolidWorks до сайту: пайплайн для ваших інженерів

- **1. Технолог зберігає модель як звичайно.** SolidWorks, Inventor, Creo, Fusion чи інша CAD-система. У його роботі нічого не змінюється.
- **2. Модель експортується в STEP.** Це відкритий міжнародний стандарт ISO 10303 для обміну 3D-моделями між CAD-системами, його відкриває будь-яка з них.
- **3. Сервіс сам підхоплює новий файл.** З папки чи PDM-системи, без ручної роботи.
- **4. STEP конвертується в glTF чи GLB.** Це відкритий формат 3D для вебу від Khronos Group, його називають «JPEG для 3D»; GLB це те саме в одному файлі. Дерево збірки й назви деталей зберігаються, тож на сайті можна знайти деталь за номером.
- **5. Модель стискається.** У нашому тесті редуктор із 17 деталей зменшився з 4,5 МБ до 0,7 МБ і відкривається за секунди.
- **6. Модель потрапляє на сайт, у портал і на планшети.** Один файл, три місця.

> **Головне:** Ваші креслення лишаються вашими. На сайт іде лише візуальна модель: поверхні без точних розмірів, допусків і історії побудови. Точна геометрія лишається у ваших інженерів, а модель за потреби спрощують ще більше, зберігаючи зовнішній вигляд.

![Схема пайплайна: CAD-система, експорт у STEP, автоматичне підхоплення, конвертація в GLB, стиснення, далі сайт, портал дилерів і планшет у цеху](https://figmatica.com/assets/blog/3d-product-configurator-manufacturing/pipeline.webp)
*Один файл від інженера, три місця, де він працює*

## З чого почати

- **1.** Оберіть один продукт, про який найчастіше питають і який найважче пояснити словами.
- **2.** Візьміть його STEP-файл у інженерів.
- **3.** Покажіть 3D-модель на сторінці цього продукту і поміряйте час на сторінці, запити і частку повних RFQ.
- **4.** Коли модель спрацює, додайте конфігуратор опцій і ціну.

## 3D на сайті виробника: чеклист

- **Пізнавання.** Модель на головній і в ключових картках продукту, розібраний вигляд.
- **Підбір і RFQ.** Конфігуратор опцій, перевірка сумісності, RFQ з повною специфікацією.
- **Пропозиція.** Ціна або діапазон ціни до реєстрації, і строк поруч.
- **Виробництво.** Модель на лінії з деревом збірки й пошуком деталі.
- **Партнери.** Конфігуратор для порталу дилерів і файл специфікації для замовлення.
- **Після покупки.** Клікабельні запчастини в моделі.
- **Захист.** На сайті лише візуальна модель.

Ми проєктуємо й будуємо сайти та інтерфейси продуктів з 3D і анімацією і можемо провести виробника від одного STEP-файлу до конфігуратора з ціною. Надішліть один файл, і на перший дзвінок ми прийдемо з вашим продуктом у 3D.

> Хлопці зробили більше, ніж обіцяли, і швидко вносили зміни, які ми просили, тож співпраця пройшла гладко.
> Артем Кузьмич, COO, Clutch

> Кожен наш клієнт каже, що довіряє нам і обирає нас насамперед завдяки сайту та його дизайну. Тож результат говорить сам за себе.
> Ірина Гурʼєва, Співзасновниця, Clutch

> **Про Figmatica.** Figmatica є дизайн-студією, яка розробляє [AI-нативні сайти](https://figmatica.com/uk/services/agentic-website). Серед наших клієнтів є WWF Україна, KFC Україна, Український фонд стартапів, BRDO, RIEL і TAF Industries. Ми робимо [редизайн сайтів так, щоб ви не втратили трафік з Google](https://figmatica.com/uk/services/legacy-migration) і [вас почали знаходити й рекомендувати ChatGPT, Claude і Perplexity](https://figmatica.com/uk/services/demand-generation). Так, це реклама в кінці статті, зате коротка, тож [запишіться на дзвінок](https://figmatica.com/uk/book), і ми покажемо на концептах, як може виглядати сайт вашої компанії.


## Часті питання

### Для чого використовують three.js?

Щоб показувати інтерактивне 3D у браузері: переглядачі й конфігуратори продуктів, розібраний вигляд, візуалізацію даних, ігри й анімовані сайти. Вона безкоштовна, з відкритим кодом, працює на WebGL і відкривається на комп'ютерах, телефонах і планшетах без плагінів. Її використовують близько 220 000 живих сайтів, зокрема Stripe, ChatGPT і Walmart.

### Що таке CPQ у продажах?

Configure, price, quote: процес і програма, у яких продавець або покупець налаштовує продукт, отримує ціну і формує комерційну пропозицію. Візуальний CPQ додає 3D-модель, тож кожен вибір видно на продукті. Найбільше його використовують там, де в продукту багато опцій, як у машинобудуванні.

### Чим engineer to order відрізняється від configure to order?

У configure to order (CTO) покупець обирає параметри в межах, які виробник задав наперед, тож добре працює конфігуратор з ціною. В engineer to order (ETO) кожен виріб проєктують під клієнта, тож сайт приймає креслення, показує його в 3D і дає миттєву або швидку пропозицію.

### Що таке RFQ і з яких кроків він складається?

Запит комерційної пропозиції: покупець надсилає специфікацію, кількість, строк і креслення, постачальник перевіряє можливість і вартість і повертає пропозицію, сторони уточнюють і домовляються, далі йде замовлення. 67% промислових покупців у 2020 році чекали пропозицію протягом 24 годин, тож кожен уточнювальний лист коштує угод. Конфігуратор робить так, що RFQ приходить уже повним.

### Як перетворити файли SolidWorks або STEP на glTF для сайту?

Експортувати модель у STEP, перетворити STEP на glTF чи GLB конвертером на відкритому CAD-ядрі, зберегти дерево збірки й назви деталей, а тоді стиснути сітку для вебу. У нашому тесті збірка з 17 деталей зменшилась із 4,5 МБ до 0,7 МБ. Цей крок може запускатися сам щоразу, коли інженер зберігає новий файл.

### Чи не відкриє 3D-модель на сайті наші креслення?

Ні, якщо зробити правильно. На сайт іде лише візуальна сітка: поверхні без точних розмірів, допусків і історії побудови, і її можна спростити ще більше. Точна CAD-геометрія лишається у ваших інженерів.

### Скільки коштує 3D-конфігуратор?

Залежить від рівня. 3D-переглядач із наявних CAD-моделей це найменший крок. Конфігуратор опцій додає правила, що з чим поєднується. Візуальний CPQ додає ціни з вашого прайсу чи ERP. Завантаження CAD з миттєвою ціною потребує логіки ціноутворення під ваші процеси. Почніть з одного продукту, поміряйте, а тоді розширюйте.


## Пов'язане

- [Сайти зі сторітелінгом](https://figmatica.com/uk/services/storytelling-websites): Сайти, які приводять трафік і переконують людей.
- [Продуктовий дизайн і UI/UX](https://figmatica.com/uk/services/product-design): Дизайн SaaS та AI-інтерфейсів, яким довіряють.
- [One Right Eye: Як офтальмологічний стартап пояснює свій продукт одним 3D-оком](https://figmatica.com/uk/cases/one-right-eye)
- [BloxFi: Сайт на Webflow з 80+ сторінками країн: як фінтех-API вийшов на світовий ринок](https://figmatica.com/uk/cases/bloxfi)