Преобразование растрового изображения в векторное изображение Tree.js и HTML (ознакомиться с полным кордом можно по ссылке на мой репозиторий )
Рубрика «three.js»
Создание гиперкуба с помощью Three.js: как увидеть четвертое измерение?
2024-09-28 в 18:10, admin, рубрики: 3d графика, javascript, three.js, WebGL, ГиперкубЗадавались ли вы когда-нибудь вопросом, можно ли выйти за рамки привычных трёх измерений? Мы привыкли видеть мир в 3D: кубы, сферы, пирамиды — все эти объекты легко вообразить и визуализировать. Но что, если мы попробуем заглянуть в четвёртое измерение? Это звучит как научная фантастика, но в мире математики и компьютерной графики всё возможно.
Сегодня я расскажу вам, как создать интерактивный гиперкуб, или тессеракт — четырехмерный аналог обычного куба. Мы будем использовать Three.js, популярную библиотеку для работы с 3D-графикой в браузере.
Почему гиперкуб?
Все дороги ведут в ГТА, на этот раз в мой браузерный вариант
2024-08-09 в 18:49, admin, рубрики: cannon.js, cannonjs, GTA, javascript, three.js, threejs, браузерная игра
«Йо-хо-хо»-2 или перевозка рабов и трупов оппозиционеров
2022-10-02 в 20:25, admin, рубрики: cannon.js, canvas, javascript, three.js, WebGL, браузерная игра, игра про пиратов, разработка игрКак создать игру Tetris с помощью Three.js
2022-08-14 в 10:00, admin, рубрики: javascript, ruvds_перевод, tetris, three.js, Блог компании RUVDS.com, веб-приложения, Работа с 3D-графикой, разработка игр, трёхмерная графика
Вспомните, как мы играем в «Тетрис». При движении блока мы свободно перемещаем и вращаем его. Кубы, из которых состоят блоки, соединены, поэтому должно быть соединено и их описание в коде. С другой стороны, когда мы завершаем горизонтальный срез (в 2D это строка), кубы удаляются и блок, к которым они принадлежали, на этом этапе уже не важны. На самом деле, они и не должны быть важны, ведь некоторые кубы из блока могут удалиться, а другие остаться на поле.
Для отслеживания начальной точки куба пришлось бы постоянно разделять и объединять геометрию, и поверьте мне, это был бы сущий хаос. В оригинальном двухмерном «Тетрисе» показателем исходного блока был цвет квадрата. Однако в 3D нам нужен удобный способ демонстрации оси Z, и лучше всего для этого подходит цвет.
В нашей игре кубы будут соединены, когда они динамичны и разделены, когда они статичны.
Читать полностью »
Браузерная игра про пиратов
2022-07-16 в 16:18, admin, рубрики: cannon.js, canvas, javascript, three.js, WebGL, игра про пиратов, разработка игр
«Йо-хо-хо!» - невольно приходит на ум при любом взаимодействии с морем, передвигаешься ли на речном трамвайчике или же сидишь в баре круизного корабля. В последнем случае еще можно приобрести бутылку рому. Море привлекает своими волнами, закатами и рассветами. А особенно прикольно, когда на море завелись злые пираты. Ну... если это мы, конечно же.
Море, пираты — 3D онлайн игра в браузере
2020-07-09 в 12:44, admin, рубрики: node.js, three.js, WebSocket, игры, разработка игр, реал-таймПриветствую пользователей Хабра и случайных читателей. Это история разработки браузерной многопользовательской онлайн игры с low-poly 3D графикой и простейшей 2D физикой.
Позади немало браузерных 2D мини-игр, но подобный проект для меня в новинку. В gamedev решать задачи, с которыми ещё не сталкивался, может быть довольно увлекательно и интересно. Главное — не застрять со шлифовкой деталей и запустить рабочую игру пока есть желание и мотивация, поэтому не будем терять время и приступим к разработке!
Введение в 3D: основы Three.js
2020-03-30 в 13:31, admin, рубрики: 3d-моделирование, javascript, three.js, WebGL, Работа с 3D-графикойCложность Web меняется ежедневно, и его возможности растут так же быстро, особенно с 3D-рендерингом. Кто только начинает вливаться в тему 3D — добро пожаловать под кат.
Новая игра со старой атмосферой на Three.js. Часть 2
2019-10-20 в 15:18, admin, рубрики: canvas, javascript, nw.js, three.js, WebGL, игры, разработка игрВ первой части я рассказал о проблемах, с которыми я столкнулся в процессе создания 3D игры под браузер c использованием Three.js. Теперь я хотел бы подробно остановиться на решении некоторых важных задач при написании игры, типа конструирования уровней, определения столкновений и адаптации изображения под любые пропорции окна браузера.
Схемы уровней
Собственно, сами уровни создаются в 3D редакторе, а именно, их геометрия, наложение текстур, запекание теней и т.д. Все это я описал в первой части. Зачем нужны еще какие-то схемы? Дело в том, что Three,js не предлагает какого-то физического движка, и я использую схемы уровней для определения препятствий.
Читать полностью »
Новая игра со старой атмосферой на Three.js
2019-09-20 в 19:41, admin, рубрики: canvas, javascript, nw.js, three.js, WebGL, игры, разработка игрСуществует множество поклонников старых игр. И они не прочь пустить скупую ностальгическую слезу и нет-нет, да сыграть в «Арканоид», «Пакмана» или «Принца Персии», как двадцать, тридцать, сорок или — подставьте нужное число — лет назад. DOS-box и эмуляторы — им в помощь. Да, что там, я недавно смотрел стрим самого первого 2D «Принца Персии» на Ютьюбе, где довольно молодой «стример» после прохождения очередного смертельного препятствия, смахнув со лба пот рукой, изрек: «Мне еще никогда не было так страшно в компьютерной игре». То есть, даже молодежь способна оценить хардкорность и крутизну старых игр.
Я подумал, а почему бы не создать новую игру в подобном стиле? Да, существуют различные ремейки и клоны. Также, радуют современные игры в стиле пиксель-арт. Однако, все они, как правило, повторяют квесты, механики и иногда вообще полностью левел-дизайн старых игр, по мотивам которых они сделаны. Ну либо, наоборот, предлагают совершенно новый сюжет и локации, являя собой просто визуальную стилизацию «под старину». А что, если представить, какой была бы новая часть старой игры, выйди она следом за последней из серии? Я решил такую создать.
Читать полностью »