[Перевод] Изучаем Three.js.Глава 1: Создаем нашу первую 3D-сцену, используя Three.js29.05.2014 10:18

Всем привет! Хочу начать вольный перевод замечательной книги «Learning Three.js- The JavaScript 3D Library for WebGL». Я уверен, что эта книга будет интересна не только новичкам, но и профессионалам своего дела. Ну не буду долго затягивать вступление, только приведу пример того, что мы совсем скоро сможем делать:

Создаем структуру HTML страницыПервое, что нам нужно сделать, это создать пустую HTML страницу, которую можно будет использовать в качестве основы для всех наших примеров. Это HTML структура представлена следующим образом:

В этом листинге представлена структура очень простой HTML-страницы, только с парой элементов. В блоке мы загружаем внешние библиотеки JavaScript, которые мы будем использовать в примерах. Например, в приведенном листинге мы пытаемся подключить две библиотеки: Three.js и jquery-1.9.0.js. Также в этом блоке мы прописываем пару строк для CSS оформления. В предыдущем фрагменте вы можете увидеть немного JavaScript кода. Этот небольшой фрагмент кода использует JQuery при вызове безымянной JavaScript функции, когда страница полностью загружена. Мы поместим весь код Three.js внутрь этой функции.Three.js бывает двух версий: Three.min.js: Эту библиотеку вы обычно используете при открытии Three.js сайтов. Это минимизированная версия Three.js, созданная с использованием UglifyJS, которая в два раза меньше обычной библиотеки Three.js. Все примеры и код, используемый тут, основаны на проекте Three.js r60, который был выпущен в августе 2013 г. Three.js: Это нормальная библиотека Three.js. Мы будем использовать эту библиотеку в наших примерах, так как это делает отладку намного проще, потому что код становится более читабельнее. Если мы откроем только что написанную страницу в браузере, то будем не очень шокированы. Как и следовало ожидать, все, что мы увидим это пустая страница.

В следующем разделе вы узнаете, как добавить первые пару 3D-объектов на нашу сцену.

Рендеринг и просмотр 3D-объектов На этом этапе мы создадим нашу первую сцену и добавим пару объектов и камеру. Наш первый пример будет содержать следующие объекты: Плоскость — двумерный прямоугольник, который будет служить в качестве нашей основной площадки. Она будет отображаться как серый прямоугольник в середине сцены.Куб — трехмерный куб, который мы будем рендеритьв красный.Сфера — трехмерная сфера, которую мы будем рендерить в синий.Камера — она определяет, что мы увидим в выходных данных.Оси — х, у и z. Это полезный инструмент отладки, чтобы видеть, где рендерятся объекты.Сначала посмотрим, как это выглядит в коде, а потом постараемся разобраться.