В этом уроке мы создадим 3D модель атома с вращающимися вокруг него электронами.
Этот проект был выполнен исключительно с помощью ActionScript 3.0. И использовался при этом FlashDevelop, который вы можете скачать здесь.
Перед тем, как приступить к уроку, давайте посмотрим на готовый результат:
Подвигайте мышь. Как видите, камера свободно вращается вокруг атома. Выберите какой-нибудь ракурс и кликните по сцене. Теперь атом не перемещается по оси Z. То есть не приближается и не отдаляется. Кликните по сцене еще раз. Движение атома по оси Z снова работает.
Шаг 1: Создайте проект.
Запустите FlashDevelop. Выберите в верхнем меню Project -> New Project. В появившемся окне выберите AS3.0 Project и папку для проекта. Нажмите ОК.
Шаг 2: Подключение PaperVision3D.
Скачайте библиотеку с сайта PaperVision3D. И поместите библиотеку в папку проекта "libs". Затем во FlashDevelop кликните правой кнопкой по библиотеке PaperVision3D и выбире пункт "Add to Library".
Шаг 3: Пишем код.
Открываем во FlashDevelop файл Main.as. Он лежит в папке проекта "src" и пишем в нём следующий код:
public class Main extends Sprite {
//Спрайт заднего фона.
private var _backGround:Sprite
//Кнопка переключения атомов.
private var _btn:SwitchButton
//Текущий атом.
private var _atomType:Boolean = true
//Атом гелия.
private var _helium3:Helium3Atom
//атом карбона.
private var _carbon:CarbonAtom
//Конструктор.
public function Main():void {
//Если класс уже на сцене, то начать инициализацию, иначе ждать добавления класса на сцену.
if ( stage ) {
Init()
}
else {
this.addEventListener( Event.ADDED_TO_STAGE, Init )
}
}
//Инициализация.
private function Init( e:Event = null ):void {
//Удалить слушатель.
this.removeEventListener( Event.ADDED_TO_STAGE, Init )
//Слушатель изменения размеров окна.
stage.addEventListener( Event.RESIZE, CreateBackground )
//Спрайт заднего фона.
_backGround = new Sprite()
stage.addChild( _backGround )
//Рисуем задний фон.
CreateBackground()
//Создаем атомы.
_helium3 = new Helium3Atom()
stage.addChild( _helium3 )
_carbon = new CarbonAtom()
stage.addChild( _carbon )
//Прячем атом карбона.
_carbon.alpha = 0
//Создаем кнопку.
_btn = new SwitchButton( _backGround, new Point( 480, 450 ) )
//Слушаем клик по кнопке.
_btn.addEventListener( MouseEvent.CLICK, Change )
}
//Функция рисования заднего фона.
private function CreateBackground( e:Event = null ):void {
//Создаем удобную ссылку на графику заднего фона.
var g:Graphics = _backGround.graphics
//Очищаем графику.
g.clear()
//Рисуем градиент.
var fillType:String = GradientType.RADIAL
var colors:Array = [0x222277, 0x2220033]
var alphas:Array = [1, 1]
var ratios:Array = [0x00, 0xFF]
var matr:Matrix = new Matrix()
matr.createGradientBox( stage.stageWidth, stage.stageHeight, 0, 0, 0 )
var spreadMethod:String = SpreadMethod.PAD
g.beginGradientFill( fillType, colors, alphas, ratios, matr, spreadMethod )
g.drawRect( 0, 0, stage.stageWidth, stage.stageHeight )
}
}
}
Теперь создадим класс "Helium3Atom.as". Это будет класс нашего атома гелия. Для этого во FlashDevelop выделим папку "src", затем кликнем правой кнопкой мыши и выберем пункт Add -> New Class.
В появившемся окне зададим имя класса и имя класса, от которого будем наследовать наш класс - "org.papervision3d.view.BasicView".
Откроется файл нашего класса. Напишем в этом файле следующий код:
//Массив для электронов и из орбит.
private var _do3DArray:Array
//Коэфициент плавности движения камеры.
private var _easeOut:Number = 0.3
//Амплитуды движения атома по осям.
private var _reachX:Number = 0.1
private var _reachY:Number = 0.1
private var _reachZ:Number = 0.5
//Амплитуды вращения камеры.
private var _rotX:Number = 0.5
private var _rotY:Number = 0.5
//Текущие значения поворотов камеры по оси х и у.
private var _camPitch:Number = 0
private var _camYaw:Number = 0
//Текущее значение положения камеры по оси z.
private var _zDist:Number = 4
//Цвета нейтронов и протонов в атоме.
private var _colorArray:Array = [0x0000ff, 0xff0000, 0xffff00]
//Выключатель движения атома по оси z.
private var _freeOrbit:Boolean = true
//Конструктор.
public function Helium3Atom () {
//Если класс уже на сцене, то начать инициализацию, иначе ждать добавления класса на сцену.
if ( stage ) {
Init ()
}
else {
this.addEventListener( Event.ADDED_TO_STAGE, Init )
}
//Начинаем отрисовку атома.
this.startRendering()
}
//Функция клика по сцене.
private function Click( e:MouseEvent ):void {
//Включаем или выключаем движение атома по оси Z. (Приближение и отдаление)
_freeOrbit = ! _freeOrbit
}
//Функция создания атома.
private function CreateAtom():void {
//Создаем массив для электоронов и орбит.
_do3DArray = []
//Создаем освещение.
var light:PointLight3D = new PointLight3D()
//Позиционируем источник света.
light.x = 300
light.y = 700
light.z = 0
//Добавляем свет на сцену.
scene.addChild( light )
//Создаем контейнер для атома.
var atom:DisplayObject3D = new DisplayObject3D()
//Помещаем на сцену.
this.scene.addChild( atom )
//Создаем контейнер для протонов и нейтронов в ядре атома.
var nucleus:DisplayObject3D = new DisplayObject3D()
nucleus.rotationX = 90
atom.addChild( nucleus )
//Создаем вспомогательную сферу. Вершины этой сферы будут координатами протонов и нейтронов в ядре атома.
//Она не отображается на сцене.
var sphere:Sphere = new Sphere ( null, 25, 1, 1 )
//Рисуем ядро атома из из разноцветных сфер.
for ( var i:uint = 1; i 175 ) _camPitch = 175
this.camera.orbit( _camPitch, _camYaw )
}
}
}
}
Теперь создадим второй атом карбона, который будет появляться при нажатии на кнопку "Сменить". Создадите файл "CarbonAtom.as" и напишите в этом файле код:
private function createAtom ():void
{
_do3DArray = [];
var light:PointLight3D = new PointLight3D;
light.x = 300; light.y = 700; light.z = 0;
scene.addChild (light)
var atom:DisplayObject3D = new DisplayObject3D;
scene.addChild (atom);
var nucleus:DisplayObject3D = new DisplayObject3D;
atom.addChild (nucleus);
var sphere:Sphere = new Sphere (null, 60, 4, 4);
for (var i:uint = 1; i 175) _camPitch = 175;
camera.orbit (_camPitch, _camYaw);
}
}
}
}
В классе атома карбона нет комментариев, посколько он почти полностью повторяет класс атома гелия. Различие лишь в функции создания атома и электронов, так как количество частиц атома карбона отличается от количества частиц гелия. :)
Теперь нам осталось создать кнопку "Сменить". И всё сразу заработает. Создайте файл "SwitchButton.as" и напишите в этом файле код:
public class SwitchButton extends SimpleButton {
//Состояния кнопки.
private var _states:Array
//Цвета состояний.
private const _colors:Array = [0x000000, 0x555555, 0xaaaaaa]
public function SwitchButton( container:DisplayObjectContainer, pos:Point ) {
//Добавляем на сцену.
container.addChild( this )
//позиционируем.
this.x = pos.x
this.y = pos.y
//Рисуем состояния.
_states = []
for ( var i:int = 0; i
Теперь скомпилируйте проект во FlashDevelop, нажав меню Project -> Test Project. И если всё сделано правильно, то перед вами появится атом гелия. А при нажатии на кнопку "Сменить" появится атом карбона. Красота!
На этом всё. Если у вас возникли какие-то проблемы, то сприсите о том, как их решить, на нашем форуме.
Если у вас было хоть раз желание сделать что-то новое и необычное, то этот видеокурс для вас! Знания ActionScript 3.0 вдохнут в ваши проекты новую жизнь, позволив тем самым поднять их на новый уровень
С помощью этого видеокурса вы пройдёте путь от новичка до Объектно-Ориентированного Программирования, сможете работать со многими популярными библиотеками и научитесь создавать сайты во flash!+ Видеокурс по PaperVision3D в подарок!
Видеокурс содержит 119 видеоуроков в 12 главах. На сегодняшний день это единственный видеокурс, таких масштабов
Первый в интернете видеокурс по популярной as библиотеке PaperVision3D! C этим курсом вы поймете, что 3D во flash – это просто и интересно!
55 видео уроков
Шаг за шагом расскажут и покажут, как делать свои интерактивные 3D проекты во flash. Курс сопровождается множеством примеров, поэтому он особенно легко усваивается.
Комментарии
А расскажите как делать из карт 3d объекты, ну чтото вроде как этакарта
hello
Про это вы можете узнать из курса по papervision3d -https://disk.easyflash.org/magazin/easyflash/as3
1) Админ всегда прав
2) Если админ не прав, смотри пункт 1
Мы в контакте -
Ок
hello