Создание 3D куба с помощью Papervision3D

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

Get Adobe Flash player

Информация
Описание: 

Нам понадобится Papervision3D. Его можно скачать отсюда. Там справа выбираем архив .zip и скачиваем на компьютер. После этого распаковываете архив и получаете все нужные классы. Если не получилось то смотрите
видео уроки про использование классов. Если не получается скачать, то можете взять классы из исходника (Версия Papervision3D - 2.0.883)

Шаг 1: Итак, создаем документ флэш(AS3) и устанавливаем размер сцены на 550x400. Нам понадобится 6 мувиков. У них будет следующая структура:

  1. В мувиклипе 2 слоя.
  2. На 1 слое находится мувик face_inside, в котором нарисован квадрат 150x150
  3. Этот мувик имеет glow-фильтр (параметры ниже)
  4. На 2 слое находится отцентрированная картинка для этой стороны

Шаг 2: Теперь переносим все 6 сторон на сцену. Для каждой стороны пишем Instance Name: face, face2,...,face6.

Шаг 3: Ставим картинки в верхний левый угол и ставим в параметр Blending mode ERASE

Шаг 4: Блокируем этот слой, называем его faces, создаём новый слой as и в нем пишем as код.

//Импортируем классы для работы с Papervision3D

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;

//Создаём сцену для работы с 3D объектами
var scene:Scene3D=new Scene3D();
//Создаём Viewport для того чтобы увидеть наш куб
var viewport:Viewport3D=new Viewport3D(0,0,true,true);
//Делаем так, чтобы при наведении на куб появлялся курсор в виде руки
viewport.buttonMode = true;
//Добавляем его на сцену
addChild (viewport);
//Создаём камеру и фокусируем ее на нашем кубе
var camera:Camera3D=new Camera3D();
camera.zoom = 11;
camera.focus = 100;
//Создаем render для отображения куба в каждом кадре
var render:BasicRenderEngine=new BasicRenderEngine();

//Создадим 6 материалов для создания куба
var mm:MovieMaterial = new MovieMaterial(face);
mm.animated = true; //Делаем сторону анимированной
mm.smooth = true; //Делаем сторону сглаженноё
mm.interactive = true; //Делаем сторону интерактивной

var mm2:MovieMaterial = new MovieMaterial(face2);
mm2.animated = true;
mm2.smooth = true;
mm2.interactive = true;

var mm3:MovieMaterial = new MovieMaterial(face3);
mm3.animated = true;
mm3.smooth = true;
mm3.interactive = true;

var mm4:MovieMaterial = new MovieMaterial(face4);
mm4.animated = true;
mm4.smooth = true;
mm4.interactive = true;

var mm5:MovieMaterial = new MovieMaterial(face5);
mm5.animated = true;
mm5.smooth = true;
mm5.interactive = true;

var mm6:MovieMaterial = new MovieMaterial(face6);
mm6.animated = true;
mm6.smooth = true;
mm6.interactive = true;

//Приступаем к созданию куба
var cube:Cube=new Cube(new MaterialsList({front:mm, left:mm2, right:mm3,
top:mm4, bottom:mm5, back:mm6}), //создаём новый лист материалов для создания куба
150, 150, 150, 10, 10, 10); //указываем ширину, глубину, высоту, и количество сегментов
scene.addChild (cube); //добавляем куб на сцену

//Регистрируем событие для обновления положения куба
addEventListener (Event.ENTER_FRAME, loop);

//Функция обновления положения куба
function loop (e:Event):void
{
//Узнаем дистанцию от центра ролика по оси X и Y
var distX:Number = mouseX / stage.stageWidth - 0.5;
var distY:Number = mouseY / stage.stageHeight - 0.5;

//Поворачиваем куб в зависимости от положения мышки
cube.rotationX += distY * 10;
cube.rotationY += distX * 10;

//Отрендерим сцену, чтобы увидеть куб в новом положении
render.renderScene (scene, camera, viewport);
}

//Регистрируем события клика мышки на каждой стороне
face.addEventListener (MouseEvent.CLICK, clickHandler);
face2.addEventListener (MouseEvent.CLICK, clickHandler);
face3.addEventListener (MouseEvent.CLICK, clickHandler);
face4.addEventListener (MouseEvent.CLICK, clickHandler);
face5.addEventListener (MouseEvent.CLICK, clickHandler);
face6.addEventListener (MouseEvent.CLICK, clickHandler);

//Функция открытия web-страницы
function clickHandler (e:MouseEvent):void
{
var mc:MovieClip=MovieClip(e.target);
//Определим какая сторона была нажата
switch (mc)
{
case face :
navigateToURL (new URLRequest('
http://www.papervision3d.org/'));
break;
case face2 :
navigateToURL (new URLRequest('http://www.adobe.com/ru/'));
break;
case face3 :
navigateToURL (new URLRequest('http://www.google.ru/'));
break;
case face4 :
navigateToURL (new URLRequest('http://ru.wikipedia.org/wiki/Заглавная_страница'));
break;
case face5 :
navigateToURL (new URLRequest('http://www.yandex.ru/'));
break;
case face6 :
navigateToURL (new URLRequest('http://www.youtube.com/?gl=RU&hl=ru'));
break;
}
}

Теперь нажимаем CTRL+ENTER и кликаем по сторонам куба.

Исходник: 

Комментарии

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

camera.zoom = 11;
camera.focus = 100

Почему 11, а не 10? На сколько я знаю, при параметрах zoom=10 и focus=100, относительные размеры куба становятся  тождествены пикселям...

Урок супер! Комментарии к коду отличные! Не знаю как новичкам, но тем, кто поднаторел в использовании классов, поживиться будет чем :-)

PS: Может Ли Бримелоу и есть автор?

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

Может быть, а зум 11, потому что в видеоуроке автора было так. Можно поставить и 10, если отображается нормально

Если кому надо могу добавить ещё парочку уроков по 3d  и papervision3D

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

originalg,
Добавляйте ) Это очень хорошая тема.

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

А чем открываются файлы swc?

originalg,
А вы можете сделать урок по освоению Papervision3D,как пользоваться и т.д.?

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

Цитата: rb

А чем открываются файлы swc?

Впринципе они не важны, для функционирования необходимы только классы

Цитата: rb

А вы можете сделать урок по освоению Papervision3D,как пользоваться и т.д.?

Могу добавить пару уроков по 3D

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

swc это файлы флеш компанентов. Их открывать не надо))) их надо пдключать)

а урок действительно классный!!! Ставлю 5 звезд!!!

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

Цитата: originalg

Могу добавить пару уроков по 3D

Добавляй конешно!!!

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

Браво!

clapping

Создание такого трехмерного кубика и подтолкнуло меня на изучение flash вкупе с 3D фотогалереями. Все времени не было на поиск и изучение инфы о 3D. В принципе его нет и сейчас

ag

, но, по крайней мере, теперь я знаю, где это есть точно ))))

<i>Пишите код так, как будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете</i><br /><b>Стив Макконнел. &quot;Совершенный код&quot;</b>

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

Доброе время суток!   Плиз скажите как вставить данный куб в свой флеш проет ..  например чтобы куб был в верхнем левом углу.  И как поменять фотки на свои .. где идет загрузка этих фоток ?  

Заранее спасибо... 

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

Pool, Вы урок читали? Вы знаете что такое классы?
Все написано, если не понятно посмотрите видео уроки про использование классов.

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

У меня ошибка выходит 1084: Syntax error: expecting identifier before xmltagstartend.

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

vitkuz,
 Я пересмотрел все еще раз .. думал пропустил но так ничего и не понял как же вставить данный куб с свою флешку и сместить его в верхний правый угол...

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

2 rb

 

case face6 :
  navigateToURL (new URLRequest('http://www.youtube.com/?gl=RU&hl=ru'));
  break;
 }</p>
<p>}

 

тут символы </p><p> лишние, в коде их быть не должно

2 Pool 

что касается добавления своих картинок, то надо внимательней читать урок

1.В мувиклипе 2 слоя.
2.На 1 слое находится мувик face_inside, в котором нарисован квадрат 150x150
3.Этот мувик имеет glow-фильтр (параметры ниже)
4.На 2 слое находится отцентрированная картинка для этой стороны

 

4й пункт

 

 

для смещения куба в сторону у него есть параметры x, y, z, которые и отвечают за его координаты. к примеру cube.x = 100; cube.y = 100; поднимет куб в правый верхний угол

Аватар пользователя funbiscuit
Цитата: Raziel

cube.x = 100; cube.y = 100; поднимет куб в правый верхний угол

В правый нижний угол, потому что в papervision3D координаты 0,0 находятся в центре сцены. И чтобы куб был верхнем правом углу координаты должны быть 100, -100 примерно.

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

так наоборот, вс верно, 0,0 по центру, положительный У вверх, соответственно, отрицательный внз, положительный Х вправо, - влево, а зед + это от камеры вдаль.

вот и выходит, что 100, 100 - верхний правый угол, испытано опытным путем (:

Аватар пользователя nadya.fd

СУпер!!!

Кстати, интересная заметка!
 Картинки на гранях куба должны быть одинаковой высоты и ширины все. В противном случае на гранях появляются черные полосы, ближе к ребрам куба.

Я пробовала с текстом, текст одной длинны из одинаковых символов на всех гранях - и супер! А если разной длинны слова, то появляются полоски.

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

скажи вопрос есть, а чем отличается библиотека Sandy тоже для 3D(которую я узаю постоянно), от Papervision3D, скажу сразу синтаксис практически такой же, кроме момента где ты подключаешь библиотеки?

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

Mischanja
Я хоть и не спец в этих двух движках, но я думаю надо смотреть гораздо глубже чем куб)

Написал программу? Проверь на ошибки. Исправил ошибки? Проверь еще раз. Нет ошибок? Ты плохой программист!<br /><br />http://prograph.ru/ - видео уроки по программированию в разных средах, а также справочники, программы и новости.<br />

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

Урок хороший, очень легкий для понимания и усвоения

good

. Рассмотрение чуть глубже, к 9 кубам, привело к жесткой загрузке системы, и из 30 необходимых кадров в секунду, стала отображаться, лишь их добрая половина. Не очень понятно с чем это связано, 54 плоскости мне кажется не такая уж проблема для просчета, или же все таки нет? В любом случае наблюдал похожие 3D модели и более сложной конфигурации, значит все же возможно. Как с этим бороться, знает кто?

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

Хороший урок для использывания PV3D .
Продолжайте !

thank_you

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

away3D мне кажется легкче

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

Добрый день!
Подскажите, а программа для исполнения подобных работ на вашем сайте adobe flash, или macromedia flash?

Спасибо.

Уже разобрался. Спасибо

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

Хах! если на сторону куба 2 раза щелкнуть, то перейдешь на сайт, который там изображен!

smile

 

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

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

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

Отличный урок. Но описание слишком лаконичное. Нужно сделать или пошаговую подробную инструкцию по применению или видеоурок.
Видеоурок - вообще будет супер.

smile

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

Подскажите, как сделать чтоб, ссылки открывались в текущем окне, а не в новом, тоисть внутренние ссылки были.

Аватар пользователя som911
где то я промахнулся (((
 Error #1123: Оператор "filter" не поддерживается для типа builtin.as$0.MethodClosure.
at Untitled_fla::MainTimeline/frame1()
Аватар пользователя xenra

Подскажите, как уменьшить скорость вращения куба в свободном состоянии? Например, по умолчанию, когда ролик загрузился, а мышкой еще не навели, а то так быстро вертиться, аж в глазах рябит /