The book starts of with a fairly in-depth introduction into how to get started with Away3D by teaching you how to check out the library using SVN, get it set up in Flash Builder or Flash CS4 and even covers using FlashDevelop. The book then moves on to explain the basic components of the Away3D engine such as Camera3D, Scene3D & View3D. It even provides you with a basic template class to get you started ASAP.

Once you’ve mastered this step, the next thing covered is basic 3D concepts like 3D positioning, vertices, faces, coordinates and primitive shapes. A basic explanation of all the primitives available in Away3D is given and what properties can be applied to them.

With this mastered the next chapter covers moving 3D objects in 3D space. Coordinates systems are covered including explanations of world, parent and local space (each with code examples) and other functions such as the moveForward/Backward/etc() functions are covered. Then tweening with library’s such as TweenLite is covered. When you have finished this chapter you’ll be completely familiar with all the animation methods the Away3D library offers you to manipulate and animate objects in you scene.

The next topic covered is z-sorting and has an entire chapter dedicated to it. This covers the default method of z-sorting that Away3D uses, an in-depth explanation of how your 3D scene is sorted, how to edit and adjust the sorting of 3D objects and what additional renderers are offered by Away3D.

After this the extensive subject of Materials is covered. All the different types of materials such as WireframeMaterial, AnimatedBitmapMaterial and many others are covered, as well as the Pixel Bender based ones such as the Dot3BitmapMaterialF10. Different kinds of mapping such as texture and environment are covered and also a brief explanation and code sample of how to apply each different material.  A useful table of all the supported colours and what materials support what lighting techniques is provided.

Models & Animation is the next topic covered with an introduction to loading 3D models in to your scene, what different file types are supported and a brief explanation on how to export models in certain 3D packages. An explanation of what types of cameras are available, their differences and effects as well as mouse interactivity.

After this mouse interactivity, 3D text, special effects and performance issues are covered. Each chapter following the same as the ones already mentioned with a good selection of code samples provided and an in-depth explanation. Overall this book gives you everything you need to get started with the Away3D engine, and the good thing is it can be used by people who are already familiar with Away3D but what to learn more. A good understanding of Actionscript 3 is obviously required, but I highly recommend this book the anyone looking to get a good understanding of Away3D.

This book covers everything you need to get started with the 3D engine, including:

• Draw primitive shapes such as cubes, cones, spheres, and planes without having to manually construct them from their basic elements
• Add eye-catching special effects to your Away3D application
• Warp, curve, modify, and bend 3D text to your will
• Focus the Camera and view 3D objects from all angles
• Improve mouse interactivity in your 3D application
• Integrate third-party libraries such as TweenLite and Stardust with Away3D to animate 3D objects and create particle effects
• Use sprites and sprite classes
• Utilize the power of Pixel Bender for image processing
• Export 3D models from 3D modeling applications such as 3ds Max, Blender, MilkShape, and Sketch-Up
• Get practical tips on achieving maximum performance in your 3D applications

The book is mainly aimed at beginners with a good first chapter on 3D basics and terminology.

I will be posting a more in depth review later on, but if anyone else has this book let me know what you think!

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!

Go on over and download it free of charge here. ]]> http://www.harrynorthover.com/blog/2009/11/04/unity3d-indy-untiy-free-for-all/feed/ 0 http://www.harrynorthover.com/blog/2009/09/05/inspirational-work-no-keyframes/ http://www.harrynorthover.com/blog/2009/09/05/inspirational-work-no-keyframes/#comments Sat, 05 Sep 2009 18:44:52 +0000 Harry http://www.harrynorthover.com/blog/?p=804 Continue reading →]]> This piece found its way to me through Twitter, and it’s simple awesome! The piece is called “No Keyframes”, and was created by AixSponza. The software used was Cinema4D R11.5 and MoGraph 2 but apparently there is more infomation on the piece coming soon.

Just click on the picture to view the piece.

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 video was made by Tim Smit, who is a dutch student. For the video above, he did most of the work by himself. This mean filming the footage in his local village, adding in the special effects using After Effects and 3Ds Max and all with a budget of $150! The video is a test movie of his film ‘What’s In The Box’ and the official site can be found here.

I’ve heard that several Hollywood studios have been in contact with him and some are even discussing making his movie!

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.

Vector – This is an object that properties consist of a direction, length, sense that is aligned with the direction. To understand sense, take the example of a water pipe. The pipe is going along in one direction but the water (or sense) could be going a completely different way. http://en.wikipedia.org/wiki/Image:Vector_by_Zureks.svg

Vector Space – This is a collection of objects that may be scaled and added. The objects are called vectors.

Vector3D – This is the same as a vector, but enables the property of depth to the object. Now, when you are handling an object of type Vector3D, you can change its:

1.       X axis

2.       Y axis

3.       Z axis

Whereas before, Z axis was not present in Vector.

Convex Hull – This is a set of points in a real vector space.

Convex Set – This is an object where every X and Y position can be joined up by a line without that line leaving the area of the object.

A good example of a Convex Set is a cube.

Tuple – This is a sequence, also known as an ordered list, of values. Names of different capacity tuples:

Coordinate Vector – In linear algebra, a coordinate vector is the representation of a vector through the form of an ordered list of numbers.

Linear Algebra – This is the branch of mathematics concerned with the study of vectors, vector spaces (also called linear spaces), linear maps (also called linear transformations), and systems of linear equations.  

Vertex – This refers to a special kind of point. There are many types but here are some related to Mathematics:

Angle:

The vertex of an angle is where to rays begin or meet, or where two line segments join or meet, where two lines cross.

Polytope:

A vertex is a corner point of a polygon, polyhedron or other higher dimensional polytope, formed by the intersection of edges, faces, facets.

Plane tiling:

A vertex of a plane tiling or tessellation is a point where three or more tiles meet.

Matrix – When referred to within Flash, it represents how to map points from one coordinate space to another. Flash 8 and CS3 standard Matrix included changing X and Y, rotation, scaling, and skewing.

http://livedocs.adobe.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00002389.html

Matrix3D – This is the same as a matrix but with the z axis added.

Complex Number – This is where real numbers are added/subtracted (etc…) but with an imaginary number (i), whose square root equals -1, is added onto one or many of them.

Quaternion – Quaternion is an extension of a complex number. Instead of just one complex number (i), you have three complex numbers – i, j, and k. http://www.gamedev.net/reference/articles/article1095.asp

Frustum – This is the part of a solid between two parallel planes cutting the solid.

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.

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’s the link: http://www.closier.nl/playground/railaway_express.html. This is a new demo/game to show of Away3D 2.2 new features!!

Enjoy, and good night.

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.

Once you have views it, you may be thinking, where is the 3D? Well, what I am planning to have is a 3D World inside the gray box. This means that you will be able to fly round and explore this 3d world, and along the way be able to view information about me and my projects. I am having a bit of trouble with this at the moment (see more here).

Other Designs:

Other designs I have come up with, but haven’t been used will be posted soon. This is because they may inspire you to do something with them? Here is the second most favorite design I came up with:

An Early Design

So I hope you like it, and as usual all comments are welcome!

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.

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.

I have just had an e-mail telling me that XSI 7 is out. Here are some of the new features:

1. Well, the main one is the launch of ICE. This enables you to customize XSI and create new tools. You are probably think that you will need to write code, but no code is needed to use ICE. It is completly visual!
2. There are also many new user interface and workflow enhancement.
   • Zooming with the mouse wheel
   • Automatic Scaling on Sliders, to name a few…
3. GIGACORE II ARCHITECTURE
   • With the development of ICE for XSI 7, the core architecture of XSI went through a major revision. The new core, GigaCore II, has been engineered to provide stable and fast performance for ICE. It is fully multi-threaded and 64-bit, allowing users to scale the performance of XSI efficiently by adding more cores to a system.

Those are just the major ones, if you would like to see a complete list, visit here: http://www.softimage.com/products/xsi/new_features/default.aspx

XSI is defnitly work checking out! Another thing worth checking out is Christoph Schinko’s video on XSI 7.

Harry.