Three.js / React Three Fiber
3D в браузере, которое остаётся в памяти.
Three.js и React Three Fiber приносят настоящее 3D прямо в браузер — без плагинов и загрузок. С ними продукт можно показать со всех сторон, пространство — сделать проходимым, а движение — таким, какого плоская страница никогда не достигнет. Это технология, стоящая за многими веб-проектами с международными наградами.
Как Conexa Digital применяет этот инструмент
В Conexa Digital мы применяем Three.js и React Three Fiber там, где сайт должен заметно выделяться из общей массы: вращающийся обзор продукта, объёмная главная страница или интерактивная сцена, рассказывающая историю. Подходит ли инструмент в конкретном случае, мы решаем вместе, отталкиваясь от цели: это компетенция в нашем наборе, а не стандарт, который мы навязываем каждому. Где достаточно более простых средств — используем их.
Для чего мы это используем
Почему это важно для вас
3D-впечатление, которое запускается, как только открывается страница, запоминается и удерживает внимание — именно так внимание превращается в интерес. Принципиально, чтобы всё работало на стареньком ноутбуке так же чисто, как на новом компьютере. Поэтому мы всегда закладываем облегчённый резервный вариант — чтобы никто не остался перед дёргающейся или пустой страницей.
На практике
Производитель хочет показать продукт, который раскрывается с любого ракурса, например предмет мебели в нескольких вариантах цвета и материала. Фотокарусель показывает лишь фиксированные, заранее заданные виды. С Three.js и React Three Fiber мы вместо этого строим модель, которую посетители могут свободно вращать мышью или пальцем и рассматривать с любой перспективы. Так видны детали, которые на каталожном фото остались бы скрытыми: задняя сторона, шов, игра ткани на свету. Чтобы страница оставалась пригодной и на более старом устройстве, мы закладываем упрощённый вид как резервный вариант на случай, если 3D-отображение окажется там слишком тяжёлым.
Когда мы это не используем
Three.js и React Three Fiber — неверный выбор для большинства обычных подстраниц: обзору услуг, странице контактов или статье в блоге 3D не нужно, оно лишь без нужды нагружает вычислительную мощность и время загрузки. Тяжёлые 3D-сцены заметно замедляют загрузку и поэтому должны стоять не на каждой странице, а прицельно там, где они служат ясной задаче. На текстовых или информационных страницах мы вместо этого ставим на ясную вёрстку, типографику и простой визуальный язык, потому что посетители там хотят быстро добраться до содержания, а не до инсценировки.
Частые вопросы
В чём разница между Three.js и React Three Fiber?
Three.js — базовая 3D-библиотека для браузера. React Three Fiber — слой над ней, встраивающий её в современные веб-проекты на React. На практике их используют вместе, чтобы поддерживаемо интегрировать 3D-сцены в сайт.
Работает ли 3D в браузере на слабых устройствах и смартфонах?
В принципе да, но всё зависит от реализации. Мы проверяем производительность устройства и на слабом железе отдаём облегчённую версию вместо перегруженной сцены. Так страница остаётся удобной везде.
Нужен ли каждому сайту 3D?
Нет. 3D оправдано, когда служит ясной задаче — например, сделать продукт осязаемым. Там, где оно было бы лишь балластом, мы в Conexa Digital честно отговариваем и выбираем более подходящее средство.