Создание анимированного атома с помощью PaperVision3D

Информация
Автор/переводчик: 
ProcXel.A
Описание: 

В этом уроке мы создадим 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" и пишем в нём следующий код:

package {
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.SpreadMethod;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Matrix;
import flash.geom.Point;
import org.papervision3d.view.BasicView;

[SWF ( width = 600, height = 500, frameRate = 30, backgroundColor = 0 )]

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 Change( e:MouseEvent = null ):void {
if ( _atomType ) {
_helium3.alpha = 0
_carbon.alpha = 1
}
else {
_carbon.alpha = 0
_helium3.alpha = 1
}
_atomType = !_atomType
}

//Функция рисования заднего фона.
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".

Откроется файл нашего класса. Напишем в этом файле следующий код:

package {
import flash.events.Event;
import flash.events.MouseEvent;
import org.papervision3d.core.proto.MaterialObject3D;
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.shadematerials.GouraudMaterial;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Cylinder;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;

public class Helium3Atom extends 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 Init( e:Event = null ):void {
//Удаляем слушатель добавления на сцену.
this.removeEventListener( Event.ADDED_TO_STAGE, Init )
//Слушаем клик по сцене.
stage.addEventListener ( MouseEvent.CLICK, Click )
//Создаем атом.
CreateAtom()
}

//Функция клика по сцене.
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" и напишите в этом файле код:

package
{
import flash.display.StageQuality;
import flash.events.Event;
import flash.events.MouseEvent;
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.shadematerials.GouraudMaterial;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Cylinder;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;

public class CarbonAtom extends BasicView
{
private var _do3DArray:Array;

private var _easeOut:Number = .3;

private var _reachX:Number = .1;
private var _reachY:Number = .1;
private var _reachZ:Number = .5;

private var _rotX:Number = 0.5;
private var _rotY:Number = 0.5;

private var _camPitch:Number = 0;
private var _camYaw:Number = 0;

private var _zDist:Number = 4;

private var _colorArray:Array;
private var _freeOrbit:Boolean = true;

public function CarbonAtom ()
{
if (stage) init ();
else addEventListener (Event.ADDED_TO_STAGE, init);

startRendering ();
}
private function init (e:Event = null):void
{
removeEventListener (Event.ADDED_TO_STAGE, init);
stage.addEventListener (MouseEvent.CLICK, onStageClick);

randomizeColorArray ();

createAtom ();
}

private function onStageClick (e:MouseEvent):void
{
_freeOrbit = ! _freeOrbit;
}

private function randomizeColorArray ():void
{
_colorArray = [];

var tempArray:Array = [];

for (var i:uint = 0; i 6)
{
_colorArray.push (tempArray.splice (uint (Math.random () * tempArray.length), 1));
}
_colorArray = _colorArray.concat (tempArray);
}

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" и напишите в этом файле код:

package {
import flash.display.DisplayObjectContainer;
import flash.display.SimpleButton;
import flash.display.Sprite;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFormat;

/**
* ...
* @author ProcXel.A
*/

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 главах. На сегодняшний день это единственный видеокурс, таких масштабов

Узнайте о других возможностях ActionScript 3.0


Внимание!

Первый в интернете видеокурс по популярной as библиотеке PaperVision3D! C этим курсом вы поймете, что 3D во flash – это просто и интересно!

55 видео уроков

Шаг за шагом расскажут и покажут, как делать свои интерактивные 3D проекты во flash. Курс сопровождается множеством примеров, поэтому он особенно легко усваивается.

Подробное описание курса

Комментарии

Аватар пользователя goldian

А расскажите как делать из карт 3d объекты, ну чтото вроде как эта карта

hello

Аватар пользователя Fly

Про это вы можете узнать из курса по papervision3d - http://disk.easyflash.org/magazin/easyflash/as3

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя goldian

Ок

hello