Papervision3D — это библиотека классов для ActionScript 3.0, которая позволяет создавать полноценные 3D флеш-ролики.
Таким образом пользователю не требуется качать какие-то альтернативные плагины (как это было с VRML, например), кроме собственно Flash Player'a.
Итак, что же повзоляет нам Papervision3D:
— Добавлять во флеш-ролик встроенные примитивы: Plane, Sphere, Cylinder, Cone, Cube, Paperplane, Arrow
— Импортировать модели созданные в 3D-редакторах, вместе с анимацией.
— Накладывать на объекты в качестве материалов однородные цвета, битмапы, мувиклипы и даже потоковое видео
— Использовать источники света
— Накладывать встроенные во флеш фильтры (Blur, Glow и т.п.) на 3D объекты
— Управлять отдельными вершинами и фейсами объектов. Пример
— Назначать на 3D объекты и материалы обработчики событий (клик, наведение мышки и т.п.)
Не стоит забывать, что Papervision3D требователен к ресурсам пользователя, так что не стоит загружать ролик большим количеством моделей и придерживаться максимального количества фейсов 3000
В данной обзорной статье я хочу рассказать немного о самом движке и показать его использование, на примере создания вращающейся сферы. Предполагается, что читатель знаком с основами программирования на ActionScript 3.0
Установка Papervision3D
Итак, качаем и устанавливаем последнюю версию библиотеки отсюда
В статье была использована версия Papervision3D 2.1.932 и т.к. движок периодически обновляется, добавляются и изменяются какие-то вещи, то для полной совместимости вы можете скачать эту версию тут
Я использую одну глобальную папку для хранения всех классов, поэтому установка заключается в копировании содержимого архива в эту папку:
Затем в настройках флеша у меня добавлен путь к этой глобальной папке с классами:
Таким образом мне не приходится копировать дополнительные классы в папку с каждым новым проектом (конечно, если только мне не нужно переслать кому-то исходники)
Теория
Перед тем, как приступить непосредственно к коду, давайте разберемся с теорией, чтобы понять, как работает Papervision3D.
Как известно, во флеше используется двумерное пространтство и лево-рукая декартова система координат («Left-handed cartesian coordinate system») — это, когда начало координат начинается в левом-верхнем углу экрана, т.е. чем выше значение «Y», тем ниже объект располагается на сцене, а чем выше координата «X», тем он правее:
В Papervision3D пространство трехмерное, а значит добавляется новая координата — «Z». И весь отчет начинается с середины экрана, правда в отличии, например, от 3dsmax'a, координата «Y» отвечает за «высоту», а «Z», за «глубину»:
Итак, каждый наш новый проект в Papervision3D состоит из следующих частей:
1. Scene — некий контейнер, в котором находятся все наши объекты.
2. Camera — «глаза», которыми мы смотрим на сцену (по-умолчанию, располагается по координатам x: 0, y: 0, z: -1000)
3. Viewport — окно проекции, сквозь которое видна наша сцена. Можно провести аналогию с 3dsmax, в котором присутствуют 4 окна проекции: «Top», «Left», «Front» и «Perspective»
4. Objects — собственно то, что мы видим на сцене — 3D объекты — примитивы (Plane, Sphere, Cube и т.п.) или загружаемые модели, созданные в 3D пакетах (в Papervision3D известны, как ASCollada Object)
5. Materials — текстуры, которые накладывается на наши 3д объекты (WireframeMaterial, ColorMaterial, MovieMaterial и т.п.)
6. Render Engine — движок, который отрисовывает наши объекты на сцене.
Кстати говоря, процесс рендеринга состоит из трех этапов: инициализация (определение сцены, камер, объектов и т.п.), проекция (расположение вершин объектов так, чтобы мы их видели трехмерными на двумерной плоскости) и собственно сама отрисовка (соединение вершин между собой и «натягивание» материалов на объект). Называется весь этот увлекательный прооцесс — «Rendering pipeline»
Думаю теории на этом хватит. Так что перейдем к практике :)
Практика
Для начала работы нам требуется инициализировать движок: добавить сцену, вьюпорт, камеру, движок отрисовки.
Но каждый раз создавать одни и те же стандартные объекты слишком долго, поэтому разработчики предусмотрели класс BasicView, в котором создаются требуемые нам объекты. Для его использования, достаточно создать наш новый класс посредством расширения класса BasicView. В общем и целом это выглядит следующим образом:
package {
import flash.events.Event;
import org.papervision3d.view.BasicView;
public class PV3DClass extends BasicView {
public function PV3DClass() {
stage.frameRate = 40;
init();
startRendering();
}
private function init():void {
//Здесь мы будем создавать наши 3D объекты
}
override protected function onRenderTick(e:Event=null):void {
//Этот метод вызывается каждый раз при ENTER_FRAME
super.onRenderTick();
}
}
}
* This source code was highlighted with Source Code Highlighter.
Я сохранил данный класс, как сниппет и при создании нового файла просто копирую его, заменя имена класса и конструктора. Панельку для сниппетов можно скачать отсюда для Flash CS4 theflashblog.com/?p=771, для Flash CS3: theflashblog.com/?p=346
Теперь у нас есть все, для того, чтобы добавить наш первый 3D объект. В данной статье мы просто создадим сферу и заставим её вращаться вокруг осей X и Y.
Конструктор создания сферы выглядит следующим образом:
Sphere(material:MaterialObject3D = null, radius:Number = 100, segmentsW:int = 8, segmentsH:int = 6)
material — материал, которым будет покрыта наша сфера. Если оставить значение null, что мы и сделаем в нашем примере, то будет использоваться стандарный материал WireframeMaterial
radius — радиус нашей сферы
segmentsW — количество сегментов по горизонтали
segmentsH — количество сегментов по вертикали
Итак, наш обновленный класс выглядит следующим образом (новые строки в полужирном начертании):
package {
import flash.events.Event;
import org.papervision3d.view.BasicView;
//Импортируем класс, позволяющий создавать сферы:
import org.papervision3d.objects.primitives.Sphere;
public class FirstPV3D extends BasicView {
//Инициализируем переменную класса для нашей сферы:
private var sphere:Sphere;
public function FirstPV3D() {
stage.frameRate=40;
init();
startRendering();
}
private function init():void{
//Создаем новую сферу с радиусом в 300px:
sphere = new Sphere(null, 300);
//Добавляем нашу сферу на сцену:
scene.addChild(sphere);
}
override protected function onRenderTick(e:Event=null):void {
//Добавляем вращение сферы по локальным осям X, Y:
sphere.localRotationY++;
sphere.localRotationX++;
super.onRenderTick();
}
}
}
* This source code was highlighted with Source Code Highlighter.
Тестим ролик и получаем нашу сферу:
Заключение
Ну вот вроде бы и все об основах. Я сам нахожусь в процессе изучения данного движка и эксперементов с ним и надеюсь, что данной статьей подтолкну вас к изучению данной темы, т.к. она открывает нам большие возможности в вебе.
Исходники этой флешки тут (зеркало)
И на последок ссылки:
Страница Papervision3D на Google Code
Документация (зеркало)
Официальный блог движка
Блог John Lindquist по Papervision3D
Галереи флеш-сайтов с использованием Papervision3D:
www.papervisionshowcase.com
dailypv3d.wordpress.com
Почитать о Papervision3D:
Книга «Papervision3D Essentials» by Paul Tondeur and Jeff Winder
Статьи на InsideRIA
Follow me on twitter