Урок по реализации на флеше 3d вращения модели готов. Оригинал статьи лежит на моем сайте
Часть 1Предалагаю реализацию 3d вращения для вашего сайта написанную на флеше. Итак что, же нам нужно для начала работы..
Работать мы будем с помощью 3d движка minko. Основное его отличие от остальных, это открытый код и возможность работы в браузере без дополнительных плагинов.
Самое первое, это идем по этой ссылкеhttps://github.com/aerys и скачиваем исходники minko, -examples, -collada, -obj, -effects, -lighting и -picking
Далее скачиваем редакторhttp://minko.io/download/ .Устанавливаем редактор. В нем мы будем импортировать модели из 3ds Max настраивать освещение, материалы и собирать сцену для флеша.
Установка исходников 3d движка подробно шаг за шагом описана на сайте разработчикаhttp://doc.minko.io/wiki/Compile_Minko%27s_Examples поэтому, я повторятся не буду.
После установки всех исходников, открываем FlashBuilder и создаем новый проект.
После установки всех исходников, открываем FlashBuilder и создаем новый Action script проект. Назовем его, например, FlashRotate и жмем Finish
теперь в окне Package Explorer появился наш проект FlashRotate, а в нем наш пустой AC скрипт.
Теперь подключим библиотеки движка к нашему проекту. Кликаем правой кнопкой по проекту и заходим в меню Properties.Библиотеки подключаются на вкладке ActionScript Build Path
Жмем Add Project и добавляем библиотеки 3d движка..
После жмем Ok
Теперь добавим swc библиотеки, которые позволят правильно работать со сценами из редактора minko. Для этого в тех же свойствах проекта, на той же вкладке ActionScript Build Path жмем на Add SWC Folder и указываем путь к библиотеке
Теперь нужно в свойствах проекта перейти на вкладку ActionScript Compiler и принудительно установить версию SDK на 11....
Жмем Ok. Теперь наш проект готов к работе.
В этой части мы будем подготавливать нашу 3d модель для вставки её в Action script.
Открываем 3ds Max. Пусть для примера наша модель будет Teapot из стандартных примитовов. Добавим немного сегментов для реалистичности
Теперь можно добавить свет.. Добавим skylight, не забудьте включить cast shadows в настройках skylight
Советую, сразу установить модель в координаты 0,0,0
Применим на чайник какой нибудь матеиал, а в качестве текстуры возьмем такую..
Теперь нам нужно запечь текстуру. Другими словами надо сделать Render to texture. Выбираем наш Teapot и на вкладке Rendering жмем Render to texture
Выбираем Use Automatic Unwrap,с канал 2. Получить нам нужно Complete map, т.е. дифузную карту со всемя тенями, бликами и т.д.
Теперь создайте еще 1 материал, а в Diffuse, положите вашу запеченую текстуру и примените на чайник
Сконвертируйте модель в mesh и всё, теперь можно экспортировать наш чайник. Выбираем наш Teapot, жмем File/export/export selected и в качестве выходного формата выбираем OBJ. Такой формат позволит экспортировать модель уже с материалом.
Всё отлично. Модель готова, текстура тоже. Открываем редактор minko. Можно просто перекинуть импортируемую модель в окно редактора, а можно через меню Assets / import
Если всё удачно, Ваша модель появится в списке Symbols, а напротив написано Used 0. Это значит, что модель экспортирована в библиотеку, но еще не добавлена в сцену.
Берем из этого списка нашу 3d модель и переносим в окно проекций. По умолчанию в сцене всегда присутствует куб, он поможет вам отмасштабировать вашу модель. Теперь выберите в окне наш чайник, с правой стороны редактора откроется вкладка Properties. Смаштабируйте и прокрутите обьект так чтобы он принял приблизительно размеры куба.На этом работы для куба больше нет, можно его удалить, выбрав и нажав Delete.
Вот приблизительно так должна Ваша выглядеть сцена
Теперь жмем File/Publish/Publish for all или другое, если Вы будете делать только для десктопов, например.
Для публикации выбираете папку с Вашим проектом FlashRotate и непосредственно в папку Src
Все! Подготовка модели закончилась осталось написать код.. Но об этом в следующей части.
Итак, приступим к кодингу. Открываем наш проект на FlashBuilder. Пока у Вас чистый action script FlashRotate.as.
Исходный код скрипта качаем здесь и вставляем в свой скрипт.
Итак, жмем на Run
Скорее всего у Вас появится ошибка:
Чтобы избавится от этой напасти, открываем в нашем проекте в папке bin-debug файл FlashRotate.html через него собственно и выводится флешка. И добавляем строку:
Теперь всё ок! Можно пользоваться. Готовая флеш лежит в той же папке bin-debug. Не забывайте, только ставить параметр wmode, везде где будете использовать флеш. Результат можете посмотреть у меня на сайте, в самом конце урока здесь