Articoli

Papervision3D - Capovolgere il materiale

logoPV3D

A volte è necessario capovolgere un materiale, perché si scopre che è speculare sulla superficie 3D. Questo accade quando si imposta un material.doublesided a true material.opposite a true e avete una macchina fotografica che guarda il retro della faccia di un oggetto. Un buon esempio di ciò è quando avete una fotocamera che guarda l'interno di un cubo.

internocubo

Papervision3D non include una proprietà per l'oggetto materiale, dove si precisa che l'immagine deve essere a specchio. Fortunatamente, capovolgere non è altro che impostare le dimensioni a valori negativi. Per i materiali filmati ciò può essere fatto in modo molto semplice e non ha nulla a che fare con Papervision3D.

Basta creare due sprite, uno sprite da utilizzare come materiale del clip filmato, insieme all'altro che sara invertito e terrà gli oggetti di visualizzazione.

var materialSprite:Sprite = new Sprite();
var flippedSprite:Sprite = new Sprite();

 Impostare il valore scaleX a negativo inverte il display objects orizontalmente.

flippedSprite.scaleX = -1;

aggiungiamo una grafica allo sprite ribaltato.

flippedSprite.addChild(graphic1);
flippedSprite.addChild(graphic2);

Siccome Papervision3D mappa i materiali sulla superficie di un oggetto 3D, non è possibile influire sulle dimensioni di un materiale. Esso sarà sempre mappato sull'oggetto, non importa quale sia rapporto d'aspetto di un materiale. Ciò limita anche l'uso di scala e negativi nel ridimensionamento dei materiali. Al fine di rendere possibile il ridimensionamento negativo, abbiamo nidificato i clip filmato.
Pertanto, è necessario aggiungere il flippedSprite come figlio al materialSprite.

materialSprite.addChild(flippedSprite);

Il passo finale, cioè la creazione del materiale clip filmato basato sul materialSprite viene tralasciato per ragioni di brevità. Ora dovrebbe essere chiaro come funziona tutto ciò.

Capovolgere un materiale bitmap è un po 'diverso da capovolgere uno sprite e i clip filmato.
Per raggiungere questo obiettivo con maggiore facilità, la squadra Papervision3D ha sviluppato una classe chiamata BitmapMaterialTools, che si trova all'interno del pacchetto delle utilità dei materiali org.papervision3d.materials.utils.

Per dimostrare come, creeremo un nuovo cubo di sei facce, utilizzando la classe BitmapFileMaterial. Abbiamo impostato ogni materiale per essere visibile sul lato opposto, con conseguenti immagini capovolte che devono essere capovolte all'indietro, in modo che esse avranno il loro aspetto iniziale.

Sono richieste le seguenti importazioni per il prossimo esempio esempio:

import flash.events.Event;

import org.papervision3d.events.FileLoadEvent;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.utils.BitmapMaterialTools;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.view.BasicView;

Nel metodo init(), incominciamo definendo i sei file del materiale bitmap.

private function init():void
{
  var frontMat:BitmapFileMaterial = new BitmapFileMaterial
  ("assets/front.jpg");
  var backMat:BitmapFileMaterial = new BitmapFileMaterial
  ("assets/back.jpg");
  var leftMat:BitmapFileMaterial = new BitmapFileMaterial
  ("assets/left.jpg");
  var rightMat:BitmapFileMaterial = new BitmapFileMaterial
  ("assets/right.jpg");
  var topMat:BitmapFileMaterial = new BitmapFileMaterial
  ("assets/top.jpg");
  var bottomMat:BitmapFileMaterial = new BitmapFileMaterial
  ("assets/bottom.jpg");

Dato che possiamo solo capovolgere un materiale che è già caricato, si definisce un evento listener di caricamento completato per ciascun materiale.

  frontMat.addEventListener(FileLoadEvent.LOAD_COMPLETE,
  loadComplete);
  backMat.addEventListener(FileLoadEvent.LOAD_COMPLETE,
  loadComplete);
  leftMat.addEventListener(FileLoadEvent.LOAD_COMPLETE,
  loadComplete);
  rightMat.addEventListener(FileLoadEvent.LOAD_COMPLETE,
  loadComplete);
  topMat.addEventListener(FileLoadEvent.LOAD_COMPLETE,
  loadComplete);
  bottomMat.addEventListener(FileLoadEvent.LOAD_COMPLETE,
  loadComplete);

Come abbiamo imparato precedentemente, i cubi richiedono un oggetto MaterialsList. Creiamone
uno e aggiungiamo ogni materiale ad esso.

  var materialsList:MaterialsList = new MaterialsList();
  materialsList.addMaterial(frontMat,"front");
  materialsList.addMaterial(backMat,"back");
  materialsList.addMaterial(leftMat,"left");
  materialsList.addMaterial(rightMat,"right");
  materialsList.addMaterial(topMat,"top");
  materialsList.addMaterial(bottomMat,"bottom");

Il passo finale nel metodo init () è la creazione e l'aggiunta del cubo alla scena.

  var cube:Cube = new Cube(materialsList,800,800,800,5,5,5);
  scene.addChild(cube);

Ogni volta che uno dei sei dei materiali è stato caricato, il metodo LoadComplete () viene chiamato. Il FileLoadEvent inviato contiene un riferimento all'oggetto destinazione che può essere fuso a un tipo BitmapFileMaterial.

private function loadComplete(e:FileLoadEvent):void
{
  var material:BitmapFileMaterial = BitmapFileMaterial(e.target);

Potremmo impostare ogni material.opposite a true subito dopo la creazione dell'istanza, ma possiamo risparmiare un po 'di lavoro facendolo una volta che il materiale viene caricato. In questo modo abbiamo bisogno di digitarlo una sola volta, invece di sei volte.

  material.opposite = true;

L'impostazione della proprietà di opposto di un materiale a true renderà le facce all'interno del cubo visibili.

Nella riga finale del codice, gli strumenti del materiale bitmap tornano utili. questa classe di utilità ha un metodo statico che converte i dati bitmap di input in dati una versione capovolta.
È possibile scegliere di capovolgere le bitmap dell'asse x e dell'asse y  utilizzando BitmapMaterialTools.mirrorBitmapX () o BitmapMaterialTools.
mirrorBitmapY (). In questo caso abbiamo bisogno di capovolgere il materiale attorno l'asse delle ascisse.

  BitmapMaterialTools.mirrorBitmapX(material.bitmap);
} 

Dopo la pubblicazione di questo codice, vedrete l'interno di un cubo con le immagini sui lati capovolte in modo che il loro testo non è più a specchio.

internocubodritto

Filippo Porcari
Author: Filippo PorcariWebsite: http://filippo.porcari.oranjuice.org/Email: Questo indirizzo email è protetto dagli spambots. E' necessario abilitare JavaScript per vederlo.
designer freelance
Sono un graphic designer e mi occupo di pubblicità. Da più di 10 anni dedico le mie energie alla realizzazioni d'immagine aziendale e comunicazione visiva con un'attenzione alle nuove tecnologie del web. Da qualche anno ho scoperto il software open source e mi sono dedicato alla sua introduzione nel mio workflow produttivo ottenendo ottimi risultati.

© copyright 2011

Porcari Filippo studio grafico - p.iva 01985590023

Tutti i diritti riservati.