Коли сайту потрібне 3D?
Сцена в реальному часі виправдовує свою вартість, коли дії відвідувача змінюють те, що він дізнається: обертання продукту, щоб побачити, як він влаштований, рух будівлею чи ландшафтом, порівняння місць поруч або вивчення системи, яку легше осягнути в просторі. Якщо ракурс і порядок фіксовані, відрендерений фільм або послідовність кадрів простіше зробити й протестувати, і вони однаково можуть виглядати кінематографічно.
3D зазвичай підходить для презентацій продуктів, просторових та архітектурних історій, наукової комунікації та імерсивних світів бренду для запуску. Якщо досить анімації та сторітелінгу під час прокручування без сцени, у якій можна навігувати, легший шлях — креативна розробка; карти й дашборди на основі даних належать до візуалізації даних.
Що входить у проєкт 3D-сайту
У пропозиції зазначено, які результати входять в обсяг робіт, хто створює або надає 3D-ресурси і як приймається кожен пункт.
- Бриф щодо сюжету та взаємодії: що досліджують відвідувачі, у якому порядку і що роблять далі
- План 3D-ресурсів: ваші моделі, ліцензовані ресурси або нове моделювання, підготовлені як стиснуті файли glTF
- Прототип у браузері з керуванням мишею, дотиком і клавіатурою на погодженому телефоні та десктопі
- Читабельний HTML-контент і маршрут зі зменшеною анімацією тією самою історією
- Приймання за продуктивністю, пристроями та запасними сценаріями, а також передача вихідних файлів і ліцензій на ресурси
Janus Observatory: 3D-інтерфейс для десяти можливих майбутніх
Janus Observatory — проєкт, розроблений разом із Blue Marble Space, у якому Dardo перетворив умоглядну дослідницьку структуру на кінематографічну подорож у браузері. Десять майбутніх одразу створюють проблему навігації: звичайний список втратив би просторову ідею, а одна довга 3D-послідовність ускладнила б порівняння. Тому досвід багатошаровий. Кінематографічний вступ задає атмосферу, атлас показує всю добірку, а обсерваторія допомагає читати докладніше, із поверненням назад без повторного перегляду вступу.
3D-шар задає масштаб і відмінності між світами, а підписи, стан навігації та письмові пояснення несуть факти поза відрендереною сценою. Приймання перевіряє, чи може відвідувач назвати поточний світ, повернутися до атласу і продовжити після запасного варіанту рендерингу; лише частота кадрів на це не відповість. Збірка підпорядкована бюджетам розміру бандлів і перевірці в браузерах, а релізи перевіряються на візуальні регресії. Сценарії є дослідницькими, а не прогнозами, і жодних виміряних результатів навчання чи залученості не заявляється.
Продуктивність і SEO для 3D-сайтів
Пошукові системи не можуть прочитати те, що намальовано всередині canvas, тому заголовок, текст, посилання та метадані рендеряться як HTML до завантаження сцени. Зображення-заставка тримає місце сцени, її простір зарезервовано, щоб нічого не зсувалося, а 3D-код завантажується після появи першого контенту. Якщо стан досвіду заслуговує на те, щоб його знаходили в пошуку, він отримує власну URL-адресу.
Продуктивність вимірюється на реальних ресурсах і цільових пристроях, а не обіцяється як універсальна частота кадрів. Ми фіксуємо послідовність завантаження, типову взаємодію, використання пам'яті, де це доречно, і прийнятне візуальне спрощення на слабших телефонах, працюючи над досягненням порогів Core Web Vitals від Google. Ми не гарантуємо позицій у видачі; ми дбаємо, щоб 3D-шар ніколи не стояв між вашим контентом і краулером.
Запасні варіанти, зменшена анімація та доступність
Відвідувач має зрозуміти пропозицію, навіть коли анімацію зменшено, графічний контекст втрачено або пристрій не тягне сцену. Запасним варіантом може бути статичне зображення, коротке відео або звичайна верстка контенту, і він має залишати можливість ухвалити рішення, а не показувати помилку. За зменшеної анімації польоти камери стають перемиканнями або кроками, які контролює відвідувач, а інтерактивні елементи отримують керування з клавіатури та помітний фокус.
Від чого залежить вартість 3D-сайту?
Вартість 3D-сайту залежить від створення оригінальних ресурсів, кількості окремих сцен і станів взаємодії, анімації, графічного програмування, підтримки пристроїв і тестування. Готова модель продукту та індивідуальне середовище — зовсім різні відправні точки, навіть якщо обидва опиняються на одній сторінці, тож у кошторисі окремо вказано артдирекшн, моделювання або ліцензовані ресурси, анімацію, програмування, контент, аудіо та підтримку запуску.
Перший етап — невеликий робочий зріз на погодженому телефоні та десктопному браузері з реальним текстом, одним типовим ресурсом і справжньою взаємодією. Він виявляє проблеми з навігацією, розміром файлів і часом кадру до того, як створюватиметься решта. У пропозиції також зазначено, хто може замінювати контент і моделі після запуску. Dardo — команда з трьох людей у Боготі на чолі із засновником Nicolás Cerón, яка працює англійською або іспанською за східним і центральним часом США.
Запитання перед вибором
Скільки коштує 3D-сайт?
Здебільшого вартість залежить від виробництва матеріалів і кількості сцен. Ціну 3D-проєкту називаємо, коли з'ясовуємо, чи є готові моделі, скільки потрібно окремих сцен і станів взаємодії та які пристрої треба підтримувати. Бюджетні діапазони у формі запиту, від менш ніж 5 000 USD до 60 000 USD і більше, допомагають оцінити першу пропозицію.
Чи шкодять 3D-сайти SEO?
Ні, якщо контент розміщено в HTML. Пошукові системи не можуть прочитати те, що намальовано всередині полотна WebGL, тому заголовок, текст, посилання та метадані мають відображатися як звичайний контент сторінки, а сцена завантажуватися після нього. За такого підходу 3D-сторінку скануються так само, як і будь-яку іншу; залишаються ризики повільного завантаження та зсувів макета, які ми перевіряємо до запуску.
Чи працюють сайти на Three.js на телефонах?
Так, якщо сцену одразу створюють для телефонів, а не зменшують із десктопної демоверсії. Це означає стиснуті моделі й текстури, обмежену роздільну здатність рендерингу, рендеринг лише тоді, коли щось змінюється, та легшу версію для слабших пристроїв. Ми тестуємо на узгодженому телефоні з першого робочого фрагмента, тож мобільні обмеження впливають на дизайн, а не дивують вас під час запуску.
Чи завжди інтерактивному 3D-сайту потрібен WebGL?
Ні. Техніка залежить від завдання. Якщо користувачам потрібно змінювати ракурс або керувати об'єктом, зазвичай найкраще підходить графіка WebGL у реальному часі. Для фіксованої історії можна використати відрендерені кадри або відео з легшим шаром контенту, що дешевше у виробництві та простіше зберегти швидким. Іноді вистачає шаруватих зображень і продуманої анімації.
Хто створює 3D-моделі?
Це може зробити будь-яка сторона, а в пропозиції зазначено, яка саме. Ви можете надати наявні моделі продуктів, які треба підготувати для вебу, ми можемо використати ліцензовані матеріали, або ж обсяг робіт може включати нове моделювання. Кожен варіант змінює вартість і терміни. Незалежно від джерела, ми узгоджуємо формати файлів, ліміти полігонів і текстур, а також кому належать фінальні вихідні файли та ліцензії.
Скільки часу триває створення 3D-сайту?
Фіксованого терміну немає: він залежить від виробництва матеріалів, кількості сцен і раундів погодження. Графік визначаємо в пропозиції після оцінки першого робочого фрагмента, адже він показує, що зазвичай зсуває дати, як-от важкі моделі або взаємодії, які треба переосмислити для сенсорних екранів. Повідомте дату запуску на початку, щоб роботу можна було розбити на етапи відповідно до неї.
Чи можете ви додати 3D-сцену на наш наявний сайт?
Часто так. Один 3D-розділ, наприклад переглядач продукту або вступну сцену, можна додати на наявний сайт, якщо його стек дозволяє завантажувати сцену після контенту сторінки. Спершу ми переглядаємо поточну збірку, а потім визначаємо обсяг сцени, її резервний варіант і бюджет продуктивності як окрему роботу, яку можна прийняти самостійно.
