mapping planes onto primitives - actionscript-3

I've looped through the vertices and mapped a plane to each one. I'm having problems orientating the planes correctly. I can get it working with a sphere but when i make any alterations to the the primitive - positions are correct but they don't face/tilt the right way.
EDIT: Note - the alternation to the sphere was done before the sphere was created. I have updated the Sphere class to create an elongated sphere.
The code I'm using to place the planes are as follows:
pivotDO3D = new DisplayObject3D();
scene.addChild(pivotDO3D);
var bigSphere:Sphere = new Sphere(null, 500, 20, 20);
for each (var v:Vertex3D in bigSphere.geometry.vertices)
{
var __seatmaterial:ColorMaterial = new ColorMaterial(0x000000);
__seatmaterial.doubleSided = true;
var p:Plane = new Plane(__seatmaterial, 20, 20, 2, 2);
pivotDO3D.addChild(p);
p.position = v.toNumber3D();
p.lookAt(bigSphere);
}

The following demo shows how to minimize the problem. I changed the multiplication factor of 0.6 to 2.0 as well as the sphere size in order to exaggerate the effect so you can see it easily. Make sure to change 0.6 to 2.0 in your Sphere.as as well.
The key is in varying the z location of the target point with the z location of the point on the sphere.
To compare, run it as-is to see the "fixed" version, and change the lookAt target from pivotDO3D2 to bigSphere to see the old version.
package
{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.*;
import org.papervision3d.core.geom.renderables.*;
import org.papervision3d.materials.*;
import org.papervision3d.objects.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.render.*;
import org.papervision3d.scenes.*;
import org.papervision3d.view.*;
[SWF(width='400', height='400', backgroundColor='0x000000', frameRate='30')]
public class PlaneOrientationDemo extends Sprite
{
private var scene:Scene3D;
private var camera:Camera3D;
private var renderer:BasicRenderEngine;
private var viewport:Viewport3D;
private var pivotDO3D:DisplayObject3D;
public function PlaneOrientationDemo()
{
viewport = new Viewport3D(0, 0, true, true);
addChild( viewport );
renderer = new BasicRenderEngine();
scene = new Scene3D( );
camera = new Camera3D();
camera.z = -700;
camera.zoom = 50;
pivotDO3D = new DisplayObject3D();
scene.addChild(pivotDO3D);
var pivotDO3D2:DisplayObject3D = new DisplayObject3D();
var bigSphere:Sphere = new Sphere(null, 150, 20, 20);
for each (var v:Vertex3D in bigSphere.geometry.vertices)
{
var __seatmaterial:ColorMaterial = new ColorMaterial(0x00FF00);
__seatmaterial.doubleSided = true;
var p:Plane = new Plane(__seatmaterial, 20, 20, 2, 2);
pivotDO3D.addChild(p);
p.position = v.toNumber3D();
// This number should match the fx multiplication factor in Sphere.as.
var xFactor:Number = 2.0;
pivotDO3D2.z = v.z / (Math.PI / xFactor);
p.lookAt(pivotDO3D2);
}
stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event: Event): void
{
pivotDO3D.rotationX += 1;
pivotDO3D.rotationY += 1;
renderer.renderScene(scene, camera, viewport);
}
}
}

Related

AS3 Display list and box2d

I have a function called "brick" inside a subclass called createBrick that extends from the sprite class, also I have a movie clip created in the library exported for runtime sharing called "Brick". For some odd reason when I run the code the brick is not showing up on the stage even though it does get created when I debug the code.
here is the function
public class createBrick extends Sprite {
public function createBrick(_main:Main) {
main = _main;
var go:Brick = new Brick();
addChild(go);
trace(go.x);
brick(475, 235, 30, 30);
}
private function brick(pX: int, pY: int, w: Number, h: Number): void {
var bric:Brick = new Brick();
addChild(bric);
bric.x = pX;
bric.y = pY;
bric.width = w;
bric.height = h;
var polygonShape: b2PolygonShape = new b2PolygonShape();
var polygonFixture: b2FixtureDef = new b2FixtureDef();
polygonShape.SetAsBox(w / 2 / worldScale, h / 2 / worldScale);
polygonFixture.shape = polygonShape;
polygonFixture.density = .2;
polygonFixture.restitution = 0.9;
polygonFixture.friction = 0.9;
var brickbodyDef: b2BodyDef = new b2BodyDef();
brickbodyDef.type=b2Body.b2_dynamicBody;
brickbodyDef.userData = bric;
brickbodyDef.position.Set(bric.x / worldScale, bric.y / worldScale);
var theBrick: b2Body = world.CreateBody(brickbodyDef);
theBrick.CreateFixture(polygonFixture);
}
}
The same function works perfectly if I have all the code with in the main document class and I do see a brick on the stage. Any clues Am I not referencing it properly?
I figured it out, just had to pass the stage reference from main document class for the sprite to show up.

Creating 10 circles in ActionScript 3

Iam trying to create a simple method in AS3 that adds 10 circles, each 30px in diameter in a column down the left-hand-side of the stage, so the first appears in the top-left corner and the last in the bottom-right. I would appreciate any help here. Thanks.
My current code follows: - It currently just returns 10 circles with no positioning.
package
{
import flash.display.*;
import flash.utils.Timer;
import flash.events.TimerEvent;
public class Circles extends MovieClip
{
private var timer:Timer = new Timer(100, 10);
public function Circles()
{
timer.addEventListener(TimerEvent.TIMER, createCircles);
timer.start();
}
private function createCircles(e:TimerEvent):void
{
var bcircle:MovieClip = new MovieClip();
var xpos:int = 0;
var ypos:int = 0;
bcircle.graphics.beginFill(0x0033CC);
bcircle.graphics.drawCircle(xpos,ypos,15);
bcircle.graphics.endFill();
bcircle.x = Math.random() * stage.stageWidth;
bcircle.y = Math.random() * stage.stageHeight;
addChild(bcircle);
}
}
}
bcircle.x = Math.random() * stage.stageWidth;
bcircle.y = Math.random() * stage.stageHeight;
These are the lines you want to be paying attention to as these lines control where each circle is placed when added to the stage.
Circle diameter = 30px, stage height (for example) = 400px.
30 goes into 400 13.33 times (400/30) so each circle needs to be spaced 13.3px further down than the last.
You can store a variable that counts how many circles are already on the stage and use it to multiply 13.3 to find the appropriate y value:
var i:int = 0;
private function createCircles(e:TimerEvent):void
{
var bcircle:MovieClip = new MovieClip();
var xpos:int = 0;
var ypos:int = 0;
bcircle.graphics.beginFill(0x0033CC);
bcircle.graphics.drawCircle(xpos,ypos,15);
bcircle.graphics.endFill();
bcircle.x = 0;
bcircle.y = (30 + 13.3) * i; // First circle placed at 0, Second placed at 43.3...
i++; // Increment i each time function is called
addChild(bcircle);
}
You can apply a similar method to then increment the x position of each circle once i reaches 10 (10 circles have been placed), use a trigger to detect this: if(i == 10)
This might help ...
package {
import flash.display.Graphics;
import flash.display.Sprite;
import flash.events.TimerEvent;
import flash.utils.Timer;
public class Circles extends Sprite {
private const _circles:Array = []; // reusable container
private var _timer:Timer;
public function Circles() {
_timer = new Timer(1000, 10);
_timer.addEventListener(TimerEvent.TIMER, timer_timerHandler);
_timer.addEventListener(TimerEvent.TIMER_COMPLETE, timer_timerCompleteHandler);
_timer.start();
}
private function createCircle():Sprite {
const sprite:Sprite = new Sprite();
drawCircleInGraphics(sprite.graphics);
addChild(sprite);
return sprite;
}
private function drawCircleInGraphics(graphics:Graphics, color:uint = 0x0033CC, radius:uint = 15):void {
graphics.beginFill(color);
graphics.drawCircle(0, 0, radius);
graphics.endFill();
}
private function createNewCircleAndPositionIt():void {
_circles[_circles.length] = createCircle();
if (_circles.length > 1) {
const last:Sprite = _circles[_circles.length - 1],
predecessor:Sprite = _circles[_circles.length - 2];
last.x = predecessor.x + 30;
last.y = predecessor.y + 30;
}
}
private function timer_timerHandler(event:TimerEvent):void {
createNewCircleAndPositionIt();
}
private function timer_timerCompleteHandler(event:TimerEvent):void {
_timer.removeEventListener(TimerEvent.TIMER, timer_timerHandler);
_timer.removeEventListener(TimerEvent.TIMER_COMPLETE, timer_timerCompleteHandler);
_timer = null;
}
}
}

Do you know if i can integrate with as3isolib some physic engine like nape or box2d?

i just searching for any resource that explain or teach how integrate if it possible as3isolib with some physics engine like, nape or box2d. It is possible?
Sure you can do that.
For example Box2D Body has member userData, which type is *, so you can assign any data there.
As far as Box2D and nape are 2D physics engines, you can make 2d phys modifications on x and y axis.
Here is an example:
package
{
import as3isolib.display.primitive.IsoBox;
import as3isolib.display.scene.IsoScene;
import Box2D.Dynamics.Contacts.*;
import Box2D.Dynamics.*;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;
import Box2D.Dynamics.Joints.*;
import flash.events.Event;
import flash.display.Sprite;
public class Main extends Sprite
{
private var scene:IsoScene;
private var world:b2World;
private var gravity:b2Vec2;
private var body:b2Body;
private const worldScale:int = 30;
private const doSleep:Boolean = true;
private static const m_iterations:int = 10;
private static const m_timeStep:Number = 1.0/30.0;
public function Main ()
{
scene = new IsoScene();
scene.hostContainer = this;
var bodyDef:b2BodyDef;
var fixtureDef:b2FixtureDef = new b2FixtureDef();
gravity = new b2Vec2(0.0, 4.0);
world = new b2World(gravity, doSleep);
bodyDef = new b2BodyDef();
bodyDef.type=b2Body.b2_dynamicBody;
bodyDef.allowSleep = false;
bodyDef.linearDamping = 1;
bodyDef.angularDamping = 1;
bodyDef.position.x = 200/worldScale; //position
bodyDef.position.y = 100/worldScale; //position
bodyDef.userData = new IsoBox();
bodyDef.userData.setSize(25, 25, 25);
bodyDef.fixedRotation = true;
fixtureDef.restitution = 0.5;
fixtureDef.shape = new b2CircleShape(0.3);
fixtureDef.density = 1;
fixtureDef.friction = 5;
fixtureDef.restitution = 0.5;
scene.addChild(bodyDef.userData);
body = world.CreateBody(bodyDef);
body.CreateFixture(fixtureDef);
addEventListener(Event.ENTER_FRAME, Update);
}
private function Update(e:Event):void
{
world.Step(m_timeStep, m_iterations, m_iterations);
world.ClearForces();
body.GetUserData().moveTo(body.GetPosition().x * worldScale, body.GetPosition().y * worldScale, 0);
scene.render();
}
}
}

PaperVision3D and Flash CS4

I need to develop a cube that contain 10 little cubes and manipulate everyone like an object..Somebody have any idea or some tutorial for do this on PaperVision3d and Flash CS4..Thanks Folks!!
I think what you actually want is Papervision3d as I know of nothing called "PaperViewer". If that is the case, please update your question.
This should give you an idea of how to start. It creates 10 cubes and stores them in an array. You can access them using boxes[index] to alter their scale, postion and rotation.
package
{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.view.BasicView;
public class Boxes3d extends Sprite
{
private static const NUM_BOXES:int = 10;
private var world:BasicView;
private var boxes:Array;
public function Boxes3d()
{
addEventListener(Event.ADDED_TO_STAGE, addedToStage);
}
private function addedToStage(event:Event):void
{
// create the world and add it to the stage
world = new BasicView();
addChild(world);
// create a set of boxes
boxes = [];
var box:Cube;
var materials:MaterialsList;
for(var boxIndex:int = 0; boxIndex < NUM_BOXES; boxIndex++)
{
// create a material to cover the cube
materials = new MaterialsList({
all: new ColorMaterial(Math.random()*0xFFFFFF) });
// make a cube
box = new Cube(materials, 100, 100, 100);
// spread it out in space
box.x = Math.random()*500 - 250;
box.y = Math.random()*500 - 250;
box.z = Math.random()*500 - 250;
// add it to the scene
world.scene.addChild(box);
}
// get the world to render each frame
world.startRendering();
addEventListener(Event.ENTER_FRAME, positionCamera);
}
private function positionCamera(event:Event):void
{
var camera:Camera3D = world.cameraAsCamera3D;
camera.x = -(stage.width/2 - mouseX) * 2;
camera.y = (stage.height/2 - mouseY) * 2;
}
}
}

Papervision3D; rotate child objects within camera view

It's my first time with Papervision3D and I have created a slide show of images that is skewed on the y-axis. Smallest photos on the left, and they increase in size going to the right. So they zoom from left to right, smallest to biggest.
I have a tooltip that pops up when you hovers over the photo, but the tooltip also gets skewed proportionate to the camera view (slanted). I want the tooltip's angle to be independent of the entire camera view.
Any idea how to rotate objects independent of the parent's camera angle?
Thanks!
my_obj = new DisplayObject3D();
my_plane = my_obj.addChild(new Plane(bla bla));
my_obj.lookAt(camera);
The 'lookAt' bit is what you need.
Why not draw the tooltips in 2d? You can get the on-screen position of the images and then just draw a regular Sprite like so:
package
{
import flash.display.Sprite;
import flash.text.TextField;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.typography.Text3D;
import org.papervision3d.view.BasicView;
public class PVTest extends Sprite
{
private var world:BasicView;
private var text:Text3D;
private var text2d:TextField;
public function PVTest()
{
world = new BasicView(stage.width, stage.height, true, true);
var colorMat:ColorMaterial = new ColorMaterial();
colorMat.interactive = true;
var planeContainer:DisplayObject3D = new DisplayObject3D();
var plane:Plane;
for(var i:int = 0; i < 11; i++)
{
plane= new Plane(
colorMat,
100, 100,
10);
plane.x = (i * 105) - 500;
plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, handleMouseOver);
plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, handleMouseOut);
planeContainer.addChild(plane);
}
planeContainer.rotationY = 10;
world.scene.addChild(planeContainer);
world.camera.z = -500;
addChild(world);
world.startRendering();
}
private function handleMouseOver(event:InteractiveScene3DEvent):void
{
var plane:Plane = Plane(event.displayObject3D);
plane.calculateScreenCoords(world.camera);
const OFFSET_X:int = -20;
const OFFSET_Y:int = 30;
text2d = new TextField();
text2d.text = "toolTip";
text2d.x = plane.screen.x + (stage.width/2) + OFFSET_X;
text2d.y = plane.screen.y + (stage.height/2) + OFFSET_Y;
addChild(text2d);
}
private function handleMouseOut(event:InteractiveScene3DEvent):void
{
removeChild(text2d);
}
}
}
Even for this example you'd have to offset the y position of the tooltip based on the objects scale but it may be easier than working out the rotations and is the best way to get a consistent looking result.