Conhecendo Papervision3D

Atualmente existem muitos projetos open source no mundo flash. Eu mesmo estou fazendo um ou alguns, já nem sei direito, (o meu problema como de muitos é termina-los). E um projeto que se mostrou muito interessante atualmente é papervision3d. Com ele é possível criar aplicações 3D como sites, jogos e outros. Ainda está sendo criada a sua primeira versão. E para fazer o download é necessário estar cadastrado. Sem contar que ainda esta em SVN. Neste tutorial você aprenderá a fazer uma simples aplicação para entender o funcionamento desta engine gráfica 3d. Não entrarei em detalhes quanto ao uso de objetos 3D exportados do max, visto que isto é possível mas não é o caso deste tutorial. Mas para já ir adiantando não é complicado e você pode aprender a fazer isto seguindo este outro tutorial em inglês: http://rozengain.com/?postid=28. Lembrando que papervision ainda não está released então pode apresentar erros ou determinadas coisas como suporte a animação de mechas ainda não é suportado.

Baixe a última versão do papervision, após isto crie um arquivo novo no Flash CS3, (não trabalharemos com versões anteriores), indique o caminho da engine para no documento (publish -> settings. Action Script Version … settings. No classpath adicione e direcione para a pasta onde você deixou o source. Exemplo: D:\papervision\as3\trunk\src).

Crie um arquivo do tipo script e salve na mesma pasta onde foi salvo o arquivo criado anteriormente com o nome de PapervisionTutorial.

package {
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.objects.Plane;
import org.papervision3d.materials.MovieAssetMaterial;

Criamos um pacote e importamos todas as classes necessárias para a nossa aplicação. A idéia que iremos aplicar neste tutorial não tem como objetivo criar um exemplo que faça diversas coisas e sim um simples plano na tela, e o intuito importante que você entenda o que estará fazendo.

Neste caso Importamos as classes do flash Sprite e Event que usaremos para criar instância visivel no palco e um loop para a engine respectivamente. Depois temos os imports da engine. Scene3D será nossa cena, Camera3D a nossa câmera, com Plane fazemos um plano e por último temos MovieAssetMaterial que cria um material a partir de um movieclip não instanciado. Para um bom desenvolvimento com a engine é importante olhar as classes que temos em cada um dos sub-pacotes a qual pertence. Em objects por exemplo temos a Classe ASE que serve para importar modelos 3D que podem ser criados em programas como Blender, 3D Max, e Maya.

public class PapervisionTutorial extends Sprite {
var container:Sprite;
var scene:Scene3D;
var camera:Camera3D;
var material:MovieAssetMaterial;

Nossa classe e os objetos que iremos usar.

function PapervisionTutorial() {
container = new Sprite();
addChild( container );
container.x = 385;
container.y = 225;

Construtor, criamos um container onde renderizaremos a cena. Colocamos no palco no meio dele. Isto é. Usaremos valores negativos de posição e por isso precisamos colocar o container no meio do palco. Como o meu está com o tamanho de 770 x 450 os valores estão como mostrados. Caso você queira outro tamanho de palco divida então os valores.

scene = new Scene3D( container );
camera = new Camera3D();
camera.zoom = 4;
material = new MovieAssetMaterial( “example”, true );
var plano = new Plane( material, 500, 500, 2, 2 );
scene.addChild( plano );
this.addEventListener( Event.ENTER_FRAME, loop3D );

Criamos a cena, a câmera, com zoom igual a 4, e material, (este material você deve criar um movieclip preferência que tenha um movimento qualquer, e na biblioteca linka-lo como example). Depois disto tudo criamos um plano com esta textura, (se você quiser pode usar wire como textura, é só deixar null a textura). Ele tem tamanho de 500 x 500, e está divido em blocos em 2 blocos na horizontal e 2 blocos na vertical. Adicionamos a cena e criamos por fim o loop, (nosso sempre importante EnterFrame :D).

function loop3D(event:Event):void {
material.updateBitmap();
scene.renderCamera( camera );
}

Nosso método loop3D poderia só possuir uma chamada de método. Somente renderCamera. Nós chamamos updateBitmap, como como o próprio nome já diz, só para atualizar a textura do nosso plano. Se o nosso plano não possui movimento em sua textura é recomendado nem fazer esta atualização já que gasta processamento. Se você só quiser renderizar uma imagem e não criar nenhuma animação, poderia então deixar de fazer o loop e colocar somente uma chamada a renderCamera.

}
}

Pronto. Control + Enter.

Qualquer duvida ai está o fonte, ou deixe comentário. No próximo post sobre papervision veremos movimentos e animações.

Fonte

Mais informações e tutoriais em inglês visite: http://wiki.papervision3d.org/