Ви дивитеся на пару взуття онлайн. Магазин показує вид спереду та збоку. Ви наближаєте зображення, сподіваючись побачити текстуру шкіри, але картинка перетворюється на мозаїку з пікселів. Ви переходите до наступного фото. Це те саме взуття на іншій нозі. Через десять фото ви все ще не можете зрозуміти, чи підошва жорстка чи гнучка, чи колір — це справжній темно-синій чи вицвілий чорний. На етапі оплати ви вагаєтеся. Потім закриваєте вкладку.
Це трапляється мільйони разів на день. Плоскі зображення змушують клієнта виконувати розумову роботу, уявляючи реальний об'єкт. Ця робота створює тертя, а тертя вбиває покупки.
Тепер уявіть іншу вкладку. Те саме взуття завантажується як 3D-модель прямо на сторінці. Ви натискаєте та перетягуєте мишу, щоб обернути його. Ви наближаєте, і геометрія залишається чіткою, тому що ви дивитеся на сітку, а не на розтягнуте растрове зображення. Ви змінюєте колірну гаму в реальному часі. Ви оглядаєте шви вздовж задника з нижнього ракурсу — кут, який жоден фотограф товарів не захотів знімати. Об'єкт існує на вашому екрані так само, як він існує в просторі. Ви додаєте товар у кошик, бо відчуваєте, ніби вже тримали його в руках.
Нічого в самому продукті не змінилося. Змінився лише досвід.
Чому саме браузер?
Донедавна такий тип взаємодії вимагав спеціального додатка або плагіна, які більшість користувачів відмовлялися встановлювати. Three.js це змінила. Це JavaScript-бібліотека, яка працює поверх вбудованого WebGL-рендерера браузера і дозволяє розробникам створювати 3D-сцени, використовуючи той самий код, що керує рештою вебсторінки. Користувачеві не потрібно завантажувати спеціальне програмне забезпечення. Немає окремого вікна, виконуваного файлу чи діалогу запиту дозволів. Canvas рендериться так само, як і будь-який інший HTML-елемент.
Це важливо, тому що доступність визначає поширення технології. Якщо клієнт може переглянути 3D-товар на своєму телефоні під час поїздки, на старому ноутбуці або на корпоративному комп'ютері, заблокованому IT-відділом, технологія справді охоплює людей. Three.js перетворює браузер на універсальний в'юпорт.
Де 3D заслуговує на своє місце
Додавання тривимірної графіки не є безкоштовним. Це коштує часу на розробку, ресурсів продуктивності та часто бюджету на створення самих асетів. Вам варто платити цю ціну лише тоді, коли віддача є реальною. Кожен із чотирьох поширених аргументів на користь веб-3D заслуговує на більше, ніж просто пункт у списку.
Вищий рівень залученості звучить як маркетинговий показник, але він має механічну причину. Коли відвідувач може взаємодіяти зі сценою — обертати, наближати, запускати анімації — він створює власний контент. Він більше не отримує презентацію пасивно. Він досліджує. Цей активний стан утримує його на сторінці довше, тому що у нього залишаються незавершені справи з моделлю. Він хоче побачити задню частину. Він хоче побачити внутрішню частину. Взаємодія створює цикли цікавості, які не можуть відтворити статичні сітки.
Краще розуміння найбільш очевидне в електронній комерції. Диван, представлений у двох вимірах, змушує покупця читати розміри зі специфікації та уявляти глибину за тінню. 3D-модель дозволяє йому облетіти виріб і побачити, як звужується підлокітник. Він може розмістити його у своїй кімнаті за допомогою доповненої реальності, побудованої на тій самій сцені Three.js, перевіряючи, чи вистачить місця під вікном, без використання рулетки. Коли клієнти бачать товари з усіх ракурсів, вони приймають рішення впевнено.
Сторітелінг виходить за межі продуктів. Виробник може показати, як двигун проходить цикли згоряння, не відправляючи фізичний демонстраційний зразок. Архітектор може провести клієнта через план поверху ще до того, як буде залито фундамент. Рух пояснює зв'язки, які словам і нерухомим кадрам важко