Вращение 3D куба.

Content on this page requires a newer version of Adobe Flash Player.

Прочитал урок про вращению куба, который опубликован ниже, и решил сделать урок с более реалистичным кубом. :) Из этого урока вы научитесь создавать свой 3D куб. :)

И так. Создаем новый Flash File (ActionScript 3.0) и вставляем в первый кадр данный ниже код. Компилируем. И видем, что у нас перед глазами крутится 3D куб. Ура, товарищи! :) Урок окончен. Более подробное описание кода дано в коментариях. Всем спасибо.

//Клип, в котором будут находиться вершины куба.
var cube:MovieClip = new MovieClip();
//Координаты куба в сцене.
var X:int = 275;
var Y:int = 200;
//Длина грани куба.
var d:uint = 200;
//Координаты вершин куба.
var corX:Array = new Array(-d/2,d/2,d/2,-d/2,-d/2,d/2,d/2,-d/2);
var corY:Array = new Array(-d/2,-d/2,d/2,d/2,-d/2,-d/2,d/2,d/2);
var corZ:Array = new Array(-d/2,-d/2,-d/2,-d/2,d/2,d/2,d/2,d/2);
//Массив цветов граней куба.
var colors:Array = new Array(0x0000cc, 0x00cc00, 0xcc0000, 0xcccc00, 0x00cccc, 0xcc00cc);
//Массив вершин куба.
var dots:Array = new Array(8);
//Массив граней куба.
var sides:Array = new Array(6);
//Индексы вершин при построении треугольников граней куба.
var indices:Vector.<int> = new Vector.<int>();
indices.push(0,1,2,0,2,3);
//-------------------------------------------------------------------
createCube();
stage.addEventListener(Event.ENTER_FRAME, rotateCube);
//-------------------------------------------------------------------
 
//Функция создания куба.
function createCube():void
{
 //Размещаем наш куб в заданных нами координатах.
 addChild(cube);
 cube.x = X;
 cube.y = Y;
 //Добавляем вершины куба в один МувиКлип, чтобы можно было легко ими вращать в сцене.
 for (var i:uint = 0; i < dots.length; i++)
 {
 //Создаем спрайты, которые будут "контейнером" для вершин куба.
 var p:Sprite = new Sprite();
 p.x = corX[i];
 p.y = corY[i];
 p.z = corZ[i];
 cube.addChild(p);
 dots[i] = p;
 }
 //Создаем грани куба.
 for (var j:uint = 0; j < sides.length; j++)
 {
 var s:Sprite = new Sprite();
 addChild(s);
 sides[j] = s;
 }
 //Отрисовываем куб.
 renderCube();
}
 
//Функция отрисовки куба.
function renderCube():void
{
 //Создаем вспомогательные точки.
 var point:Point = new Point();
 var point3d:Vector3D = new Vector3D();
 //Создаем массивы, которые будут хранить глобальные координаты вершин по Х и У.
 var points2dX:Array = new Array(8);
 var points2dY:Array = new Array(8);
 //Переводим локальные координаты вершин куба в глобальные.
 for (var i:uint = 0; i < dots.length; i++)
 {
 point = dots[i].local3DToGlobal(point3d);
 points2dX[i] = point.x;
 points2dY[i] = point.y;
 }
 //Создаем массив со списками вершин граней.
 var vertices:Array = new Array(Vector.<Number>([points2dX[0], points2dY[0],
 points2dX[1], points2dY[1],
 points2dX[2], points2dY[2],
 points2dX[3], points2dY[3]]),
 Vector.<Number>([points2dX[1], points2dY[1],
 points2dX[5], points2dY[5],
 points2dX[6], points2dY[6],
 points2dX[2], points2dY[2]]),
 Vector.<Number>([points2dX[5], points2dY[5],
 points2dX[4], points2dY[4],
 points2dX[7], points2dY[7],
 points2dX[6], points2dY[6]]),
 Vector.<Number>([points2dX[4], points2dY[4],
 points2dX[0], points2dY[0],
 points2dX[3], points2dY[3],
 points2dX[7], points2dY[7]]),
 Vector.<Number>([points2dX[4], points2dY[4],
 points2dX[5], points2dY[5],
 points2dX[1], points2dY[1],
 points2dX[0], points2dY[0]]),
 Vector.<Number>([points2dX[3], points2dY[3],
 points2dX[2], points2dY[2],
 points2dX[6], points2dY[6],
 points2dX[7], points2dY[7]]));
 //Отрисовываем грани куба.
 for (var j:uint = 0; j < sides.length; j++)
 {
 sides[j].graphics.clear();
 sides[j].graphics.beginFill(colors[j]);
 sides[j].graphics.drawTriangles(vertices[j], indices, null, TriangleCulling.NEGATIVE);
 sides[j].graphics.endFill();
 }
}
 
//Функция ващения куба.
function rotateCube(e:Event):void
{
 //Поворачиваем куб по оси У на один градус каждый кадр.
 cube.rotationY -= 1;
 //Отрисовываем новое положение куба.
 renderCube();
}

Похожие записи

Комментарии

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

Пркольно,мне нравиься :) намного лучше))),только здесь код...

Keyboard not found. Press any key to continue

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

Классно спасибо.....но думаю любители попроще предпочтут урок Виталия =)))

Аватар пользователя ProcXel.A

Ну. На самом деле там ничего сложного. :) Мувиклип, 8 точек, перевод координат, отрисовка. :) А если рядом со строчкой

 

cube.rotationY -= 1;

 

дописать еще и

 

cube.rotationX += 1;

 

, то вообще красота... ))))

True Love

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

Круто!!!)) Отличный пример! Спасибо!=)

Аватар пользователя Дэнииэль

у тя урок лучше даже не для новичков.

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

Спасибо за урок. Хотелось бы ещё иметь возможность расположить что-нибудь на сторонах куба, например логотип. Подскажите, пожалуйста, как это сделать.

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

А на грани куба возможно рисунки накладать? если можно то подскажыте как? зарание спасибо

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

Народ а как сделать так чтобы с мышкой вращался? не автоматически а чтоб  с мышкой вращался?

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

Классный урок, а может кто нибудь научить, как делать такой же куб, как и в шапке сайта??? С распадом и прочими эффектами?

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

Soprano,

Цитата: Soprano

как сделать так чтобы с мышкой вращался

вообще я попробую в конце кода там где
//Поворачиваем куб по оси У на один градус каждый кадр.
cube.rotationY -= 1;
сделать cube.rotationY +=mouseY;
cube.rotationX +=mouseX;
ну а управление переменными mouseX и MouseY будет мышью(положение мыши)

Аватар пользователя серёжа

вообще я попробую в конце кода там где //Поворачиваем куб по оси У на один градус каждый кадр.
cube.rotationY -= 1;
сделать cube.rotationY +=mouseY;
cube.rotationX +=mouseX;
ну а управление переменными mouseX и MouseY будет мышью(положение мыши)

у меня почулочилось вроде только он очень быстро крутится как сделать чтобы крутился со скоростью от 0 до 30

 

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

mouseY и mouseX подели на какое-то число. Например сделать cube.rotationY +=mouseY/3;

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

 добавить , когда MOUSE_DOWN   то
 cube.rotationY +=mouseY;
cube.rotationX +=mouseX;

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

подскажите как по щелчку на грань выполнить переход на другой кадр
Заранее спасибо)