Since playing around with Three.js and Javascript in general I was inspired to go ahead and understand how the 3D magic works, so I created my own basic 3D engine. It is by no means comparable to Three.js, it can just draw particles, lines and boxes, so all good fun

I recreated the demo below using my own engine and here is the result.

How it works.
The first thing I did was to create a Canvas based renderer that took a 3D point, converted it to 2D then drew it on to the canvas. This then later expanded to being able to draw lines in 3D and now 3D planes. All of this is demonstrated in the examples below.

Once I had got the basics working, I added camera and scene functionality, although the camera has no actual camera functionality yet, that is coming when I can get my head around this transformation matrix stuff. This is all I’m getting at the moment.

Then I added some basic primitives and 3D objects like Particles and a Cube, with a basic RGB material for starters.

Demos.

Granted, these demos are exciting at all and have been done 1000′s of times before, but I’m pleased that I’ve managed to get this far! There is so much more that I can add to make this a properly fully functional 3D Javascript engine.

At the moment the only available renderer is just using Canvas and I would like to add a WebGL renderer in the future.

If anyone knows of any good articles/resources on 3D math then I’d greatly appreciate a comment with a link!

I went ahead and built a little demo based on my first 2D experiment with canvas.

It’s fairly simple but it gave me a good idea of the Three.js 3D engine and I highly recommend anyone who wants something different to play around with, have a go with it. The code for the demo above is below.

3d.js:

// 3d vars.
var camera;
var scene;
var renderer;

// size
var WIDTH 				= 800;
var HEIGHT 				= 600;

var circleColours 		= [0x0099CC, 0xCCCCCC, 0x9900CC];
var colourIndexToUse 	= 0;
var fadeAmount 			= 0.0000000005;

// used to tell when to draw.
var shouldDraw 			= false;

// mouse coordinates.
var mouseX;
var mouseY;

setInterval( invalidate, 10 );

function init() {
	camera 					= new THREE.Camera( 75, WIDTH / HEIGHT, 1, 10000 );
	scene 					= new THREE.Scene();
	renderer 				= new THREE.CanvasRenderer();
	renderer.setSize( WIDTH, HEIGHT );

	camera.position.z 		= 700;
	document.body.appendChild( renderer.domElement );
}

function invalidate()
{
	if(shouldDraw) draw();
	// fade all the current circles.
	fade();
	// render it all.
	renderer.render( scene, camera );
}

function draw() {
	 for(var i = 0; i < 5; ++i)
	 {
		 var particle 			= new THREE.Particle( new THREE.ParticleCircleMaterial( circleColours[colourIndexToUse], Math.random() ) );
		 particle.position.x 	= i == 0 ? mouseX - 500 : mouseX - 500 * (Math.random() * 1.5);
		 particle.position.y 	= i == 0 ? mouseY - 500 : mouseY - 500 * (Math.random() * 1.5);
		 particle.position.z 	= mouseX * Math.random();
		 particle.scale.x 		= i == 0 ? particle.scale.y = Math.random() * 50 : particle.scale.y = Math.random() * 5;
	     scene.addObject( particle );
	 }
}

/*
 * This fades all the existing objects in the scene.
 */
function fade() {
	for(var i = 0; i < scene.objects.length; ++i)
	{
		var prevAlpha = scene.objects[i].material[0].color.a;
		if(prevAlpha != 0)
		{
			var newMat 						= new THREE.ParticleCircleMaterial( circleColours[colourIndexToUse], prevAlpha - fadeAmount );
			scene.objects[i].material[0] 	= newMat;
		}
		else scene.removeObject(scene.objects[i]);
	}
}

function setMousePosition(x, y)
{
	mouseX 				= x;
	mouseY 				= y;

	camera.position.x 	+= (mouseX - camera.position.x) * .045;
	camera.position.y 	+= (-mouseY - camera.position.y) * .045;
}

jQuery(document).ready(function() {
	$('canvas').mousemove(function(e) { setMousePosition(e.pageX, e.pageY); } );
	$('canvas').mousedown(function(e) { shouldDraw = true;  } );
	$('canvas').mouseup(function(e)   { shouldDraw = false; } );
});

init();

For those looking for more resources in regards to getting started with the whole HTML5/Canvas and also Three.js here’s some good ones:

• Mozilla Canvas Tutorial – https://developer.mozilla.org/en/canvas_tutorial
• Dive Into HTML5, A great guide giving you an insight into a lot of the new features of HTML5 – http://diveintohtml5.org/
• Opera Canvas Guide, Similar to the Mozilla article, very straight forward – http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Have Fun!

The idea is that code is split into different bubbles, each one representing a function. You can then drop and drag different methods around, adding notes to them, marking them as bugs or flagging that particular function as important. I think this is a great way of coding as coding by nature is a very logical task and so by displaying it in a very organized, logical way makes a lot of sense. Traditionally code is just displayed as a single file with methods listed one after the other which is fine for smaller files/projects with a moderate amount of functions and classes with little to no external dependencies, but when you are dealing with large projects, multiple files and lots of external library’s then this way of logically splitting it up into relevant bubbles really makes sense. So watch the video and see what you think!

Project page here: http://www.cs.brown.edu/people/acb/codebubbles_site.htm

I’m hoping to find some time in between GCSEs to have a go at making some stuff with this, so keep any eye out. You can download it here, and find the setup instructions here.

Have fun!!

Before you ask, no I wasn’t at MAX, but after making an attempt at going through some of the 250+ hours of footage I have found a few jems that I think are worth mentioning. It sounded quite an event and plenty of exciting announcements were made! Heres a few key sessions.

By now I am assuming you have all heard about native compiling to the iPhone in Flash CS5 and if you haven’t then be very ashamed :p . Well here’s a session that sheds some light on it if you haven’t got a clear understand:

Building Applications for iPhone using Adobe Flash CS5 professional

Now the next one is on the Flash Player its self, and what makes it tick. With each update the Flash Player gets more and more advanced, and with it complicated. Questions you never even had are answered in this session and it is a must see from my point of view.

Flash Player Internals

A lot of these things in this video I have never really thought about, but when they are explained you see what a difference they make and how important it is to know some of the stuff explained. One of the interesting concepts was at the start about rendering, describing the difference between Immediate and Retained rendering. Now I know this is simple stuff for the ‘pros’ amongst us, but for me I had never really understood this so it was nice to have it explained in simple terms.

For me one of the biggest announcements was that there is a new FLA format, which is going to be based on XML! This is a lot better than the current version which was essentially a ‘black box’ as XML is an extremely open and widely used language. The new format is essentially going to be a modified ZIP file contain separate files for the library assets, publication settings and document information which will make it easier to use in source control systems and other similar management tools.

XML based FLA: The New Flash File Format

Also, sorry it has been quite recently! I have been rather busy with school seeing as I am coming up to my GCSEs quite soon. I am also starting to think about work experience for the 2010 summer (July-August), and if anyone has any suggestions or offers then that would be brilliant!

Harry.

Here is a simple guide to getting setup using the Augmented Reality in Flash. This includes downloading the library’s and then getting a simple demo up and running.

The name of the library used for Augmented Reality in Flash is called FLARToolkit which is developed by Saqoosha. It is a port of the ARToolkit which is written in C. You can download it from here through SVN. If you haven’t got a SVN client setup then I highly recommend SmartSVN which is a free client and I must thank Richard Leggett for recommending this to me!

Now once you have got the code, add it to your global Actionscript folder, then print out this marker and run the example. You can either compile the source in the ‘src’ folder or just run the SWF in the ‘bin-debug’ folder. Hopefully this gives you a idea of what AR/FLARToolkit is all about.

If you can run the example yourself, here is a video of it in action.

FLARToolkit / Augmented Reality Basic Demo. from Harry Northover on Vimeo.

I have also written a base class for a FLARToolkit application. It is designed so that all you have to do is override the function ‘add3d()‘ to add your 3D objects to ‘FLAR_Container” object, and then override another function, ‘addAnimation_3d()‘ to add the animation. My description here is very brief so read the readme file in the package. You can download the class here. If you want to see how much code this can reduce then here is an example class using the base class:

package
{
	import com.harrynorthover.ar.flar.base.FLARSingleMBase;

	import flash.filters.BlurFilter;

	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;

	[SWF(width="640", height="480", frameRate="30", backgroundColor="#FFFFFF")]

	public class Demo_BaseClass_Test extends FLARSingleMBase
	{
		private var cube:Cube;

		public function Demo_BaseClass_Test()
		{
			/*This is the function 'Init' you need to call to setup the FLARToolkit scene.
			     WIDTH, HEIGHT, FRAMERATE*/
			Init(640,   480,    30);
		}

		/*
		...
		This function is the one you need to override
		to add things to your 3D scene.
		*/

		override protected function add3D():void
		{
			// Add you 3D stuff here. The more the better 
			var pl:PointLight3D = new PointLight3D();
			pl.z = -1000;
			pl.y = 1000;
			pl.x = 1000;
			pl.flipped = true;	

			//var blurFilter:BlurFilter = new BlurFilter(24, 12, 1);
			var matList:MaterialsList = new MaterialsList();
			var fsm:FlatShadeMaterial = new FlatShadeMaterial(pl);

			matList.addMaterial(fsm, "all");

  			cube = new Cube(matList, 60, 60, 60, 5, 5, 5);
  			//cube.useOwnContainer = true;
  			//cube.filters = [blurFilter];

  			// FLAR_Container is the FLARBaseNode that you
  			// add your 3D objects to.
	        FLAR_Container.addChild(cube);
		}

		/*
		...
		This is the function to which you override to add
		your 3D animation.
		*/

		override protected function addAnimation_3d():void
		{
			//Add you animation here.
			cube.yaw(10);
		}
	}
}

See? Lots of code that has been got rid of!

Other demos I have been working on are here:

FLAR + Lines3D:

FLARToolkit and Lines3D / Augmented Reality from Harry Northover on Vimeo.

Incorporating AS3DMod:

FLAR + As3DMod from Harry Northover on Vimeo.

So there you go, my first few demos. Yes, I know, they are not very special but now I’m working on getting mutliple markers working and just more advanced demos in general. If you are looking for more advice on how to get set up with FLAR go over to this blog here. This has everything you need to get going. Also, check out squidder.com for some cool demos.

Happy ARing!

This piece uses a render from Cinema 4D and the adds a little Photoshop magic.

Harry.

Desire / Cinema 4D + Photoshop CS4

Passion / Cinema 4D + Photoshop CS4

For After Effects I have been creating little scenes with things like moving water which arent really worth posting here, but here is a screenshot of one of them.

3D Ocean / After Effects.

So there you go, some of the stuff I have been doing to help me learn these tools. I feel that now my art work has really stepped up a pace now, and hopefully you will agree too

Harry.

Here’s the first little tech demo of ’09 and I think it is a pretty cool one. The first difference is that it is made with Papervision3D instead of my usual engine choice of Away3D. It also uses a relativly new library, AS3DMod, and works with the 4 most popular engines.  Now this library is a modifier library which can do some really cool stuff, so go on over and check it out.

Now for the demo. It creates a standard plane, then applys a noise and perlin modifier to it. The last thing is to apply a FlatShadeMaterial to the plane and just animate these properties in the enter frame function.

You can download it here. To view the demo, click on the picture.

Harry.

In my effort to learn After Effects CS4 and create high quality visual effects/motion graphics stuff, I created this little recreation of the famous iPod Nano advert to help me learn how to use After Effects and the Trapcode Particular.

Now this makes heavy use of Particular and uses the wiggle() function to create the random motion for a minute.

It’s fairly basic but it helped me learn the basics of camera movement and how to get to grips with animation in After Effects. There will hopefully be a lot more AE/VFX coming soon. I have a little Flash demo on the way, but after that it’s a free road!

Harry.

Phew, a tech demo hasn’t found it’s way on here for quite a while! Here is one to let you know I’m back, but busy. 

I finally managed to get an idea down on to paper, (well.. into the Flash IDE) that had been buzzing around in my head for ages! 

There is a feature in Away3D call the BitmapRenderSession, and you assign this to the session variable of your View3D. What this tells the rendered to do is, instead of drawing directly to the screen, it draws everything inside a BitmapData object, but at a much smaller resolution. This Bitmap is then scaled up and show and the selected size. As you can imagine this saves a lot of work done, as you only have to draw at, say, a quarter of the resolution that you normally would. There is a catch. You will have figured this out already, but the lost of quality is tremendous the more you scale it up, but I have found out how to make this work for me. Just look at the demo. 

What I have done here is create a plane, added then some animation to it. Then I am assigning a new BitmapRenderSession object to the View3D, and then changing the value of it when the mouse moves. If you look closely at the code, you will see that I am creating a new BitmapRenderSession for every frame. Not efficient at all, but I haven’t had the time to look into this properly, so if anyone knows a solution, let me know! 

This at one end of the scale (with your mouse at the top), looks high quality, but when you move your mouse to the bottom, you can see the effect immediately. It becomes highly pixilated and, I think, fairly cool! I have seen this sort of effect on many sites, and always wondered how I could achieve it. Here is my solution, but one of many out there I’m sure. 

Your going to have to resize your browser, as pop-ups seem to be fairly hard in WordPress  

You can download the whole thing over at my Google Code site (look on the right). It should be up there in a few days. Here’s the link: BMRS.zip

Harry.

Here is an example:

package {
	import away3d.primitives.Sphere;
	import com.harrynorthover.base.AwayBase;

	public class BaseClass extends AwayBase {
		public var sphere:Sphere = new Sphere( { radius:100 } );

		public function BaseClass() {
			// Init(camZoom, viewX, viewY);
			Init(12, 0, 0);
		}

		override protected function Init3D():void {
			sphere.x = 0;
			sphere.y = 0;
			view.scene.addChild(sphere);
		}
	}
}

See how much is has been reduced by? No faffing around with View3D and addChild(view) etc.

You can download the whole thing here: http://harry-northover-code-store.googlecode.com/files/Away3dBase.zip

Hope it helps!
Harry.

NOTE: It is better viewed when you download it as I am having troubles with pop-ups in WordPress? When viewed on line it is incrediably slow, and not very good in general.

And here is the code:

import gs.TweenLite;
import gs.easing.Expo;

var amountOfCircles:Number = 30;
var stageW:Number = stage.stageWidth;
var stageH:Number = stage.stageHeight;
var ranX:Number = Math.random() * stageW - 300;
var ranY:Number = Math.random() * stageH - 300;
var ranAlpha:Number = Math.random() * .5;

var blur:BlurFilter = new BlurFilter(10, 10, 1);
var blurBM:BlurFilter = new BlurFilter(20, 0, 1);
var glowBM:GlowFilter = new GlowFilter(Math.round( Math.random()*0xFFFFFF ));

var bmd:BitmapData = new BitmapData(550, 500, true, 0x000000);
var bm:Bitmap = new Bitmap(bmd);
bm.x = 0;
bm.y = 0;
addChild(bm);

for (var i:uint = 0; i <= amountOfCircles; i++) {
	var circle:Circle = new Circle();
	circle.x = ranX + Math.random() * 100;
	circle.y = ranY + Math.random() * 100;
	circle.alpha = ranAlpha;
	circle.filters = [blur, glowBM];
	addChild(circle);
}

mover();
addEventListener(Event.ENTER_FRAME, enterFrame);
stage.addEventListener(Event.RESIZE, onResize);

function mover():void {

	for (var i:uint = 0; i <= amountOfCircles; i++) {
			var object:DisplayObject = getChildAt(i);
			if (object == bm) {
				i++;
			}
			else {
				object.alpha = ranAlpha;
			TweenLite.to(object, 1, {x: ranX + Math.random() * 1000, y: ranX + Math.random() * 1000, alpha: 0, ease:Expo.easeInOut, onComplete:mover, blurFilter:{blurX:Math.random()*100, blurY:Math.random() * 100}, tint:Math.round( Math.random()*0xFFFFFF )});
			glowBM.color = Math.round( Math.random()*0xFFFFFF );
			glowBM.alpha = ranAlpha / 2;
			}
	}
}

function enterFrame(evt:Event):void {
	bmd.draw(stage);
	bmd.applyFilter(bmd, bmd.rect, new Point(0,0), blurBM);
	bmd.applyFilter(bmd, bmd.rect, new Point(0,0), glowBM);
	bmd.scroll(10, 0);
}

function onResize(evt:Event):void {
	bm.x = bm.y = 0;
	bm.width = stage.stageWidth;
	bm.height = stage.stageHeight;
}

You can download the whole thing here: http://harry-northover-code-store.googlecode.com/files/Technophobia.zip

Harry.

Here is the demo (just click). To explore, click and drag to find your way around.

And here is the code:

package {

	import away3d.cameras.HoverCamera3D;
	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.materials.BitmapMaterial;
	import away3d.primitives.Skybox;
	import away3d.core.utils.Cast;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class SkyStuff extends Sprite {

		public var cam:HoverCamera3D = new HoverCamera3D( { zoom:2 } );
		public var scene:Scene3D = new Scene3D;
		public var view:View3D = new View3D( { camera:cam, scene:scene, x:0, y:0 } );

		// Skybox stuff.
		public var sky:Skybox;
		// Materials....
		public var sky_front_material:BitmapMaterial;
		public var sky_back_material:BitmapMaterial;
		public var sky_left_material:BitmapMaterial;
		public var sky_right_material:BitmapMaterial;
		public var sky_up_material:BitmapMaterial;
		public var sky_down_material:BitmapMaterial;

		// Movement vars.
		public var move:Boolean = false;
		public var lastPanAngle:Number;
		public var lastTiltAngle:Number;
		public var lastMouseX:Number;
		public var lastMouseY:Number;

		public function SkyStuff():void {
			addEventListener(Event.ADDED_TO_STAGE, Init);
		}

		private function Init(evt:Event):void {
			InitStage();
			InitEngine();
			InitMaterials();
			InitObjects();
			InitListeners();
		}

		private function InitStage():void {
			stage.align = StageAlign.TOP_LEFT
			stage.scaleMode = StageScaleMode.NO_SCALE;
		}

		private function InitEngine():void {
			cam.mintiltangle = -80;
			cam.maxtiltangle = 20;
			cam.targetpanangle = cam.panangle = 0;
			cam.targettiltangle = cam.tiltangle = 0;

			addChild(view);
		}

		private function InitObjects():void {
			sky = new Skybox( sky_front_material, sky_left_material, sky_back_material, sky_right_material, sky_up_material, sky_down_material );
			sky.quarterFaces();
			view.scene.addChild(sky);
		}

		private function InitMaterials():void {
			sky_front_material = new BitmapMaterial(Cast.bitmap(SkyFront));
			sky_back_material = new BitmapMaterial(Cast.bitmap(SkyBack));
			sky_left_material = new BitmapMaterial(Cast.bitmap(SkyLeft));
			sky_up_material = new BitmapMaterial(Cast.bitmap(SkyTop));
			sky_right_material = new BitmapMaterial(Cast.bitmap(SkyRight));
		}

		private function InitListeners():void {
			addEventListener(Event.ENTER_FRAME, EnterFrame);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
			stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);
			stage.addEventListener(Event.RESIZE, Resize);
		}

		private function EnterFrame(evt:Event):void {
			if (move) {
				cam.targetpanangle = 0.3 * (stage.mouseX - lastMouseX) + lastPanAngle;
				cam.targettiltangle = 0.3 * (stage.mouseY - lastMouseY) + lastTiltAngle;
			}
			cam.hover();
			view.render();
		}

		private function MouseDown(evt:MouseEvent):void {
			lastPanAngle = cam.panangle;
			lastTiltAngle = cam.tiltangle;
			lastMouseX = stage.mouseX;
			lastMouseY = stage.mouseY;
			move = true;
			stage.addEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}

		private function MouseUp(evt:MouseEvent):void {
			move = false;
			stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}

		private function onStageMouseLeave(evt:Event):void {
			move = false;
			stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}

		private function Resize(evt:Event):void {
			view.x = stage.stageWidth / 3;
			view.y = stage.stageHeight / 3;
		}
	}

}

Now,I personally think skyboxes are a good piece of knowledge to have, as they provide, in my opinion, an effective and fairly easy way to get a fairly natural looking environment quickly. Once you have a skybox in place, you can concentrate on the more important objects, and not making the surrounding environment look good.

There is also another way of creating sky-boxes and this is using the Skybox6 class. This differs from the original method as instead of having six separate images, you have all your graphic in one jpg (png, or whatever).

I will also be trying to post versions of the examples in Papervision3d. This gives me a good understanding of how the engines differ, which ones I prefer and how they work.

You can download the whole thing (images as well!) here: http://harry-northover-code-store.googlecode.com/files/A3DSkyBox.zip

Harry.

Here are some sceen shots of what I am talking about:

(Just click on the images to view them )

These were made using a combination of TweenLite, Away3D and general brilliance . The first one actually uses no 3d, and I made the second one to see how easily it would be the get the same (or close to) result, but in 3D space.

Here is the code for the first one, just past it in the first frame.

import gs.TweenFilterLite;
import gs.easing.Expo;

var Blur:BlurFilter = new BlurFilter(100, 100, 3);
var BMBlur:BlurFilter = new BlurFilter(20, 20, 3);

var bmd:BitmapData = new BitmapData(550, 400, true, 0x000000);
var bm:Bitmap = new Bitmap(bmd);
addChild(bm);

var currentSquare:Box = new Box();
currentSquare.filters = [Blur];
addChild(currentSquare);

function mover_single():void {
	TweenFilterLite.to(currentSquare, .5,  {   x:Math.random() * 550,
						   y:Math.random() * 400,
						   ease:Expo.easeInOut,
						   alpha:100/*Math.random() * 1*/,
						   blurFilter:{blurX:Math.random() * 0,
						   blurY:Math.random() * 50},
						   tint:Math.round( Math.random()*0xFFFFFF ),
						   onComplete:mover_single });
}

mover_single();

addEventListener(Event.ENTER_FRAME, EnterFrame);

function EnterFrame(evt:Event):void {
		bmd.draw(this);
		bmd.applyFilter(bmd, bmd.rect, new Point(0, 0), BMBlur);
		bmd.scroll(5, 0);
		//trace(getChildAt(1));
}

And the second:

package {

	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.primitives.Cube;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.geom.Point;

	import gs.TweenLite;
	import gs.easing.Expo;

	public class Organic extends MovieClip {

		public var scene:Scene3D = new Scene3D;
		public var view:View3D = new View3D( { scene:scene, x:0, y:0 } );

		public var square:Cube;

		public var bmd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0x000000);
		public var bm:Bitmap = new Bitmap(bmd);

		public var BMBlur:BlurFilter = new BlurFilter(10, 0, 3);
		public var Blur:BlurFilter = new BlurFilter(5, 5, 3);

		public function Organic():void {
			addEventListener(Event.ADDED_TO_STAGE, Init);
			addEventListener(Event.ENTER_FRAME, EnterFrame);
		}

		private function Init(evt:Event):void {

			addChild(view);
			addChild(bm);

			view.camera.zoom = 1.5;

			square = new Cube( { height:200, width:200, material:"red#black" } );
			square.filters = [Blur];
			view.scene.addChild(square);

			Mover(); // This animates the box and then renders it/
		}

		private function Mover():void {
			TweenLite.to(square, .5, { x:Math.random() * -5550,
						   y:Math.random() * -5400,
						   z:Math.random() * 200,
						   ease:Expo.easeInOut,
						   onComplete:Mover,
						   alpha:Math.random() * 1,
						   rotationX:Math.random() * 360,
						   rotationY:Math.random() * 360,
						   height: Math.random() * 1000,
						   width: Math.random() * 1000 } );
			view.render();
		}

		private function EnterFrame(evt:Event):void {
			bmd.draw(this);
			bmd.applyFilter(bmd, bmd.rect, new Point(0, 0), BMBlur);
			bmd.scroll(5, 0);

			view.render();
		}
	}
}

So there you go. Here are the links to download the whole package:

• The First one: http://harry-northover-code-store.googlecode.com/files/Random%20Squares.zip
• The Second one: http://harry-northover-code-store.googlecode.com/files/3D%20Organic.zip

Harry.

1. For a start, I am a bit confused with the maths side of things. For example getting the most out of the view-ports and how to get the cameras in the right position. So this caused me that problem of all the dots being in the bottom left right corner.
2. When you go close up to the dots, some of them seem stretched.
3. Any ideas?

Here’s a snap shot:

And the code:

package {

	import away3d.cameras.HoverCamera3D;
	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.primitives.Sphere;

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class ThreeDParticle extends Sprite {

		public var cam:HoverCamera3D = new HoverCamera3D;
		public var scene:Scene3D = new Scene3D;
		public var view:View3D = new View3D( { x:550, y:400, scene:scene, camera:cam } );
		public var numOfDots:Number = 50;
		public var sphere:Sphere;
		public var cameraSpeed:Number = 0.3; // Approximately same speed as mouse movement.

		public var lastPanAngle:Number;
		public var lastTiltAngle:Number;
		public var lastMouseX:Number;
		public var lastMouseY:Number;
		public var move:Boolean;

		public function ThreeDParticle():void {
			// This is added so you can include this SWF in another.
			this.addEventListener(Event.ADDED_TO_STAGE, Init);
		}

		private function Init(evt:Event):void {
			addChild(view);

			cam.zoom = 1;
			cam.x = 0;
			cam.y = 0;

			for (var i:uint = 0; i <= numOfDots; i++) {
				sphere = new Sphere( { material:"black#red", radius:20, x:Math.random() * 1000, y:Math.random() * 1000, z:Math.random() * 100, segmentsH:10, segmentsW:10 } );
				view.scene.addChild(sphere);
			}
			this.addEventListener(Event.ENTER_FRAME, enterFrame);
			this.stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
			this.stage.addEventListener(MouseEvent.MOUSE_UP, mouseLeave);

			view.render();
		}

		private function enterFrame(evt:Event):void {
			if (move) {
				cam.targetpanangle = cameraSpeed * (this.stage.mouseX - lastMouseX) + lastPanAngle;
				cam.targettiltangle = cameraSpeed * (this.stage.mouseY - lastMouseY) + lastTiltAngle;
			}

			cam.hover();
			view.render();
		}

		private function mouseDown(evt:MouseEvent):void {

			move = true;
			lastPanAngle = cam.targetpanangle;
			lastTiltAngle = cam.targettiltangle;
			lastMouseX = stage.mouseX;
			lastMouseY = stage.mouseY;

			cam.hover();
			view.render();
		}

		private function mouseLeave(evt:MouseEvent):void {
			move = false;
		}

	}
}

And here’s the link to download it all: http://harry-northover-code-store.googlecode.com/files/3D%20Particle.zip

Right there you go for tonight!

Harry.

You can download the whole thing here: http://harry-northover-code-store.googlecode.com/files/Away3DBasics.zip

Here is a screene:

And here’s the code:

package {

	import away3d.cameras.HoverCamera3D;
	import away3d.containers.View3D;
	import away3d.primitives.Sphere;

	import flash.events.MouseEvent;
	import flash.display.Sprite;
	import flash.events.Event;

	import caurina.transitions.Tweener;

	public class Away3DBasics extends Sprite {

		public var stageHeightCenter:uint = stage.stageHeight / 2 - 100;
		public var stageWidthCenter:uint = stage.stageWidth / 2 + 100; 

		public var cam:HoverCamera3D = new HoverCamera3D( { zoom:1, focus:200 } );
		public var view:View3D = new View3D( { x:stageWidthCenter, y:stageHeightCenter, camera:cam } );

		public function Away3DBasics() {

			cam.steps = 16;

			// Add the view to the stage.
			addChild(view);

			// Create 20 spheres.
			for (var i:uint = 0; i <= 20; i++)
			{
				var sphere:Sphere = new Sphere();
				sphere.invertFaces();
				sphere.x = Math.random() * 1000;
				sphere.y = Math.random() * 1000;
				sphere.z = Math.random() * 600;
				sphere.rotationX = Math.random() * 360;
				sphere.rotationY = Math.random() * 360;
				view.scene.addChild(sphere);
			}

			// Add Event listeners.
			this.addEventListener(Event.ENTER_FRAME, onRun);

			// Render the scene...
			cam.hover();
			view.render();

		}

		// This is the code for the ENTER_FRAME event.
		private function onRun(evt:Event):void {
			cam.rotationX = Math.random() * 360;
			cam.rotationY = Math.random() * 360;
			cam.rotationZ = Math.random() * 360;
			cam.pan(Math.random() * 360);
			Tweener.addTween(cam, { zoom: (stage.mouseY / stage.stageHeight) * 4 + 0.5, time:0.1, transition:"easeInOutExpo" } );
			cam.hover();
			view.render();
		}
	}
}

There you go! I will be doing a lot more stuff with Away3D so keep an eye out!

Harry.

To download the class: http://harry-northover-code-store.googlecode.com/files/Particle.zip

To download the demo: http://harry-northover-code-store.googlecode.com/files/Demo.zip

Here is a screene:

Here’s the code:

package {

	import com.harrynorthover.particle.Particle;
	import flash.events.Event;
	import flash.display.Sprite;

	public class ParticleTest extends Sprite {

		private var emmiterX:Number = stage.stageWidth / 2;
		private var emmiterY:Number = stage.stageHeight / 2;

		public function ParticleTest() {
			stage.addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
		}

		private function onLoop(evt:Event) {
			var p:Particle = new Particle(emmiterX, emmiterY, Math.random() * 11 - 6, Math.random() * -20, 1, Math.random() * 0xFFFFFF, 50, true);
			addChild(p);
		}

	}
}

To get this working, all you need to do is create a MovieClip with a linkage ID of ‘Ball’, and you should be ready to go.

So there you are! If anyone would like me to explain the code, feel free to contact me.

Harry.

I have decided to build my portfolio using this, so this will help me get used to using the engine as well as hopefully creating a sweet site!

During my efforts to find out more info and tutorials about this engine, I have found these links:

• http://www.flashmagazine.com/tutorials/index/ – This site has a whole host of tutorials and info on Away3D and Flash 3D in general.
• http://blog.paranoidferret.com/index.php/2008/03/28/getting-started-with-adobe-flex-and-away3d/ - Getting Started with Away3D and Adobe Flex.
• http://www.thetechlabs.com/3d/setting-up-away3d-with-flex/ – Setting up and using Away3D in Flex.
• http://flashenabledblog.com/2008/09/02/frameworks-away3d-away3d-web-roundup-tutorials-and-examples/ – This is a haven for info on Away3D tutorials, samples and general info!
• http://www.lemlinh.com/flash-tutorial-away3d-pathextrude-cords-ribbons – Away3D Path Extrude – Cords And Ribbons.
• http://blog.arnomanders.nl/index.php/archives/imageviewer3d-final-release/ - This is a very cool application demonstrating the powers of Away3D.
• http://www.closier.nl/playground/greenplanet.html – This is a very cool example, indeed! Green Planet!!
• http://flash-3d.org/en/Create-the-Earth-and-heavens-in-less-than-an-hour-with-Away3D – This is a great tutorial for Away3D. This could be used for some sort of language selection of area selection or even a contact form. The potential is infinite…
• http://www.ultrashock.com/forums/third-party-tools/away3d-93241.html – This sheds on Away3D and how it differs from Papervision3D.
• http://www.sharingb.com/programming/away3d/focus-on-away3d – Some very cool examples of Away3D in action.
• http://drawlogic.com/2008/04/11/3ds-parser-added-to-papervision-from-away3d/ – 3DS Parser Added to Papervision3D from Away3D.
• http://docs.google.com/View?docid=dczs397v_12ftrscdd9 – Getting started with Away3D.
• http://www.closier.nl/playground/temple.html – This is a very cool example indeed!

So there you go for starters. I hope this helps you guys out!

Harry.