Как создать 3D сайт

Нынешние технологии давно позволяют делать невероятно зрелищные сайты, однако в сети до сих пор засилье архаичного дизайна. Этот видеоурок по созданию сайта призван стимулировать эволюцию дизайна сайтов и здесь мы детально разберем как сделать 3D сайт стандартными средствами: HTML, CSS и JS.

В данной статье мы рассматриваем опыт создания трехмерного сайта, в котором основными объектами несущими информацию, являются кубы. Куб представляет собой раздел сайта, на гранях которого размещаются анонсы статей. При клике на анонсы, то есть, на грани кубов, открываются страницы материалов в модальном окне. Пространством, в котором расположены кубы, можно управлять в точности так же, как и в любой программе 3D моделирования.

На самом деле возможности создания 3d сайтов не ограничиваются фигурами кубов. Вы можете сделать любые формы: граненые цилиндры, составные фигуры, полигональные объекты и т.д. Или, например, придумать идею, где в текстурированном под интерьер коридоре висят картины, которые являются страницами сайта. В общем, возможности ограничиваются лишь вашими идеями и ресурсами браузера. Ну, а пример с кубами, как самый простой для понимания, является входной точкой для понимания, как сделать 3d сайт.

Существуют попытки делать трехмерные сайты с использованием библиотек, например, таких как Three.js. Однако, в своей основной массе, подобные библиотеки работают с Canvas и такой способ реализации препятствует нормальной индексации сайтов в поисковых системах. Способ создания трехмерный сайтов в данном уроке основывается на стандартных элементах HTML, и поэтому весь текст сайта, картинки и прочий контент является полностью доступным для поисковиков, то есть, индексируемым.

В примере 3d cайта с кубами, рассматриваемого в данном уроке, используется также классическая навигация посредством меню. Вы можете оценить насколько это удобно, когда, помимо возможности перемещения в трехмерном пространстве, имеются и традиционные возможности. Это, прежде всего, сокращает путь к искомому материалу, а также создает игровое ощущение при пользовании сайтом, тем самым только повышая интерес к нему. Кроме того, материалы сайта, расположенные в трехмерном пространстве почти все находятся на виду, а не скрытый под структурными уровнями. Таким образом, к ним обеспечивается непосредственный быстрый доступ.

Данный урок по разработке сайта выполняется последовательно. Он начинается с дизайна пространства, затем рассматривается разработка навигации в трехмерном пространстве, а далее описывается способ размещения контента. Вам не потребуется никаких дополнительных программных пакетов и библиотек, кроме среды разработки, поскольку вебсайт создается стандартными средствами: HTML, CSS и JavaScript.