Wednesday, 16 November 2011

Texturing a sphere in Away3D

In this post I will add a texture to a sphere primitive in Away3D and rotate the sphere around the x axis using the mouse. You will need the Away3D engine which can be downloaded from: away3d.com and an image of a texture for this tutorial.


Texturing a sphere in Away3D

Step 1

Open up a new AS3 file and import a texture into the library by selecting File > Import > Import to Library. In the library select the image then right click and select Properties. In the Options tab select ‘Allow smoothing’ and in the Actionscript tab select ‘Export for Actionscript ’. Give the value: ‘MyTexture’ for the class and click ok. Set the document class with the name: Texture and save the FLA with name: Texture.


Step 2

Open a new AS3 Class file with the name: Texture and add the following import statements and variables. In the constructor add the createView and createScene functions.

package{

import away3d.cameras.HoverCamera3D;
import away3d.containers.View3D;
import away3d.primitives.Sphere;
import away3d.materials.BitmapMaterial;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.Event;
 
public class Texture extends Sprite{
 
private var view:View3D;
private var camera:HoverCamera3D;
  
public function Texture() { 
 createView();
 createScene();
}

In the createView() function add an instance of the HoverCamera3D and the view3D and an enter frame event.

private function createView():void{
 camera: HoverCamera3D = new HoverCamera3D();
 camera.distance = 1000;
 camera.tiltAngle = -10;
 camera.zoom = 40;
   
 view = new View3D;
 view.x = stage.stageWidth/2;
 view.y = stage.stageHeight/2;
 view.camera = camera;
 addChild(view);
   
 stage.addEventListener(Event.ENTER_FRAME, ef); 
}


In the createScene function add a new sphere object to the scene with the material property set to the imported texture in the library. The segmentsW and segmentsH properties increase the number of faces of the sphere to give a smoother appearance.

private function createScene():void{ 
 var bitmapdata:BitmapData = new MyTexture(0,0);  
 var bitmapMat:BitmapMaterial = new BitmapMaterial(bitmapdata);
   
 var sphere:Sphere = new Sphere();
 sphere.radius = 30;
 sphere.segmentsW = 24;
 sphere.segmentsH = 12;
 sphere.material = bitmapMat;
 view.scene.addChild(sphere); 
}

In the ef function the camera pan angle is updated with the movement of the mouse by calling the hover() method.

private function ef(e:Event):void {
  camera.panAngle = mouseX - stage.stageWidth / 2;
  camera.hover();
  view.render();
 } 
    }
}

Step 3

Export the movie Ctrl + Enter. Now move the mouse over the sphere.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP