Урок по реализации на флеше 3d вращения модели готов. Оригинал статьи лежит на моем сайте logo4copy.png

Часть 1

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

Работать мы будем с помощью 3d движка minko. Основное его отличие от остальных, это открытый код и возможность работы в браузере без дополнительных плагинов.

Самое первое, это идем по этой ссылке https://github.com/aerys  и скачиваем исходники minko, -examples, -collada, -obj, -effects, -lighting и -picking

1.jpg

Далее скачиваем редактор http://minko.io/download/  .Устанавливаем редактор. В нем мы будем импортировать модели из 3ds Max настраивать освещение, материалы и собирать сцену для флеша.

Установка исходников 3d движка подробно шаг за шагом описана на сайте разработчика http://doc.minko.io/wiki/Compile_Minko%27s_Examples  поэтому, я повторятся не буду.

После установки всех исходников, открываем FlashBuilder и создаем новый проект.

2.jpg

После установки всех исходников, открываем FlashBuilder и создаем новый Action script проект. Назовем его, например, FlashRotate и жмем Finish

3.jpg

теперь в окне Package Explorer появился наш проект FlashRotate, а в нем наш пустой AC скрипт.

Часть 2

Теперь подключим библиотеки движка к нашему проекту. Кликаем правой кнопкой по проекту и заходим в меню Properties.Библиотеки подключаются на вкладке ActionScript Build Path

Жмем Add Project и добавляем библиотеки 3d движка..

4.jpg

После жмем Ok

Теперь добавим swc библиотеки, которые позволят правильно работать со сценами из редактора minko. Для этого в тех же свойствах проекта, на той же вкладке ActionScript Build Path жмем на Add SWC Folder и указываем путь к библиотеке

5.jpg

Теперь нужно в свойствах проекта перейти на вкладку ActionScript Compiler и принудительно установить версию SDK на 11....

6.jpg

Жмем Ok. Теперь наш проект готов к работе.

Часть 3

В этой части мы будем подготавливать нашу 3d модель для вставки её в Action script.

Открываем 3ds Max. Пусть для примера наша модель будет Teapot из стандартных примитовов. Добавим немного сегментов для реалистичности

7.jpg

Теперь можно добавить свет.. Добавим skylight, не забудьте включить cast shadows в настройках skylight

8.jpg

Советую, сразу установить модель в координаты 0,0,0

9.jpg

Применим на чайник какой нибудь матеиал, а в качестве текстуры возьмем такую..

10.jpg

Теперь нам нужно запечь текстуру. Другими словами надо сделать Render to texture. Выбираем наш Teapot и на вкладке Rendering жмем Render to texture

Выбираем Use Automatic Unwrap,с канал 2. Получить нам нужно Complete map, т.е. дифузную карту со всемя тенями, бликами и т.д.

11.jpg

Теперь создайте еще 1 материал, а в Diffuse, положите вашу запеченую текстуру и примените на чайник

12.jpg

Сконвертируйте модель в mesh и всё, теперь можно экспортировать наш чайник. Выбираем наш Teapot, жмем File/export/export selected и в качестве выходного формата выбираем OBJ. Такой формат позволит экспортировать модель уже с материалом.

13.jpg

Всё отлично. Модель готова, текстура тоже. Открываем редактор minko. Можно просто перекинуть импортируемую модель в окно редактора, а можно через меню Assets / import

14.jpg

Если всё удачно, Ваша модель появится в списке Symbols, а напротив написано Used 0. Это значит, что модель экспортирована в библиотеку, но еще не добавлена в сцену.

Берем из этого списка нашу 3d модель и переносим в окно проекций. По умолчанию в сцене всегда присутствует куб, он поможет вам отмасштабировать вашу модель. Теперь выберите в окне наш чайник, с правой стороны редактора откроется вкладка Properties. Смаштабируйте и прокрутите обьект так чтобы он принял приблизительно размеры куба.На этом работы для куба больше нет, можно его удалить, выбрав и нажав Delete.

Вот приблизительно так должна Ваша выглядеть сцена

15.jpg

Теперь жмем File/Publish/Publish for all или другое, если Вы будете делать только для десктопов, например.

16.jpg

Для публикации выбираете папку с Вашим проектом FlashRotate и непосредственно в папку Src

17.jpg

Все! Подготовка модели закончилась осталось написать код.. Но об этом в следующей части.

Часть 4

Итак, приступим к кодингу. Открываем наш проект на FlashBuilder. Пока у Вас чистый action script FlashRotate.as.

18.jpg

Исходный код скрипта качаем здесь и вставляем в свой скрипт.

Итак, жмем на Run

19.jpg

Скорее всего у Вас появится ошибка:

20.jpg

Чтобы избавится от этой напасти, открываем в нашем проекте в папке bin-debug файл FlashRotate.html через него собственно и выводится флешка. И добавляем строку:

21.jpg

Теперь всё ок! Можно пользоваться. Готовая флеш лежит в той же папке bin-debug. Не забывайте, только ставить параметр wmode, везде где будете использовать флеш. Результат можете посмотреть у меня на сайте, в самом конце урока здесь

Удачи, надеюсь Вам понравится 3d вращение модели на вашем сайте