As mentioned on the about page Tweetpond displays tweet content using standard Flash TextFields that are rendered as part of the 3D scene. This is often called billboarding or point sprites.
Our DisplayObject2D implementation is based on the following sources:
Our implementation solves the Z-ordering issues reported when using DisplayObject2D with Papervision3D 2.0.
We recently received a request to share our version with the community so here you go! You can download the ActionScript3 class files below:
This code is released under the MIT licence, same as Papervision3D. To get an idea on how to use this class please see this post by Blitz Agency and source comments.
Please feel free to share your project that makes use of DisplayObject2D below!
12 Comments
A reader recently asked for some examples on how to use the DisplayObject2D class so I’ve attached some example code below to illustrate.
The magic is in having everything on their own individual layers that Papervision3D can the z-order correctly. I also highly recommend installing http://www.monsterdebugger.com/ so you can see what’s happening in your application in real time. Good luck!
var parentLayer:ViewportLayer;
var vpl:ViewportLayer;
// create an empty parent viewport layer and add it to the container
parentLayer = new ViewportLayer(viewport, null);
viewport.containerSprite.addLayer(parentLayer);
// create shape
var shape = new Sphere(material, SIZE);
// create layer and add to scene
shape.useOwnContainer = true;
vpl = parentLayer.getChildLayer(shape, true);
scene.addChild(shape);
// create text box (movieclip)
var box = new Box();
//...set box properties here...
// create do2d that encapsulates the movieclip
var label = new DisplayObject2D(box as DisplayObject, parentLayer, 0, null, SIZE*1.25, 0);
// create layer and add to scene
label.useOwnContainer = true;
vpl = parentLayer.getChildLayer(label, true);
scene.addChild(label);
Hello from Spain,
“A reader recently asked for some examples on how to use the DisplayObject2D class so I’ve attached some example code below to illustrate.”
I started to program in papervision recently not for profesional job. I readed your post.
¿Could you give me an code source example for a movieclip like ‘circle’?
Thank for all,
Hi Fernando, sounds like you’re trying to run the original example from Blitz Agency.
“Circle” is not defined in ActionScript at all, it is a movieclip you can find in the Library of the DisplayObject2DTest.fla project:
You will also notice under the “linkage” column how this movieclip has been exported to ActionScript as class “Circle”. In the Library, right click on the Circle and select Properties to view and change symbol properties.
Hope this helps.
Cheers, Jussi
Hi… I´m trying yor classes and at this moment I can see various displayObject3d and a displayObject2d on the stage. This displayObject2d is a child of one of those displayObject3d. I want both to rotate at the same time but when I rotate the displayObject3d the displayObject2d doesn`t change its rotation.
By the way, Tweetpond is great.
Thank you.
Hi Iker,
I assume you’re trying to rotate the DisplayObject2D around its Z-axis, similar to what changing the standard Flash rotation property would do (i.e. “obj._rotation = angle”)?
I don’t think this will work, as the whole idea behind billboarding is that the DisplayObject2D is always facing the same way on the two-dimensional plane (your screen).
If you’re looking for something that ‘participates’ more fully in the 3D world, including rotations around X, Y and Z axes, perhaps you can look into org.papervision3d.objects.Plane class (with a suitable material such as bitmap).
Hope this helps.
Cheers, Jussi
Your do2d is great to me, and I have encountered an issue that I am unable to make the z-sorting work correctly when my do2ds on the stage with other collada objects.
It seems it always in front of other 3d models:
http://www.busysuzie.com/testing/#/opening
I wonder if my code add the do2d wrongly:
—————————————————————————
var parentLayer:ViewportLayer;
parentLayer = new ViewportLayer(viewport, null);
viewport.containerSprite.addLayer(parentLayer);
//create table models and loaded successfully
.
.
//
tables.useOwnContainer = true;
parentLayer.getChildLayer(tables, true);
scene.addChild(tables);
//create middle column models and loaded successfully
.
.
//
middleColumn.useOwnContainer = true;
parentLayer.getChildLayer(middleColumn, true);
scene.addChild(middleColumn);
//loop for creating paddle and character on a do3d and add do3d to scene
for(var i:int = 0; i<6; i++)
{
personHolderArr[i] = new DisplayObject3D();
//create paddle and loaded successfully
.
.
//
paddleArr[i].useOwnContainer = true;
parentLayer.getChildLayer(paddleArr[i], true);
personHolderArr[i].addChild(paddleArr[i]);
var do2D:DisplayObject2D = new DisplayObject2D(new Character() as DisplayObject, parentLayer, 180);
personHolderArr[i].addChild(do2D);
scene.addChild(personHolderArr[i]);
}
—————————————————————————
I suppose it is due to layering, but I cannot figure out where I code it wrongly.
I would be very appreciated if you can inspire me for any solution. Thanks
Hi Gordon,
this is a bit of a stab in the dark but looking at these lines:
personHolderArr[i].addChild(paddleArr[i]);
personHolderArr[i].addChild(do2D);
I am wondering if you should add the paddles and characters directly to the scene by calling scene.addChild(paddleArr[i]) and scene.addChild(do2D) instead?
Just an idea, let me know how you go.
Cheers, Jussi
Thanks for your rapid respond, the DO2D and paddle is put to a DO3D with purpose, so that I can assign that DO3D always face to the camera instead of assigning them individually.
I just wonder if the issue is related to the:
viewport.containerSprite.addLayer(parentLayer);
And I tried to change the sortMode of viewportlayer to index_sort, z_sort, nothing help /~\
This is the simplified file package, hope you may interest and see if there is any solution:
http://snap-f.net/do2D_z_Issue.zip
Hi Gordon,
I won’t be able to have a detailed look at your code, however I did notice that you’ve commented out the following:
//paddleArr[i].useOwnContainer = true;
//parentLayer.getChildLayer(paddleArr[i], true);
//do2D.useOwnContainer = true;
//parentLayer.getChildLayer(do2D, true);
From memory, correct z-sorting using these classes depends on the fact that all child objects have their own individual layer – hence the explicit ‘true’ for the createNew parameter in the method call.
I’d recommend you try these classes out in a clean Flash project first and make sure DO2D’s behave correctly in terms of z-ordering. Then drop in some DO3D’s and confirm that objects are still sorted properly. Once this works you can then apply same logic to your actual project.
Also make sure you have a debugger on hand to be able to see inside your project at runtime. It’s really helpful to see object properites, how they nest etc.
Cheers, Jussi
I finally figure that, sadly not a solution yet, dae model is always behind the do2d…
I use your sample code and add one more dae model, no matter how I change the z, the dae model is covered by the box and do2d~
Anyway, big thanks to you, Jussi, at least I can put movieclip to the 3d environment in a pretty way. Just keep on digging into collada import procedure to see if there is any hint to solve the issue~ Thank you.
No worries at all Gordon, I’m sure you will find a good solution soon. Cheers, Jussi