/fdata%2F3556912%2Favatar-blog-1137008602-tmpphpwB14eq.jpeg){kind=avatar}
Comme promis, voici notre nouveau tutoriel, nous allons voir comment texturer les faces de notre cube avec des images et comment interagir avec chaque face pour créer un menu 3d par exemple.
I/ Texturer et intéragir avec les faces d'un cube.
Pour cet exemple, nous allons reprendre le premier tutoriel auquel nous allons apporter quelques modifications pour texturer nos faces avec des images et associer une action au clique sur une face.
Code Source
package {
import flash.display.Sprite;
import alternativa.engine3d.containers.ConflictContainer;
import alternativa.engine3d.core.Camera3D;
import alternativa.engine3d.core.View;
import alternativa.engine3d.primitives.Box;
//Ajout
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
import alternativa.engine3d.materials.TextureMaterial;
import alternativa.engine3d.core.MouseEvent3D;
import alternativa.engine3d.core.RayIntersectionData;
import alternativa.engine3d.materials.FillMaterial;
import flash.net.navigateToURL;
public class Main extends Sprite{
private var scene:ConflictContainer = new ConflictContainer();
private var camera:Camera3D;
private var cube:Box;
public function Main(){
camera = new Camera3D();
camera.view = new View(550, 400);
addChild(camera.view);
addChild(camera.diagram);
camera.rotationX = -1.8;
camera.rotationZ = -1.4
camera.x = -300;
camera.y = -50;
camera.z = 100;
scene.addChild(camera);
//Ajout chargement de l'image de texture
loadBitmap();
}
private function loadBitmap():void{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, createCube);
loader.load(new URLRequest("test.png"));
}
private function createCube(e:Event):void{
//On créer une texture par face (5 textures couleurs et 1 image)
// Texture couleurs
var red:FillMaterial = new FillMaterial(0xFF0000);
red.name = "red";
var blue:FillMaterial = new FillMaterial(0x0000FF);
blue.name = "blue";
var green:FillMaterial = new FillMaterial(0x00FF00);
green.name = "green";
var yellow:FillMaterial = new FillMaterial(0xFFFF00);
yellow.name = "yellow";
var black:FillMaterial = new FillMaterial(0x000000);
black.name = "black";
// Texture image
var bmp:TextureMaterial = new TextureMaterial(e.currentTarget.content.bitmapData);
bmp.name = "Bitmap";
// Création du cube et affectation des textures aux faces
cube = new Box(120, 300, 120, 1, 1, 1, false, false, bmp, blue, green, yellow, black, red);
scene.addChild(cube);
// Ajout de l'écouteur d'événements Click sur le cube
cube.addEventListener(MouseEvent3D.CLICK, faceClick);
// Ajout du rafraichissement automatique de la caméra
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function faceClick(e:MouseEvent3D):void{
// On récupère l'objet sous le curseur de la souris et appartenant au cube, en gros on récupère la face cliquée
var data:RayIntersectionData = cube.intersectRay(e.localOrigin, e.localDirection);
if(data != null){
// Ici, nous récupérons le nom de la face
var faceName:String = data.face.material.name;
if(faceName == "Bitmap"){
navigateToURL(new URLRequest("http://romaindedenis.over-blog.com"), "_blank");
} else {
//Si le nom de la face est différent de "Bitmap", on change sa couleur
data.face.material = new FillMaterial(Math.random() * 0xffffff);
data.face.material.name = faceName;
}
}
}
private function onEnterFrame(e:Event):void{
//On faist tourner le cube de 0.01 radians par frame
cube.rotationZ += 0.01;
camera.render();
}
}
}
Résultat Obtenu
