This is little video how to make cube and animation only using actionscript and away3d
Understanding 3d animation of cube rotations with away3d, actionscript, flash 11.
I am actually have to made switch to start index on face 3d animation of cube rotation. For example if I press the 'A' key cube customise his rotationX, rotationY, and rotationZ and turn his body, but his face 'A' have to look at me. For this moment I realised how to make a cube with actionscript code and make faces textures like A,B,C,D,E,F images and how to rotate it using Matrix3D and Orientation3D.EULER_ANGLES. At first I tested property rotationX, rotationY and rotationZ using buttons and I realised how can I set them using Matrix3D, for example if I have to set this property (rotationX, rotationY and rotationZ) in general using Matrix3D.recompose
cube.rotationX=-90
cube.rotationY=0
cube.rotationZ=0
It is actually the same
eulerV =
Vector.([new Vector3D(0, 0, 0),
new Vector3D(0, 0, -1.5707963705062866), new Vector3D(1, 1, 1)]);
m3 = new Matrix3D();
m3.recompose(eulerV, Orientation3D.EULER_ANGLES);
cube.transform = m3;
I have to chose Matrix3D and EULER_ANGLES then (rotationX, rotationY and rotationZ) because Matrix3D has special property for animation Matrix3D.interpolate(startMatrix, finishMatrix, procentAnimation).
Here is the actionscript code for Away3D 4.1, flash 11, particularly away3d-core-fp11_4_1_0_Alpha.swc
package
{
import away3d.animators.*;import away3d.core.partition.*;
import away3d.events.*;import away3d.cameras.lenses.*;
import away3d.core.base.*;import away3d.core.math.*;
import away3d.library.assets.*;import away3d.debug.*;
import away3d.cameras.*;import away3d.containers.*;import away3d.entities.*;
import away3d.lights.*; import away3d.materials.*;
import away3d.materials.lightpickers.*;
import away3d.materials.methods.*; import away3d.primitives.*;
import away3d.textures.*;import away3d.filters.*;
import away3d.materials.utils.*;import away3d.primitives.data.*;
import flash.display.*; import flash.events.*; import flash.system.*;
import flash.ui.*; import flash.utils.*; import flash.sampler.*;
import flash.net.*; import flash.media.*; import flash.net.*;
import flash.external.*; import flash.text.*;
import flash.geom.*;
/**
* ...
* @author Lexcuk
*/
public class TestLookAtCubeDoc extends Sprite
{
private var container:ObjectContainer3D;
public var sprite:Sprite;
public var view:View3D;
private var containerArr:Array;
private var blaMaterial:TextureMaterial;
private var hrefTxt:TextField;
private var nArr:Array;
private var cube:ObjectContainer3D;
private var cubeContainer:ObjectContainer3D;
private var customMesh:Object3D;
private var startMatrix:Matrix3D;
private var mat:Matrix3D;
private var eulerCube:Vector.<Vector3D> = Vector.<Vector3D>([
new Vector3D(3.141592502593994, 0, 0),//a-
new Vector3D(-1.5707963705062866, 0, 0),//b-
new Vector3D(0, 0, -1.5707963705062866),//c-
new Vector3D(1.5707963705062866, 0, -1.7484555314695172e-7),//d-
new Vector3D(-8.742277657347586e-8, 1.5707963705062866, 1.570796251296997),//e-
new Vector3D(-1.9749151265220513e-15, -1.5707963705062866, -1.5707963705062866)//f-
]);
private var eulerV:Vector.<Vector3D> =
Vector.<Vector3D>([new Vector3D(0, 0, 0), new Vector3D(0, 1, 0), new Vector3D(1, 1, 1)]);
private var cubeRotationStartMatrix:Matrix3D;
private var cubeRotationTagertMatrix:Matrix3D;
private var animationSpeed:Number = 0.05;
private var animationCount:Number = 0;
private var camScale:Number = 0.6;
public function TestLookAtCubeDoc()
{
view = new View3D();
view.camera.lens.far = 5000;
view.camera.lens.near = 1;
//view.camera.moveTo( 0, 1000, 0);//camA
view.camera.moveTo( 1000*camScale, 500*camScale, 300*camScale);//camB
//view.camera.moveTo( 300, 500, 1000);//camC
view.camera.lookAt(new Vector3D(0, 0, 0))
sprite = new Sprite();
sprite.addChild(view);
sprite.addChild(new AwayStats(view));
addChild(sprite);
customMesh = new Object3D();
var perlinBitmap:BitmapData = getPerlinBmd();
container = new ObjectContainer3D();
view.scene.addChild(container);
var sunLight:DirectionalLight = new DirectionalLight( -1, -0.4, 1);
//with (sunLight) { color = 0xFFFF80; castsShadows = true; ambient = diffuse = specular = 1; }
container.addChild(sunLight);
var bgMesh:Mesh = new Mesh(new PlaneGeometry(1000, 1000));;
bgMesh.y = -100;
var bgMaterial:TextureMaterial = new TextureMaterial(new BitmapTexture(perlinBitmap), false, true);
bgMesh.material = bgMaterial;
container.addChild(bgMesh);
blaMaterial = mekeBlaMaterial();
containerArr = [];
nArr = ['A', 'B', 'C', 'D', 'E', 'F'];
cube = makeContainer(0, 0);
cubeContainer = new ObjectContainer3D();
cubeContainer.addChild(cube);
container.addChild(cubeContainer);
var dir:Vector3D = Matrix3DUtils.getRight(view.camera.transform);
cubeContainer.lookAt(new Vector3D(300,0,150)/*view.camera.position*/, dir);
cubeContainer.rotationX += 30;
sprite.addChild(hrefTxt = new TextField());
hrefTxt.border = true;
hrefTxt.background = true;
hrefTxt.backgroundColor = 0xFFFFFF;
hrefTxt.autoSize = TextFieldAutoSize.LEFT;
hrefTxt.selectable = false;
hrefTxt.x = 150;
hrefTxt.scaleX = hrefTxt.scaleY = 1.4;
var htmStr:String = '';
htmStr = addStrHref('camA') + addStrHref('camB') + addStrHref('camC');
for (var i:int = 0; i < 6; i++) htmStr += addStrHref(nArr[i]);
htmStr += addStrHref('lookAtCamera','\n');
htmStr += addStrHref('clear rotation');
htmStr += addStrHref('x-90');
htmStr += addStrHref('x+90');
htmStr += addStrHref('y-90');
htmStr += addStrHref('y+90');
htmStr += addStrHref('z-90');
htmStr += addStrHref('z+90');
hrefTxt.htmlText = htmStr;
hrefTxt.addEventListener("link", txtNavHandler);
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}
private function animationEnterFrameHandler(e:Event):void {
animationCount += animationSpeed;
if (animationCount > 1) animationCount = 1;
var m:Matrix3D = Matrix3D.interpolate(cubeRotationStartMatrix, cubeRotationTagertMatrix, animationCount);
cube.transform = m;
if (animationCount >= 1) {
removeEventListener(Event.ENTER_FRAME, animationEnterFrameHandler);
}
}
private function txtNavHandler(e:TextEvent):void {
if (e.text == 'camA') view.camera.moveTo( 0, 1000*camScale, 0);
if (e.text == 'camB') view.camera.moveTo( 1000*camScale, 500*camScale, 300*camScale);
if (e.text == 'camC') view.camera.moveTo( 300*camScale, 500*camScale, 1000*camScale);
view.camera.lookAt(new Vector3D(0, 0, 0));
for (var i:int; i < 6; i++) {
//var dir:Vector3D = Matrix3DUtils.getRight(view.camera.transform);
if (e.text == nArr[i]) {
eulerV[1] = eulerCube[i];
trace('eulerV ' + eulerV);
var m3:Matrix3D = new Matrix3D();
m3.recompose(eulerV, Orientation3D.EULER_ANGLES);
cubeRotationStartMatrix = cube.transform.clone();
cubeRotationTagertMatrix = m3;
animationCount = 0;
addEventListener(Event.ENTER_FRAME, animationEnterFrameHandler);
}
}
if (e.text == 'lookAtCamera') {
for (i=0; i < 9; i++) {
var dir:Vector3D = Matrix3DUtils.getRight(view.camera.transform);
cubeContainer.lookAt(view.camera.position, dir);
}
}
if (e.text == 'clear rotation') {
trace('clear rotation');
cube.rotationX = cube.rotationY = cube.rotationZ = 0;
}
if (e.text == 'x-90') cube.rotationX -= 90;
if (e.text == 'x+90') cube.rotationX += 90;
if (e.text == 'y-90') cube.rotationY -= 90;
if (e.text == 'y+90') cube.rotationY += 90;
if (e.text == 'z-90') cube.rotationZ -= 90;
if (e.text == 'z+90') cube.rotationZ += 90;
trace('cube.rotationX=' + cube.rotationX);
trace('cube.rotationY=' + cube.rotationY);
trace('cube.rotationZ=' + cube.rotationZ);
var m:Matrix3D = cube.transform;
trace('qu= Vector.<Vector3D>([' + m.decompose(Orientation3D.EULER_ANGLES) + ']);' );
}
private function addStrHref(str:String, delimStr:String = ' | '):String {
return "<a href='event:" + str + "'>" + str + "<u></u>"+delimStr;
}
private function enterFrameHandler(e:Event):void {
view.render();
}
public function makeContainer(posX:Number, posY:Number):ObjectContainer3D {
var con:ObjectContainer3D = new ObjectContainer3D();
var c3:ObjectContainer3D = new ObjectContainer3D();
var geometry:Geometry = new Geometry();
var subGeometry:SubGeometry = new SubGeometry();
var s:Number = 100;
var vertexData:Vector.<Number> = Vector.<Number>([s, s, s, s, s, -s,
-s, s, -s, s, s, s, -s, s, -s, -s, s, s, -s, -s, -s, -s, -s, s, -s,
s, s, -s, -s, -s, -s, s, s, -s, s, -s, s, -s, -s, s, -s, s, -s, -s,
-s, s, -s, s, -s, -s, s, -s, -s, -s, s, s, -s, s, s, s, s, -s, -s,
s, s, s, s, -s, s, s, -s, -s, s, s, s, -s, s, s, s, -s, s, -s, s, s,
-s, -s, s, s, -s, s, s, s, -s, s, -s, -s, -s, -s, -s, s, s, -s, -s,
-s, -s, -s, s, -s]);
var uvData:Vector.<Number> = Vector.<Number>([0, 0.5, 1 / 3, 0.5,
1 / 3, 1, 0, 0.5, 1 / 3, 1, 0, 1, 1 / 3, 0.5,
2 / 3, 0.5, 2 / 3, 1, 1 / 3, 0.5, 2 / 3, 1, 1 / 3, 1, 1 / 3,
0, 2 / 3, 0, 1 / 3, 0.5, 2 / 3, 0, 2 / 3, 0.5, 1 / 3, 0.5, 2 / 3, 0.5,
1, 0.5, 2 / 3, 1, 1, 0.5, 1, 1, 2 / 3, 1, 2 / 3, 0, 1, 0, 2 / 3, 0.5,
1, 0, 1, 0.5, 2/3, 0.5, 0, 0, 1/3, 0, 1/3, 0.5, 0, 0, 1/3, 0.5, 0, 0.5]);
var indexData:Vector.<uint> = new Vector.<uint>();
for (var i:int = 0; i < 36; i++) indexData.push(i);
subGeometry.updateVertexData(vertexData);
subGeometry.updateUVData(uvData);
subGeometry.updateIndexData(indexData);
subGeometry.autoDeriveVertexNormals = true;
subGeometry.autoDeriveVertexTangents = true;
geometry.subGeometries.push(subGeometry);
var cM:Mesh = new Mesh(geometry, blaMaterial);
c3.addChild(cM);
con.addChild(c3);
con.position = new Vector3D(posX, 0, posY);
return con;
}
public function mekeBlaMaterial():TextureMaterial {
var s:Sprite = new Sprite();
var sh:Shape = new Shape();
var b:Bitmap;
var e:Number = 128;
s.addChild(makeABitmap('A'));
s.addChild(b = makeABitmap('B'));
b.x = e;
s.addChild(b = makeABitmap('C'));
b.x = e * 2;
s.addChild(b = makeABitmap('D'));
b.y = e;
s.addChild(b = makeABitmap('E'));
b.x = e; b.y = e;
s.addChild(b = makeABitmap('F'));
b.x = e * 2; b.y = e;
s.addChild(sh);
sh.graphics.lineStyle(5, 0xFF8000);
for (var i:int; i < 6; i++) {
sh.graphics.drawRect(i % 3 * e, int(i / 3) * e, e, e);
}
var bmd:BitmapData = new BitmapData(256, 256);
var m:Matrix = new Matrix();
m.scale(1 / 1.5, 1);
bmd.draw(s,m);
return new TextureMaterial(new BitmapTexture(bmd), false, true);
}
public function makeABitmap(str:String = 'A'):Bitmap {
var txt:TextField = new TextField();
txt.htmlText = '<FONT FACE="courier" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="0"><b>'+str+'</b></FONT></P>';
var tbmd:BitmapData = new BitmapData(128, 128);
var m:Matrix = new Matrix();
m.ty = -4;
m.tx = -2;
m.scale(13, 13);
tbmd.draw(txt,m);
return new Bitmap(tbmd);
}
public function getPerlinBmd():BitmapData {
var s:Number = 512;
var bitmapData:BitmapData = new BitmapData(s, s, true);
var numOctaves:Number = 1;
bitmapData.perlinNoise(25, 52, 1, 1314, false, false, 10, false)
var sp:Sprite = new Sprite();
sp.graphics.beginFill(0xFFFFFF);
sp.graphics.drawRect(0, 0, s, s);
sp.addChild(new Bitmap(bitmapData));
var resBitmap:BitmapData = new BitmapData(s, s, true);
resBitmap.draw(sp);
return resBitmap;
}
}
}
How to faced cube, create cube, textures, using only actionscript?
It's actually function makeContainer, and if you have to see textures for cube, you can change function mekeBlaMaterial, like this
public function mekeBlaMaterial():TextureMaterial {
var s:Sprite = new Sprite();
var sh:Shape = new Shape();
var b:Bitmap;
var e:Number = 128;
s.addChild(makeABitmap('A'));
s.addChild(b = makeABitmap('B'));
b.x = e;
s.addChild(b = makeABitmap('C'));
b.x = e * 2;
s.addChild(b = makeABitmap('D'));
b.y = e;
s.addChild(b = makeABitmap('E'));
b.x = e; b.y = e;
s.addChild(b = makeABitmap('F'));
b.x = e * 2; b.y = e;
s.addChild(sh);
sh.graphics.lineStyle(5, 0xFF8000);
for (var i:int; i < 6; i++) {
sh.graphics.drawRect(i % 3 * e, int(i / 3) * e, e, e);
}
var bmd:BitmapData = new BitmapData(256, 256);
var m:Matrix = new Matrix();
m.scale(1 / 1.5, 1);
bmd.draw(s, m);
addChild(new Bitmap(bmd));////show my cube textures
return new TextureMaterial(new BitmapTexture(bmd), false, true);
}
And you can see cube textures like this
You can download this flash as3 example cube and animation rotation.
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
