Exey Panteleev

Home · home · Papervision3d 2.0 Google Maps Drive

New Articles:

New comments:

Social

My Twitter
My Favorite Conference:

Papervision3d 2.0 Google Maps Drive

This example based on SpringCamera3D and Driving a Car. Press TAB to switch map type, ??� and + for ZoomOut/ZoomIn

Google maps added under the layer with papervision3d and rotating by Flash 10 3D API (but it's very slow), it's impossible to use maps as material. Please vote for issue to remove security sandbox violation on BitmapData.draw()

Key differences with pv3d.org example in enterFrameHandler()

[Embed(source="../assets/Focus.dae", mimeType = "application/octet-stream")] private var carAsset:Class;
[Embed(source="../assets/wheel.jpg")] private var wheelBitmapAsset:Class;
[Embed(source = "../assets/body.jpg")] private var bodyBitmapAsset:Class;
private var car:DAE;
private var focusMaterials:MaterialsList;

private var viewport:Viewport3D;
private var scene:Scene3D;
private var camera:SpringCamera3D;
private var renderer:BasicRenderEngine;

private var topSpeed:Number = 0;
private var topSteer:Number = 0;
private var speed:Number = 0;
private var steer:Number = 0;

private var keyRight:Boolean = false;
private var keyLeft:Boolean = false;
private var keyForward:Boolean = false;
private var keyReverse:Boolean = false;

private var gmaps:Map;

//for maps 3d transformations
private var mapContainer:Sprite;
private var mapRotationContainer:Sprite;
private var prevDistX:Number = 0;
private var prevDistZ:Number = 0;

private var startPlane:Plane;

[SWF(width=700, height=500, backgroundColor=0x343434, frameRate=25)]
public function Main() {
	initMap();
	init3D();
}

private function initMap():void {
	gmaps = new Map();
	//gmaps.key = "" 
	gmaps.setSize( new Point( 512, 512 ) ); 
	gmaps.addEventListener( MapEvent.MAP_READY, mapReadyHandler ); 
	gmaps.cacheAsBitmap = true
	mapContainer = new Sprite()
	addChild(mapContainer)
	mapContainer.addChild( gmaps );
	mapContainer.rotationX = -50;
	mapContainer.cacheAsBitmap = true
	
	mapRotationContainer = new Sprite()
	mapRotationContainer.graphics.drawRect( -512, -512, 1024, 1024)
	gmaps.scaleX = gmaps.scaleY = 2
	gmaps.x = -512
	gmaps.y = -512
	mapRotationContainer.addChild(gmaps)
	mapRotationContainer.x = 350
	mapRotationContainer.y = 410

	//uncomment for displaying the center of map rotation 
	//var center:Sprite = new Sprite()
	//center.graphics.beginFill(0xff0000)
	//center.graphics.drawRect( -10, -10, 20, 20)
	//mapRotationContainer.addChild(center)
	
	mapContainer.addChild(mapRotationContainer)
}

private function mapReadyHandler(e:Event):void {
	var type:IMapType = MapType.SATELLITE_MAP_TYPE;
	var latlng:LatLng = new LatLng( 48.873659 , 2.295764 );
	gmaps.setCenter( latlng, 17, type );
	
	this.addEventListener( Event.ENTER_FRAME, enterFrameHandler );
	stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown)
	stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp)
}

private function init3D():void {
	viewport = new Viewport3D(700, 500);
	scene = new Scene3D();
	this.addChild(viewport);
	
	startPlane = new Plane(new WireframeMaterial(0x77ee77), 10, 10);
	startPlane.rotationX = 90
	scene.addChild(startPlane);
	
	camera = new SpringCamera3D(50);
	camera.mass = 10;
	camera.damping = 10;
	camera.stiffness = 2;
	camera.lookOffset = new Number3D(0, 0, 10);
	camera.positionOffset = new Number3D(0, 25, -40);
	camera.near = -10000;
	
	renderer = new BasicRenderEngine();
	
	addChild(new Stats())
	
	//Setup materials for the object
	var wheelBitmap:Bitmap = new wheelBitmapAsset() as Bitmap;
	var bodyBitmap:Bitmap = new bodyBitmapAsset() as Bitmap;
	
	var bodyMaterial:BitmapMaterial = new BitmapMaterial(bodyBitmap.bitmapData);
	bodyMaterial.smooth = true;
	var wheelMaterial:BitmapMaterial = new BitmapMaterial(wheelBitmap.bitmapData);
	wheelMaterial.smooth = true;
				
	focusMaterials = new MaterialsList();
	focusMaterials.addMaterial(bodyMaterial, "materialBody");
	focusMaterials.addMaterial(wheelMaterial, "materialWheel");
	
	// Load Collada
	var byteArray:ByteArray = new carAsset() as ByteArray;
	car = new DAE(true);
	car.load(byteArray, focusMaterials);
	car.scale = 6;
	car.useClipping = false;
	
	camera.target = car;

	scene.addChild(car);
}

/// HANDLERS

private function enterFrameHandler(e:Event):void {
	//pan google maps
	var dx:Number = car.x - startPlane.x
	var dz:Number = car.z - startPlane.z
	gmaps.panBy( new Point(-(prevDistX - dx), (prevDistZ-dz)));
	prevDistX = dx 
	prevDistZ = dz
	//rotate google maps
	if(car.rotationX == 0) mapRotationContainer.rotationZ = 360-(car.rotationY)
	else if (car.rotationX == 180) mapRotationContainer.rotationZ = -(180-car.rotationY)

	if( car ) {
		// Calculate current steer and speed
		driveCar();
		// Update car model
		updateCar();
	}
	
	renderer.renderScene( scene, camera, viewport );
}


private function updateCar():void {
	// Steer front wheels
	var steerFR :DisplayObject3D = car.getChildByName( "Steer_FR", true );
	var steerFL :DisplayObject3D = car.getChildByName( "Steer_FL", true );
	
	steerFR.rotationY = -steer;
	steerFL.rotationY = -steer;

	// Rotate wheels
	var wheelFR :DisplayObject3D = steerFR.getChildByName( "Wheel_FR", true );
	var wheelFL :DisplayObject3D = steerFL.getChildByName( "Wheel_FL", true );
	var wheelRR :DisplayObject3D = car.getChildByName( "Wheel_RR", true );
	var wheelRL :DisplayObject3D = car.getChildByName( "Wheel_RL", true );

	var roll :Number = speed * 2;
	wheelFR.roll(  -roll );
	wheelRR.roll(  -roll );
	wheelFL.roll( roll );
	wheelRL.roll( roll );

	// Steer car
	car.yaw( speed * steer / 500 );

	// Move car
	car.moveForward( speed );
}

private function driveCar():void {
	// Speed
	if( keyForward )
	{
		topSpeed = 9;
	}
	else if( keyReverse )
	{
		topSpeed = -3;
	}
	else
	{
		topSpeed = 0;
	}

	speed -= ( speed - topSpeed ) / 10;

	// Steer
	if( keyRight )
	{
		if( topSteer < 45 )
		{
			topSteer += 1.5;
		}
	}
	else if( keyLeft )
	{
		if( topSteer > -45 )
		{
			topSteer -= 1.5;
		}
	}
	else
	{
		topSteer -= topSteer / 24;
	}

	steer -= ( steer - topSteer ) / 2;
}

private function onKeyDown( event :KeyboardEvent ):void {
	switch( event.keyCode )
	{
		case "W".charCodeAt():
		case Keyboard.UP:
			keyForward = true;
			keyReverse = false;
			break;

		case "S".charCodeAt():
		case Keyboard.DOWN:
			keyReverse = true;
			keyForward = false;
			break;

		case "A".charCodeAt():
		case Keyboard.LEFT:
			keyLeft = true;
			keyRight = false;
			break;

		case "D".charCodeAt():
		case Keyboard.RIGHT:
			keyRight = true;
			keyLeft = false;
			break;
	}
}

private function onKeyUp( event :KeyboardEvent ):void {
	switch( event.keyCode )
	{
		case "W".charCodeAt():
		case Keyboard.UP:
			keyForward = false;
			break;

		case "S".charCodeAt():
		case Keyboard.DOWN:
			keyReverse = false;
			break;

		case "A".charCodeAt():
		case Keyboard.LEFT:
			keyLeft = false;
			break;

		case "D".charCodeAt():
		case Keyboard.RIGHT:
			keyRight = false;
			break;
		case Keyboard.TAB:
			if ( gmaps.getCurrentMapType() == MapType.SATELLITE_MAP_TYPE ) gmaps.setMapType( MapType.NORMAL_MAP_TYPE );
			else if ( gmaps.getCurrentMapType() == MapType.NORMAL_MAP_TYPE ) gmaps.setMapType( MapType.HYBRID_MAP_TYPE );
			else if ( gmaps.getCurrentMapType() == MapType.HYBRID_MAP_TYPE ) gmaps.setMapType( MapType.PHYSICAL_MAP_TYPE );
			else if ( gmaps.getCurrentMapType() == MapType.PHYSICAL_MAP_TYPE ) gmaps.setMapType( MapType.SATELLITE_MAP_TYPE );
			break;
		case 187: // +
			gmaps.zoomIn();
			break;
		case 189: // -
			gmaps.zoomOut();
			break;	
	}
}

16.02.2009. 00:00

Comments

makc 16.02.2009. 16:08

Impresive, but very hard to stay on track, the real car would crash in seconds like that.

eric 29.05.2009. 23:21

hi exey- very cool, and well done. I battled getting google maps into papervision several times. the closest i have been is to add it to a container as you have, then add it to the stage, then add it to a MovieMaterial, and then remove from the stage. Seems to work, not super efficient, but i could not get the map to render without that step of actually putting the map on the stage fist. I see you are using cs4 to do it, but wondered if you had any luck without FlashPlayer10?

Exey 01.06.2009. 16:29

Hi, eric, check out this version http://www.exey.ru/blog/gmapsDrive/Gmaps-Pv3D-MovieMaterial.zip
it's uses MovieMaterial for map, but car here made with jiglib JCar

Write a comment

* = required field