3d вращение моделей для сайта

Урок по реализации на флеше 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 вращение модели на вашем сайте

Комментарии (26)

0
yurikos
Полезная тема.
0
Felicity
Жду урока с нетерпением :-)...
0
userocean
Жду урока... :-)
0
epush
Комментарий удален
0
E_tayson
Комментарий удален
0
epush
Комментарий удален
0
E_tayson
Комментарий удален
0
epush
Комментарий удален
0
E_tayson
Комментарий удален
0
epush
Комментарий удален
0
E_tayson
Комментарий удален
0
durimaster
Какой поликаунт ?
0
охохооо..http://p3d.in/  юзайте и не парьтесь
0
E_tayson
Ваш p3d.in выдает вот такое чудесное сообщение We couldn't display your model in 3D, check out what you can do to fix this!
Так что не думаю, что это хорошая альтернатива. Раработчики minko хорошо постарались и если с головой подойди, то можно интересные вещи делать.. Можете зайти на их сайт и посмотреть. И всё работает!
0
3Delli
А аналог на ПК есть?
0
3Delli
у меня вот какой вопрос. можно ли сделать так, чтобы в плоскости z объект мог вращаться также как в плоскости xy? Поясню: когда вращаем влево вправо, то можно делать сколько угодно оборотов, а когда вверх-вниз, то объект поворачивается только то верхней точки и только до нижней не делая полного оборота. Это как-то можно реализовать?
0
E_tayson
Это по-другому нужно реализовывать, либо путем вращения самого нода, относительно неподвижной камеры. Вам нужно разобраться с нодами, а потом с ними уже делать всё что угодно. На сайте разработчика много примеров есть. Либо если Вы сильны в AS, тогда переписать класс ArcBallPanController под ваши нужды. А в данной реализации, приведенной выше, это не возможно. Потому как это самая простая реализация.
0
CeBeP_2012
"что модель єкспортирована в библиотеку" - что ты сделал с первой буквой слова "экспортирована", как ты это сделал и зачем?
0
3Delli
ɐʚʞʎg ʞɐʞ ɐʚʞʎg ¿ʞɐ⊥ ǝн йǝн ɔ о⊥Һ ɐ
А вообще переворачивать лехко.. Берешь э , потом вереворачиваешь и получается є
0
CeBeP_2012
Жжошь))
0
0x001
Это хохлятская раскладка клавиатуры.
0
greshnovk
Бомба, удивил.. Для демонстрации моделей самое оно...+10
0
Marra_MM
Большое спасибо за урок, надо будет обязательно попробовать. Можно сразу вопрос - ограничение по весу/количеству полигонов на реализацию вращения модели какое?
0
E_tayson
Это условное ограничение.. я закидывал и 200 000 полигонов, только вес флешки был 14Мб и соответственно долго грузилась. А так максимум не проверял...
+1
Parik
Есть аналог в 100500раз проще:http://ggnome.com/object2vr 
+1
Gaer
почему то не отображаются картинки в статье(((((((