Лес на three.js, по которому можно гулять прямо на этой странице: пологие холмы, ручей, сам выбирающий дорогу вниз по склону, трава и листья, клонящиеся на ветру, бабочки над цветами. У воды ждёт девочка в красном платье. Кликните в любую точку земли — и она туда пойдёт: она больше не ходит по кругу, она идёт туда, куда вы укажете. Бесплатно, ничего не нужно устанавливать.
Левый клик — идти туда · правая кнопка с перетаскиванием — осмотреться · колесо — зум
Камера сама медленно дрейфует, пока вы её не тронете — первый клик или перетаскивание навсегда передаёт управление вам.
Земля. Поверхность — сетка 240 × 240, каждую вершину которой поднимает одна функция высоты: несколько наложенных синусоид для пологих холмов, долина там, где течёт ручей, выровненные берега и небольшой бортик вдоль кромки воды. Та же функция расставляет каждую травинку, камень и шаг, так что ничего не висит в воздухе и не проваливается.
Ручей. По долине змеится кривая, а вода — это лента, уложенная вдоль неё. Она рябит каждый кадр и рисуется физическим прозрачным материалом, который преломляет гальку и дно под собой. Вверх и вниз по течению плавают десять рыбок, помахивая хвостами.
Трава и деревья. Берега покрывают около 25 000 отдельных травинок — каждая сужена, изогнута, по-своему окрашена и качается на ветру. На одном большом дереве и шести поменьше — тысячи карточек листьев, которые колышутся на том же ветру, а позади них в тумане растворяется кольцо тёмных хвойных.
Мелкая жизнь. По лугу рассыпаны девяносто цветов шести цветов, над ним лениво кружат шесть бабочек, с большого дерева всё время падают листья, а в воздухе висит пыльца.
Свет. Низкое солнце золотого часа стоит в шестнадцати градусах над горизонтом на физически корректном небе, отбрасывая мягкие тени и лучи сквозь крону. По небу плывут облака, а мягкое свечение и цветокоррекция завершают картинку.
«Прогулка по лесу» — это одна сцена на three.js, работающая на WebGL 2, без скачиваемых моделей и текстур-картинок: каждый меш и каждая текстура генерируются кодом при открытии страницы. Трава и листья — инстанцированные меши, несколько строк, вставленных в вершинный шейдер стандартного материала, заставляют их качаться, рейкаст по рельефу превращает ваш клик в точку назначения, а кадр перед выводом на экран проходит через свечение (bloom) и проход цветокоррекции.
Мы подробно описали, как всё устроено, с фрагментами настоящего исходного кода: Как мы сделали 3D-лес для прогулок на three.js.
Да. «Прогулка по лесу» полностью бесплатна и работает прямо в браузере. Ничего не нужно скачивать или устанавливать, регистрация не требуется.
Да, в любом современном мобильном браузере с WebGL 2. Коснитесь земли, чтобы девочка пошла туда, ведите одним пальцем, чтобы облететь камерой, и сводите пальцы для зума. Сцена довольно тяжёлая, поэтому на старых телефонах частота кадров может быть ниже.
Кликните левой кнопкой по точке на земле — и она пойдёт туда. Перетаскивание правой или левой кнопкой вращает камеру вокруг неё; колесо или щипок приближают и отдаляют — от высоты крон до уровня цветов. Перетаскивание никогда не отправляет её идти — только короткий чистый клик.
На three.js (r160) и WebGL 2. Никаких скачиваемых 3D-моделей или текстур-картинок: рельеф, деревья, трава, вода, персонажи и все текстуры генерируются кодом при загрузке страницы. Как это работает, мы рассказали в статье Как мы сделали 3D-лес для прогулок на three.js.
Каждый кадр сцена рисует около 25 000 травинок и больше 20 000 карточек листьев, а сверху — мягкие тени, прозрачная преломляющая вода, свечение и цветокоррекция. Старым или встроенным видеокартам это бывает тяжело. Помогает выйти из полноэкранного режима или уменьшить окно браузера — пикселей для отрисовки станет меньше.
Играйте и делитесь ссылкой сколько угодно. Для копирования, встраивания или коммерческого использования кода и ресурсов нужно письменное разрешение; см. раздел «Права и использование» ниже или пишите на [email protected].
«Прогулка по лесу» — сцена, графика, анимация и исходный код © 2026 ShengyuStudio (胜遇工作室). Все права защищены.
Играйте сколько угодно и присылайте ссылку кому хотите. Но, пожалуйста, не копируйте, не публикуйте заново и не распространяйте код и ресурсы этой страницы и не используйте их в коммерческих целях — в том числе не встраивайте в другие сайты, не упаковывайте в приложения и не продавайте в составе продукта — без письменного разрешения.
Нужна коммерческая лицензия, лицензия на ресурсы или просто хочется обсудить сотрудничество — пишите на [email protected]. С нами легко договориться.
Сцена построена на three.js, который используется по лицензии MIT и остаётся под авторским правом своих создателей — полный текст лицензии. Замечание выше на эту часть с открытым исходным кодом не распространяется.
Мы делаем игры для PC в Steam — колодостроитель в духе сянься, быструю выживалку с автострельбой и 3D-выживание с крафтом на острове, которое сейчас в разработке. Или попробуйте другую игрушку из этого уголка сайта.
Здесь же: Берег острова, Шторм по курсу и Stickman Spear Run.