http://www.plaquiste-dorio.com/
Aujourd’hui nous allons voir comment ajouter des textures à notre modèle de boîte primitive. Pour les bases concernant l’utilisation du moteur Alternativa3D vous pouvez vous référer au premier tutorial Alternativa3D premier pas …
Pour commencer nous allons créer un dossier « assets » dans notre projet, dans lequel nous allons placer une image qui nous servira de texture.Il est indispensable que la hauteur et la largeur de l’image soit une puissance de deux. Sinon vous aurez une erreur à l’exécution :
Nous chargeons notre texture :
[Embed(source="assets/alternativa3d-logo.png")] static private const BoxTexture:Class;Nous créons un objet pour que le bitmap soit chargé dans les ressources, puis nous l’appliquons sur toutes les faces de notre box avec un objet TextureMaterial :
var bmd_res:BitmapTextureResource = new BitmapTextureResource(new BoxTexture().bitmapData); box.setMaterialToAllSurfaces( new TextureMaterial( bmd_res ) );voici le code complet de l’exemple :
package
{
import alternativa.engine3d.controllers.SimpleObjectController;
import alternativa.engine3d.core.Camera3D;
import alternativa.engine3d.core.Object3D;
import alternativa.engine3d.core.Resource;
import alternativa.engine3d.core.View;
import alternativa.engine3d.materials.TextureMaterial;
import alternativa.engine3d.primitives.Box;
import alternativa.engine3d.resources.BitmapTextureResource;
import flash.display.Sprite;
import flash.display.Stage3D;
import flash.events.Event;
public class Alternativa3DBase02 extends Sprite
{
private var rootContainer:Object3D = new Object3D();
private var camera:Camera3D;
private var controller:SimpleObjectController;
private var stage3D:Stage3D;
private var box:Box;
[Embed(source="assets/box01.png")] static private const BoxTexture:Class;
public function Alternativa3DBase02()
{
super();
addEventListener(Event.ADDED_TO_STAGE, init3D);
}
private function init3D(evt:Event):void
{
camera = new Camera3D(0.01, 10000000000);
camera.x = -50;
camera.y = -300;
camera.z = 100;
controller = new SimpleObjectController(stage, camera, 200);
controller.lookAtXYZ(0,0,0);
camera.view = new View(800, 600, false, 0xFFFFFF, 0, 4);
camera.view.hideLogo();
addChild(camera.view);
addChild(camera.diagram);
rootContainer = new Object3D();
rootContainer.addChild(camera);
//box
box = new Box();
var bmd_res:BitmapTextureResource = new BitmapTextureResource(new BoxTexture().bitmapData);
box.setMaterialToAllSurfaces( new TextureMaterial( bmd_res ) );
rootContainer.addChild(box);
stage3D = stage.stage3Ds[0];
stage3D.addEventListener(Event.CONTEXT3D_CREATE, init);
stage3D.requestContext3D();
}
private function init(event:Event):void
{
for each (var resource:Resource in rootContainer.getResources(true)) {
resource.upload(stage3D.context3D);
}
addEventListener(Event.ENTER_FRAME, enterFrameHandler)
}
private function enterFrameHandler(event:Event):void
{
box.rotationZ -= 0.01;
box.rotationY += 0.01;
controller.update();
camera.render(stage3D);
}
}
}
le rendu final :
Alternativa3D nous propose sur son site internet le téléchargement d’un plugin pour exporter ses scènes 3DSmax au format .A3D, nous allons voir comment intégrer ces objets 3D dans notre scène flash.
Pour commencer assurez-vous d’avoir téléchargé puis installé le plugin en question! Vous le trouverez en téléchargement gratuit à l’adresse suivante : Alternativa3D
Ouvrez 3ds max, puis créez votre objet 3d, pour l’exemple je vais utiliser l’emblématique « Tea Pot » de 3dsMax.
Appliquez lui une texture « standard » avec un Bitmap comme « Diffuse » :
Passons maintenant au projet as3, créez votre projet comme expliqué dans les précédents tutoriels de la même catégorie.
Nous allons ajouter une fonction « initObject » dans laquelle nous allons charger notre objet .A3D que vous aurez bien sûr, déjà placé dans le dossier /assets/A3D/ de votre projet.
Et faites de même avec la texture que vous placez dans le dossier /assets/textures/ nomdevotretexture.jpg.
Nous utilisons un simple objet URLLoader pour charger notre modele .A3D
Le chargement effectué nous allons parser la scene 3D (ParserA3D), puis récupérer notre Teapot en passant par une boucle sur les objets de la scène.
// Model parsing
var parser:ParserA3D = new ParserA3D();
parser.parse((e.target as URLLoader).data);
var mesh:Mesh;
for each (var object:Object3D in parser.objects)
{
if (object.name == "Teapot01")
{
mesh = object as Mesh;
break;
}
}
rootContainer.addChild(mesh);
Une fonction qui permet de charger les textures dans le context3D de la stage3D :
private function uploadResources(resources:Vector.):void
{
for each (var resource:Resource in resources)
{
resource.upload(stage3D.context3D);
}
}
Une boucle sur les matériaux de notre objet 3D, et un chargement de ces mêmes textures.
var textures:Vector. = new Vector.();
for (var i:int = 0; i < mesh.numSurfaces; i++)
{
var surface:Surface = mesh.getSurface(i);
var material:ParserMaterial = surface.material as ParserMaterial;
if (material != null)
{
var diffuse:ExternalTextureResource = material.textures["diffuse"];
if (diffuse != null)
{
diffuse.url = "assets/textures/" + diffuse.url;
textures.push(diffuse);
surface.material = new TextureMaterial(diffuse);
}
}
}
// chargement des textures
var texturesLoader:TexturesLoader = new TexturesLoader(stage3D.context3D);
texturesLoader.loadResources(textures);
Il ne vous reste plus qu’à tester votre projet 🙂 !
voici le code complet du projet :
package
{
import alternativa.engine3d.controllers.SimpleObjectController;
import alternativa.engine3d.core.Camera3D;
import alternativa.engine3d.core.Object3D;
import alternativa.engine3d.core.Resource;
import alternativa.engine3d.core.View;
import alternativa.engine3d.loaders.ParserA3D;
import alternativa.engine3d.loaders.ParserMaterial;
import alternativa.engine3d.loaders.TexturesLoader;
import alternativa.engine3d.materials.TextureMaterial;
import alternativa.engine3d.objects.Mesh;
import alternativa.engine3d.objects.Surface;
import alternativa.engine3d.primitives.Box;
import alternativa.engine3d.resources.BitmapTextureResource;
import alternativa.engine3d.resources.ExternalTextureResource;
import flash.display.Sprite;
import flash.display.Stage3D;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLLoaderDataFormat;
import flash.net.URLRequest;
public class Alternativa3DBase03 extends Sprite
{
private var rootContainer:Object3D = new Object3D();
private var camera:Camera3D;
private var controller:SimpleObjectController;
private var stage3D:Stage3D;
public function Alternativa3DBase03()
{
super();
addEventListener(Event.ADDED_TO_STAGE, init3D);
}
private function init3D(evt:Event):void
{
camera = new Camera3D(0.01, 10000000000);
camera.x = -50;
camera.y = -100;
camera.z = 100;
controller = new SimpleObjectController(stage, camera, 200);
controller.lookAtXYZ(0,0,0);
camera.view = new View(800, 600, false, 0xFFFFFF, 0, 4);
camera.view.hideLogo();
addChild(camera.view);
addChild(camera.diagram);
rootContainer = new Object3D();
rootContainer.addChild(camera);
stage3D = stage.stage3Ds[0];
stage3D.addEventListener(Event.CONTEXT3D_CREATE, init);
stage3D.requestContext3D();
initObject();
}
private function init(event:Event):void
{
for each (var resource:Resource in rootContainer.getResources(true)) {
resource.upload(stage3D.context3D);
}
addEventListener(Event.ENTER_FRAME, enterFrameHandler)
}
private function initObject():void
{
var loaderA3D:URLLoader = new URLLoader();
loaderA3D.dataFormat = URLLoaderDataFormat.BINARY;
loaderA3D.load(new URLRequest("assets/A3D/TeaPot.A3D"));
loaderA3D.addEventListener(Event.COMPLETE, onA3DLoad);
}
private function onA3DLoad(e:Event):void
{
// on parse le modele
var parser:ParserA3D = new ParserA3D();
parser.parse((e.target as URLLoader).data);
var mesh:Mesh;
for each (var object:Object3D in parser.objects)
{
if (object.name == "Teapot01")
{
mesh = object as Mesh;
break;
}
}
rootContainer.addChild(mesh);
uploadResources(mesh.getResources());
var textures:Vector. = new Vector.();
for (var i:int = 0; i < mesh.numSurfaces; i++)
{
var surface:Surface = mesh.getSurface(i);
var material:ParserMaterial = surface.material as ParserMaterial;
if (material != null)
{
var diffuse:ExternalTextureResource = material.textures["diffuse"];
if (diffuse != null)
{
diffuse.url = "assets/textures/" + diffuse.url;
textures.push(diffuse);
surface.material = new TextureMaterial(diffuse);
}
}
}
// chargement des textures
var texturesLoader:TexturesLoader = new TexturesLoader(stage3D.context3D);
texturesLoader.loadResources(textures);
}
private function uploadResources(resources:Vector.):void
{
for each (var resource:Resource in resources)
{
resource.upload(stage3D.context3D);
}
}
private function enterFrameHandler(event:Event):void
{
controller.update();
camera.render(stage3D);
}
}
}
et le rendu qui paye pas de mine je vous l’accorde mais qui aujourd’hui vous permet de charger n’importe quel modèle 3D dans votre scène !
Je ne vous parlerai pas de l’installation du système d’exploitation Debian.
Vous pourrez néanmoins trouver en téléchargement libre et gratuit, ce merveilleux système d’exploitation dans sa dernière version à l’adresse suivante : distributions Debian Linux
pour la partie installation , vous trouverez votre bonheur dans la documentation officielle du site : Manuel d’installation Debian.
Si ce n’est pas encore fait, installez le serveur OpenSSH pour accéder en toute sécurité à votre console de commande shell.
Le protocole SSH permet de crypter les données qui transitent sur le réseau entre votre machine et le serveur distant. grâce à ce système de chiffrage, vos mots de passe et identifiants seront un peu plus à l’abri des attaques réseaux, contrairement aux protocoles FTP ou Telnet encore énormément utilisés, mais très peu sécurisés voir pas du tout. SSH vous donnera également la possibilité de créer des tunnels sécurisés. J’aborderai SSH et sa configuration plus en détail dans un prochain article.En attendant installez OpenSSH :
aptitude install openssh-server
Nous allons maintenant rentrer dans le vif du sujet et installer tous les outils essentiels à votre serveur :
aptitude install apache2 php5 php5-mysql bind9 mysql-server phpmyadmin
a2enmod nomDuModuleet la commande qui permet de désactiver un module
a2dismod nomDuModuleModule de réécriture d’url
a2enmod rewriteon recharge la configuration d’apache :
invoke-rc.d apache2 reload
ServerAdmin postmaster@nomdedomaine.com ServerName www.nomdedomaine.com ServerAlias nomdedomaine.com *.nomdedomaine.com DocumentRoot /var/www/monsite/ Options -Indexes FollowSymLinks MultiViews AllowOverride All ErrorLog /var/log/apache2/site/nomdedomaine/error.log LogLevel warn CustomLog /var/log/apache2/site/nomdedomaine/access.log combined ServerSignature Offon active avec
ln -s /etc/apache2/sites-available/nomdedomaine.com /etc/apache2/sites-enabled/nomdedomaine.comon redémarre le serveur :
invoke-rc.d apache2 restartvoilà c’est fini, vous pourrez tester le nom de domaine dans votre navigateur préféré Firefox ou Chrome ! 🙂 ( à conditions que votre serveur de DNS soit également configuré ) à voir dans le prochain tutorial « Configuration du serveur de DNS Bind »
aptitude install bindpour un nom de domaine mondomaine.com. Le @ fait référence à mondomaine.com. Le mail doit être un mail valide et le @ est remplacé par un . exemple : admin.mondomaine.com correspond au mail admin@mondomaine.com. ns1 = serveur primaire de nom ns2 = serveur secondaire de nom ns0 = serveur de messagerie 173.194.67.94 = ip de votre serveur creation du fichier db.mondomaine.com dans /etc/bind/
nano db.mondomaine.com
$ttl 86400 @ IN SOA mondomaine.com. admin.mondomaine.com.( 2012041201 ;serial 21600 ;refresh 3600 ;retry 604800 ;expire 86400 ) ; negative cache TTL @ IN NS ns1 @ IN NS ns2 @ IN MX 10 mail @ IN A 173.194.67.94 www IN A 173.194.67.94 mail IN CNAME ns0 smtp IN CNAME ns0 pop IN CNAME ns0 pop3 IN CNAME ns0 imap IN CNAME ns0 sql IN A 173.194.67.94 mysql IN A 173.194.67.94Editez les deux fichiers suivant :
nano named.conf.localet
nano zones.confpuis ajouter en fin de fichier :
zone "mondomaine.com" {
type master;
file "/etc/bind/db.mondomaine.com";
};
on redémarre Bind :
invoke-rc.d bind9 restartvoila vous n’avez plus qu’ à configurer le domaine sous apache si ce n’est pas déjà fait, comme dans le tutorial précédent : configuration d’un site sous apache
Imaginons que nous appuyons la touche « A » le tableau se triera de cette façon :
[ android, apple, tablette, application ]
et le clavier se réactualisera de cette manière :
Pour correspondre aux lettres suivantes : [ android, apple, tablette, application ].
Et ainsi de suite jusqu’à obtenir un résultat de recherche satisfaisant.
Une fois se composant de base réalisé, nous ajouterons des fonctions plus poussées. telles que l’intégration d’un autre composant, de reconnaissance de forme que je vous détaillerai dans un prochain article.
Aujourd’hui nous allons voir comment résoudre le problème de résolution d’écran pour vos applications Android et Iphone.
Sur un projet classique as3, destiné au navigateur internet, nous récupérons la largeur et la hauteur de la scène:
stage.stageWidth; // largeur stage.stageHeight //hauteurNéanmoins je ne sais pas si c’est dû à un bug Adobe, mais les valeurs retournées par stageWidth et stageHeight sur un portable Android ou Iphone ou encore une tablette, sont erronées. La seule solution que j’ai trouvé pour palier à ce problème c’est d’utiliser la classe Capabilities dont son rôle est de fournir les propriétés du système qui héberge l’application. il suffit donc de remplacer stage.stageWidth par Capabilities.screenResolutionX et stage.stageHeight par Capabilities.screenResolutionY. Ces deux fonctions nous retournent la hauteur et largeur de l’écran ou est exécutée l’application.
