WebGL тур по солнечной системе: Марс, часть 1

WebGL тур по солнечной системе: Марс, часть 1

От автора: в предыдущей статье я познакомил вас с WebGL. Также я объяснил, почему для создания нативного 3D контента на страницах буду использовать фреймворк threeJS для демонстрации возможностей WebGL. В этой статье я покажу вам, как сделать 3D камеру и кнопки для взаимодействия между WebGL контентом и HTML страницей.

Я все объясняю тщательно и пошагово по мере нашего продвижения, в этой статье вы не научитесь рендерить сцены. Об этом я расскажу в сопроводительных статьях по созданию сцен. Хотите увидеть конечный результат – можете посмотреть демо на CodePen.

Музыка сфер

WebGL может быть единственным контентом на странице, однако у данной технологии есть одно преимущество. WebGL является веб-технологией, основанной на стандартах, что значит, что ее можно бесшовно интегрировать с HTML контентом. У canvas не хватает доступности и SEO, поэтому было бы умно создавать WebGL сцену прогрессивно: текст будет представлен в виде HTML-текста с добавлением WebGL контента там, где это возможно. Для нашей страницы о Марсе нам понадобится следующая разметка:

<div id="marsloc"></div>
<article id="marsinfo">
<h1>Mars</h1>
  <div>
 <p>Home to both the Solar System’s highest mountain…
  </div>
</article>

Элемент marsloc будет хранить наш WebGL контент для рендеринга, поверх которого будет лежать HTML контент. Делается это с помощью CSS на Sass:

body {
  background: black;
  margin: 0;
  min-height: 100vh;
  color: #fff;
}
#marsloc {
  cursor: grab;
}
#marsinfo { 
  position: absolute;
  top: 0;
  width: 100%;
  padding: 2rem;
}
#marsinfo h1 {
  font-size: 8vw;
  margin-top: 0;
  font-weight: 100;
  line-height: 1;
  position: absolute;
}
#marsinfo div {
  width: 40%;
  position: absolute;
  background-color: rgba(0,0,0,0.3);
  right: 0;
  padding: 1.3rem;
  line-height: 1.6;
  font-size: 1.2rem;
  pointer-events: none;
  @media all and (max-width: 540px) {
 width: 100%;
 left: 0;
 top: 40vw;
  }
}

Курсор в виде руки на элементе #marsloc – это UI подсказка для WebGL контента. Блоку div внутри #marsinfo задано свойство pointer-events: none, чтобы его контент не мешал при взаимодействии с планетой.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Создание планеты

HTML и CSS есть, осталось подключить последнюю версию threeJS с CDN в нижней части страницы:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js">
</script>

Библиотека threeJS должна быть подключена раньше, чем мы начнем использовать ее код.

Наш следующий файл-скрипт начинается с установки ряда переменных и констант, которые будут использоваться в нашем коде:

var container, controls, camera, renderer, scene, light, marsMesh,
clock = new THREE.Clock();
const imgLoc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/";

Переменная clock поможет нам анимировать движения Марса по умолчанию. imgLoc – положение всех изображений. Переменная объявлена здесь, чтобы потом не повторяться.

Область обзора

Первый элемент, который мы создадим, будет камера. Камера нужна, чтобы «видеть» созданную нами сцену. В threeJS есть несколько типов камер:

perspectiveCamera: параллельные линии в сцене будут сходиться, если они достаточно длинные (представьте, что вы стоите посреди железнодорожных путей и смотрите вдаль). Дальние объекты будут иметь меньший размер. Задействован принцип нашего зрения, то, как мы видим мир.

OrthographicCamera: параллельные линии в сцене не пересекаются вне зависимости от их длинны. Объекты не становятся меньше по мере удаления. Такая камера хорошо подходит для рендеринга UI элементов и некоторых архитектурных видов.

Для камеры с перспективой нам также понадобится задать «область обзора» (часто сокращается как FOV). FOV – угол обзора камеры. Узкая область обзора фокусирует камеру на отдельной части сцены (представьте лошадь, на которую надели защитные очки, сужающие область обзора, чтобы та не пугалась и не отвлекалась). Визуальные элементы, не входящие в эту область, отсекаются. Широкая область обзора видит больше, но объекты становятся меньше и отодвигаются дальше.

Также нам понадобится задать соотношение сторон камеры: коэффициент отношения ширины к высоте отрендеренного вида. Вы, скорее всего, знаете про соотношение сторон из кино. Широкоформатные фильмы, как правило, более «кинематографичные» и захватывающие. Низкое соотношение сторон (ближе к квадрату) придает фильму интимности и старит фильм.

Почти во всех случаях соотношение сторон должно отражать окно пользователя: то есть ширина окна браузера, разделенная на его высоту.

Последние два значения камеры – ближняя и дальняя плоскости отсечения — near и far. По умолчанию 3D камера «смотрит» бесконечно вдаль: в отличие от реального мира, здесь объектив 3D камеры не закрывается частицами, взвешенными в атмосфере, а также не ограничивается возможностями линз. В играх этот эффект часто называют «дальностью прорисовки». Одна из причин, почему в ранних 3D играх было много тумана и узких коридоров – чем меньше элементов нужно отрисовывать, тем быстрее игра.

Нам нужно, чтобы ближняя плоскость отсечения камеры была почти вплотную к воображаемой линзе, а дальняя – на разумном расстоянии. Между двумя плоскостями отсечения будут находиться наши элементы сцены. Код:

camera = new THREE.PerspectiveCamera(45, 
window.innerWidth / window.innerHeight, 0.1, 10000);

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

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree