Simple3D - простой 3D-движок на ActionScript 3.0

Simple3D - это миниатюрный 3d-движок от некого Pradeek-а, написанный на ActionScript 3.0. Данный движок поддерживает следующий набор возможностей:

- небольшая коллекция трёхмерных примитивов (Cone, Cube, Cylinder, Plane и Sphere);

- загрузка 3D-моделей в формате ASE (да, скажем честно, не самый популярный формат для трёхмерных моделей).

К достоинствам этого движка можно отнести следующее:

- просто осваивается и используется;

- добавляет к конечному размеру flash-проекта считанные килобайты (и благодаря этому его можно использовать даже при создании баннеров, когда размер строго лимитирован).

Есть и очевидные недостатки:

- ограниченный набор возможностей по созданию и манипулированию трёхмерными объектами;

- ошибки (обратите потом особое внимание на примитив Куб).

Давайте рассмотрим Simple3D более подробно...

Сперва нам надо скачать сам движок. Сделать это можно по этой ссылке или взять папку com из исходников, которые прилагаются к данному уроку (ссылка на исходники в конце поста). Движок распространяется в виде открытой библиотеки классов (что тоже можно засчитать в "плюсы" данной разработке).

Итак, движок у нас уже есть. Теперь давайте с ним работать. Для начала создадим простой трёхмерный примитив - Sphere (сфера).

ActionScript 3.0:

/* импортируем классы */ import com.simple3d.primitives.Sphere; /* создаём объект единственный параметр у конструктора объектов Sphere - это радиус сферы (100) */ var sphere:Sphere = new Sphere(100); /* позиционируем объект на сцене флеш-ролика */ sphere.x = 275; sphere.y = 200; /* добавляем объект на сцену флеш-ролика */ addChild(sphere); /* отрисовываем объект */ sphere.render();

Результат:

Поверьте на слово - это сфера :-) Особо хочу подчеркнуть, что получившийся флеш-ролик весит ... менее 5 Kb. А если вас не устраивает цвет (по-умолчанию объекты окрашиваются в чёрный цвет), то это легко исправить...

ActionScript 3.0:

/* импортируем классы */ import com.simple3d.primitives.Sphere; /* создаём объект единственный параметр у конструктора объектов Sphere - это радиус сферы (100) */ var sphere:Sphere = new Sphere(100); /* перекрасим объект в красный цвет */ sphere.color = 0xff0000; /* позиционируем объект на сцене флеш-ролика */ sphere.x = 275; sphere.y = 200; /* добавляем объект на сцену флеш-ролика */ addChild(sphere); /* отрисовываем объект */ sphere.render();

Результат:

Примитивы в Simple3D расширяют класс Sprite и манипуляции, доступные для спрайтов, можно осуществлять и с трёхмерными примитивами Simple3D. Например, мы можем поворачивать и вращать наши трёхмерные объекты...

ActionScript 3.0:

/* импортируем классы */ import com.simple3d.primitives.Sphere; import flash.events.Event; /* создаём объект единственный параметр у конструктора объектов Sphere - это радиус сферы (100) */ var sphere:Sphere = new Sphere(100); /* перекрасим объект в красный цвет */ sphere.color = 0xff0000; /* позиционируем объект на сцене флеш-ролика */ sphere.x = 275; sphere.y = 200; /* добавляем объект на сцену флеш-ролика */ addChild(sphere); /* поворачиваем объект на 45 градусов */ sphere.rotationY = 45; /* вращаем объект */ addEventListener(Event.ENTER_FRAME, onEnterFrames); function onEnterFrames(event:Event):void { /* поворачиваем на 1 градус в каждом кадре */ sphere.rotate(1); /* перерисовываем объект */ sphere.render(); }

Результат:

Примитив можно не только покрасить в определённый цвет, но и "натянуть" на него текстуру. В качестве такой текстуры должен выступать объект класса BitmapData.

ActionScript 3.0:

/* импортируем классы */ import com.simple3d.primitives.Sphere; import flash.events.Event; import flash.display.BitmapData; /* создаём текстуру с помощью шума Перлина */ var bitmapData:BitmapData = new BitmapData(100,100,false,0x000000); bitmapData.perlinNoise(100,100,10,10,true,true); /* создаём объект первый параметр - это радиус сферы (100) второй параметр - текстура */ var sphere:Sphere = new Sphere(100,bitmapData); /* перекрасим объект в красный цвет */ sphere.color = 0xff0000; /* позиционируем объект на сцене флеш-ролика */ sphere.x = 275; sphere.y = 200; /* добавляем объект на сцену флеш-ролика */ addChild(sphere); /* поворачиваем объект на 45 градусов */ sphere.rotationY = 45; /* вращаем объект */ addEventListener(Event.ENTER_FRAME, onEnterFrames); function onEnterFrames(event:Event):void { /* поворачиваем на 1 градус в каждом кадре */ sphere.rotate(1); /* перерисовываем объект */ sphere.render(); }

Результат:

Эффект будет ещё интереснее, если в качестве текстуры использовать картинку. Например, такую:

Текстура планеты Земля

В Adobe Flash это реализуется чрезвычайно просто (о том, как превратить картинку в класс, расширяющий BitmapData, смотри пост Календарь с функцией выбора даты на ActionScript 3.0).

ActionScript 3.0:

/* импортируем классы */ import com.simple3d.primitives.Sphere; import flash.events.Event; /* создаём текстуру */ var earthmap:Earthmap = new Earthmap(); /* создаём объект первый параметр - это радиус сферы (100) второй параметр - текстура */ var sphere:Sphere = new Sphere(100,earthmap); /* перекрасим объект в красный цвет */ sphere.color = 0xff0000; /* позиционируем объект на сцене флеш-ролика */ sphere.x = 275; sphere.y = 200; /* добавляем объект на сцену флеш-ролика */ addChild(sphere); /* поворачиваем объект на 45 градусов */ sphere.rotationY = 45; /* вращаем объект */ addEventListener(Event.ENTER_FRAME, onEnterFrames); function onEnterFrames(event:Event):void { /* поворачиваем на 1 градус в каждом кадре */ sphere.rotate(1); /* перерисовываем объект */ sphere.render(); }

Результат:

Работа с остальными 3D-примитивами в Simple3d очень сильно напоминает использование рассмотренного выше примитива Сфера. Приведу примеры.

Примитив Cone (конус).

ActionScript 3.0:

/* импортируем классы */ import com.simple3d.primitives.Cone; import flash.events.Event; /* создаём текстуру */ var grid:Grid = new Grid(); /* создаём объект первый параметр - радиус конуса (50) второй параметр - высота конуса (70) третий параметр - текстура */ var cone:Cone = new Cone(50,70,grid); /* перекрасим объект в красный цвет */ cone.color = 0xff0000; /* позиционируем объект на сцене флеш-ролика */ cone.x = 275; cone.y = 200; /* добавляем объект на сцену флеш-ролика */ addChild(cone); /* поворачиваем объект на 45 градусов */ cone.rotationY = 45; /* вращаем объект */ addEventListener(Event.ENTER_FRAME, onEnterFrames); function onEnterFrames(event:Event):void { /* поворачиваем на 1 градус в каждом кадре */ cone.rotate(1); /* перерисовываем объект */ cone.render(); }

Результат:

Примитив Cube (куб).

ActionScript 3.0:

/* импортируем классы */ import com.simple3d.primitives.Cube; import flash.events.Event; /* создаём текстуру */ var grid:Grid = new Grid(); /* создаём объект первый параметр - сторона куба (200) второй параметр - текстура */ var cube:Cube = new Cube(200,grid); /* перекрасим объект в красный цвет */ cube.color = 0xff0000; /* позиционируем объект на сцене флеш-ролика */ cube.x = 275; cube.y = 200; /* добавляем объект на сцену флеш-ролика */ addChild(cube); /* поворачиваем объект на 45 градусов */ cube.rotationY = 45; /* вращаем объект */ addEventListener(Event.ENTER_FRAME, onEnterFrames); function onEnterFrames(event:Event):void { /* поворачиваем на 1 градус в каждом кадре */ cube.rotate(1); /* перерисовываем объект */ cube.render(); }

Результат:

Примитив Cylinder (цилиндр).

ActionScript 3.0:

/* импортируем классы */ import com.simple3d.primitives.Cylinder; import flash.events.Event; /* создаём текстуру */ var brick:Brick = new Brick(); /* создаём объект первый параметр - радиус цилиндра (40) второй параметр - высота цилиндра (100) третий параметр - текстура */ var cylinder:Cylinder = new Cylinder(40,100,brick); /* перекрасим объект в красный цвет */ cylinder.color = 0xff0000; /* позиционируем объект на сцене флеш-ролика */ cylinder.x = 275; cylinder.y = 200; /* добавляем объект на сцену флеш-ролика */ addChild(cylinder); /* поворачиваем объект на 45 градусов */ cylinder.rotationY = 45; /* вращаем объект */ addEventListener(Event.ENTER_FRAME, onEnterFrames); function onEnterFrames(event:Event):void { /* поворачиваем на 1 градус в каждом кадре */ cylinder.rotate(1); /* перерисовываем объект */ cylinder.render(); }

Результат:

Примитив Plane (плоскость).

ActionScript 3.0:

/* импортируем классы */ import com.simple3d.primitives.Plane; import flash.events.Event; /* создаём текстуру */ var tile:Tile = new Tile(); /* создаём объект первый параметр - ширина плоскости второй параметр - высота плоскости третий параметр - текстура */ var plane:Plane = new Plane(200,200,tile); /* перекрасим объект в красный цвет */ plane.color = 0xff0000; /* позиционируем объект на сцене флеш-ролика */ plane.x = 275; plane.y = 200; /* добавляем объект на сцену флеш-ролика */ addChild(plane); /* поворачиваем объект на 45 градусов */ plane.rotationY = 45; /* вращаем объект */ addEventListener(Event.ENTER_FRAME, onEnterFrames); function onEnterFrames(event:Event):void { /* поворачиваем на 1 градус в каждом кадре */ plane.rotate(1); /* перерисовываем объект */ plane.render(); }

Результат:

Если что-то непонятно, то можете скачать исходники к данному уроку - скачать исходник (под Adobe Flash CS 5.5). К исходникам прилагается и сама библиотека классов Simple3D.

Автор: admin

Дата добавления: 2012-06-15

Просмотров: 4570

Рейтинг поста: +6-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2017-07-31
Подробно и показано. С примерами. Движок не зря называется простом.
Комментатор
Комментарий добавил(а): sergey
Дата добавления: 2017-07-30
а как в нем работать? подробно плиз...
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-07-16
Да, ошибка в кубе - это серьёзный недостаток данного движка, особенно учитывая востребованность именно этого примитива...
Комментатор
Комментарий добавил(а): Александр
Дата добавления: 2012-07-16
Разочаровали ошибки в кубе и отрисовка цилиндра, только "ближней к монитору" половины. А так движок довольно интересный, стоит прийти домой и покопаться в исходниках.
Комментатор
Комментарий добавил(а): Людмила
Дата добавления: 2012-06-15
Очень интересная статья, как всегда.
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика