Papervision3D drawing demo

2 classes in a row now, I’ve done this same demo live in front of everyone :) Sooooo sensing a trend here, and after someone asked if I’d post it, I’m putting out out here. It’s a very simple demo, but the exercise in class was to demonstrate what you get back with the InteractiveScene3DEvent object. You literally get back x and y properties that represent where your cursor is over the 3D object in your scene.

So, we took those values from an OBJECT_MOVE event that the ISM dispatches and use it to draw circles on the MovieClip used for the material – and there you go, simple as that ;)

[kml_flashembed movie="http://www.rockonflash.com/papervision3d/drawingDemo/DrawingDemo.swf" width="550" height="400"/]

Here’s the code and you can download it here:
[as]
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.FreeCamera3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.core.utils.InteractiveSceneManager;
import flash.filters.DropShadowFilter;
import flash.display.StageAlign;
import flash.display.StageScaleMode;

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

var viewport:Viewport3D = new Viewport3D(0, 0, true, true);
addChild(viewport);

var renderer:BasicRenderEngine = new BasicRenderEngine();

var scene3d:Scene3D = new Scene3D();
var camera:FreeCamera3D = new FreeCamera3D();
camera.focus = 1100;
camera.zoom = 1;

// create material and object
var mat:MovieMaterial = new MovieMaterial(material, false, true);
mat.oneSide = false;
mat.interactive = true;

var sp:Sprite = new Sprite();// add drawing layer
sp.scrollRect = material.getBounds(material); // this keeps you from drawing off the edges and messing up the mapping
sp.filters = [new DropShadowFilter(4, 45, 0x111111)];
material.addChild(sp);

var plane:Plane = new Plane(mat, 500, 500, 4, 4);
plane.moveRight(200);
plane.yaw(60);

plane.addEventListener(InteractiveScene3DEvent.OBJECT_MOVE, handleMouseMove);

function handleMouseMove(e:InteractiveScene3DEvent):void
{
if( !InteractiveSceneManager.MOUSE_IS_DOWN ) return;
var g:Graphics = sp.graphics;
g.beginFill(0×333333);
g.drawCircle(e.x, e.y, 4);
g.endFill();
}

scene3d.addChild(plane);

stage.addEventListener(Event.ENTER_FRAME, handleEnterFrame);

function handleEnterFrame(e:Event):void
{
camera.x = camera.y = camera.z = 0;
camera.yaw(.5);
camera.moveBackward(1500);
// render camera
renderer.renderScene(scene3d, camera, viewport);
}
[/as]

16 Responses to “Papervision3D drawing demo”

  1. Astuces Adobe Flex, Adobe Coldfusion, Papervision 3D | Matsiya Says:

    [...] http://www.rockonflash.com/blog/?p=119 : Démonstration de ce qu’il est possible de faire avec l’objet InteractiveScene3DEvent de Papervision3D. Il est possible de dessiner sur un objet qui tourne sur lui même. [...]

  2. Source | Papervision3D drawing « Flash Enabled Blog Says:

    [...] the demo, and download the source No Comments Leave a Commenttrackback addressThere was an error with your comment, please try again. name (required)email (will not be published)(required)url [...]

  3. Mark Taylor Says:

    Man thats ace I love it. Love it.

  4. titi Says:

    Is it possible to draw with line3D in space ? I tried but couldn’t figure out how to get bound… (see uri for exemple)

  5. The Flash Index » Blog Archive » Drawing in Papervision3D Says:

    [...] There’s a cool new demo ( with source code ) over at rockonflash of how to draw using Papervision3d.  Check it out here. [...]

  6. C Says:

    Quick question, would this sort of thing work with more complicated models like COLLADA or MD2 with UVW mapping (ie unwrapped textures).

    We have some characters we’d like to click on, but want to respond to different body parts.

    Thought the texture might have been an easy way to capture where the character was clicked.

  7. Tahel Says:

    Do you know how i can get the x and y of a plane in the stage and viceversa?

  8. John Grden Says:

    @Tahel: Do you want the middle of the plane or the top/left?

  9. John Grden Says:

    To get x/y of a plane, you could do this:

    plane.screen.x;
    plane.screen.y;

    before you can use that of course, you have to set this on the plane:
    plane.autoCalcScreenCoordinates = true;

  10. Jon Says:

    Silly question, but I’m a bit of an aesthete… the syntax highlighting in the code sample is lovely… what are you using?

  11. Jon Says:

    Second silly question: The Flash-on-tap animation at the top is brilliant. Mouth watering. Just one thing: Is it an animated bitmap movie or an awesome piece of flash coding / fluid simulation? It acts like it’s a hybrid of the two… please shine a light on my ignorance! : )

  12. John Grden Says:

    @Jon: Good question! it’s an FLV video of real real beer ;)

  13. Jon Says:

    …also, if you click the link it takes you a really neat Flash designed web site where the beer animation goes on forever without looping… I called the developer and they used an FLV blended with Flash scripted bubbles. Very neat!

    PS… I dread being a bit selfish with my interrogations! But I’ve tracked this site down again to find out what does the syntax highlighting on your code examples. I’m looking for an Actionscript editor / IDE but I can’t find one that does it That well… is it a software I can download?

    PS… soon I think it will be possible to code Flash particle systems to do the beer with a program! : )

  14. Jon Says:

    You just blimming well don’t want to answer that question do you?


Leave a Reply