Just fun with dragging 3D Object

Posted on January 18, 2009
Filed Under Actionscript 3.0, experiments | 6 Comments

With many thanx to Andy Zupko. Next step adding more objects to it and apply some physics (JigLibFlash) to it.

[UPDATE] Had to remove ground texture, file became way to big.

  1. /**
  2.  * with many thanx to: Andy Zupko
  3.  */
  4. package
  5. {
  6.  // FLASH
  7.  import flash.filters.BlurFilter;
  8.  import flash.display.Sprite;
  9.  import flash.ui.Mouse;
  10.  import flash.display.Bitmap;
  11.  import flash.events.Event;
  12.  
  13.  // PAPERVISION
  14.  import org.papervision3d.materials.MovieMaterial;
  15.  import org.papervision3d.core.proto.LightObject3D;
  16.  import org.papervision3d.materials.BitmapMaterial;
  17.  import org.papervision3d.materials.special.CompositeMaterial;
  18.  import org.papervision3d.view.layer.util.ViewportLayerSortMode;
  19.  import org.papervision3d.lights.PointLight3D;
  20.  import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
  21.  import org.papervision3d.core.math.Quaternion;
  22.  import org.papervision3d.objects.primitives.Sphere;
  23.  import org.papervision3d.core.math.Plane3D;
  24.  import org.papervision3d.core.math.Number3D;
  25.  import org.papervision3d.objects.DisplayObject3D;
  26.  import org.papervision3d.materials.ColorMaterial;
  27.  import org.papervision3d.objects.primitives.Plane;
  28.  import org.papervision3d.view.BasicView;
  29.  import org.papervision3d.view.layer.ViewportLayer;
  30.  import org.papervision3d.core.proto.MaterialObject3D;
  31.  
  32.  [SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
  33.  public class MouseDepth extends BasicView
  34.  {
  35.   private var _plane:Plane;
  36.   private var _lookAt:DisplayObject3D;
  37.   private var _vz:Number = 0;
  38.   private var _vy:Number = 0;
  39.   private var _vx:Number = 0;
  40.   private var _plane3d:Plane3D;
  41.   private var _sphere:Sphere;
  42.   private var _radius:Number = 50;
  43.   private var _light:PointLight3D;
  44.   private var _ground:Plane;
  45.   private var _globalLight:LightObject3D;
  46.   private var _shadowPlane:Plane;
  47.  
  48.   [Embed(source="tennisball.jpg")]
  49.   public var ball:Class;
  50.  
  51.   public function MouseDepth()
  52.   {
  53.    initPapervision();
  54.   }
  55.  
  56.   private function initPapervision():void
  57.   {
  58.    Mouse.hide();
  59.  
  60.    // set sortmode
  61.    viewport.containerSprite.sortMode = ViewportLayerSortMode.INDEX_SORT;
  62.  
  63.    // create light for ball
  64.    _light = new PointLight3D(false);
  65.    _light.y = 300;
  66.  
  67.    // create general light
  68.    _globalLight = new PointLight3D(true);
  69.    _globalLight.y = 400;
  70.    _globalLight.x = 300;
  71.  
  72.    // create plane3d
  73.    _plane3d = new Plane3D();
  74.    _plane3d.setNormalAndPoint(new Number3D(0, 1, 0), new Number3D(0, 0, 0));
  75.  
  76.    // ground
  77.    // add some effect to it
  78.    var gravelFM:FlatShadeMaterial = new FlatShadeMaterial(_globalLight, 0xFFFFFF, 0×333333);
  79.    gravelFM.fillAlpha = .2;
  80.    _ground = new Plane(gravelFM, 2000,2000);
  81.    _ground.rotationX = 90;
  82.    scene.addChild(_ground);
  83.    viewport.getChildLayer(_ground).layerIndex = 0;
  84.  
  85.    // create mouse object
  86.    var cm:ColorMaterial = new ColorMaterial(0×333333);
  87.    cm.fillAlpha = .5;
  88.  
  89.    _plane = new Plane(cm, 50, 50, 2, 2);
  90.    _plane.rotationX = 90;
  91.  
  92.    // -radius, to place the sphere right on top of our plane
  93.    _plane.y = -_radius;
  94.    scene.addChild(_plane);
  95.    viewport.getChildLayer(_plane).layerIndex = 1;
  96.  
  97.    // create materials for sphere
  98.    var bmat:BitmapMaterial = new BitmapMaterial(Bitmap(new ball()).bitmapData, true);
  99.    bmat.tiled = true;
  100.    bmat.smooth = true;
  101.  
  102.    var fm:FlatShadeMaterial = new FlatShadeMaterial(_light, 0xFFFFFF, 0×333333);
  103.    fm.fillAlpha = .5;
  104.  
  105.    var sm:CompositeMaterial = new CompositeMaterial();
  106.    sm.addMaterial(bmat);
  107.    sm.addMaterial(fm);
  108.  
  109.    // create sphere
  110.    _sphere = new Sphere(sm, _radius, 20, 18);
  111.    scene.addChild(_sphere);
  112.    viewport.getChildLayer(_sphere).layerIndex = 3;
  113.  
  114.    // object to look at
  115.    _lookAt = new DisplayObject3D();
  116.    camera.focus = 100;
  117.    camera.zoom = 11;
  118.    camera.lookAt(_lookAt);
  119.  
  120.    // place camera higher up
  121.    camera.y = 800;
  122.  
  123.    createShadow();
  124.  
  125.    // render
  126.    startRendering();
  127.   }
  128.  
  129.   public function createShadow():void
  130.   {
  131.    var floorSprite:Sprite = new Sprite();
  132.    floorSprite.graphics.beginFill(0xdddddd, 0);
  133.    floorSprite.graphics.drawRect(0, 0, 400, 400);
  134.    floorSprite.graphics.endFill();
  135.  
  136.    var shadow:Sprite = new Sprite();
  137.    shadow.graphics.beginFill(0×101010, 1);
  138.    shadow.graphics.drawCircle(0, 0, 100);
  139.    shadow.graphics.endFill();
  140.    floorSprite.addChild(shadow);
  141.  
  142.    shadow.filters = [new BlurFilter(30, 30, 8)];
  143.    shadow.x = 200;
  144.    shadow.y = 200;
  145.  
  146.    _shadowPlane = new Plane(new MovieMaterial(floorSprite, true, false, true), 200, 200, 1, 1);
  147.    _shadowPlane.pitch(90);
  148.    scene.addChild(_shadowPlane);
  149.    _shadowPlane.y = -_radius;
  150.    viewport.getChildLayer(_shadowPlane).layerIndex = 2;
  151.   }
  152.  
  153.   override protected function onRenderTick(event:Event = null):void
  154.   {
  155.    // move plane
  156.    var cameraPosition:Number3D = new Number3D(camera.x, camera.y, camera.z);
  157.  
  158.    //get the direction vector of the mouse position
  159.    var ray:Number3D = camera.unproject(viewport.containerSprite.mouseX, viewport.containerSprite.mouseY);
  160.  
  161.    //convert ray to a 3d point in the ray direction from the camera
  162.    ray = Number3D.add(ray, cameraPosition);
  163.  
  164.    //find the intersection of the line defined by the camera and the ray position with the plane3D
  165.    var intersect:Number3D = _plane3d.getIntersectionLineNumbers(cameraPosition, ray);
  166.  
  167.    //find distance to object and add to velocity
  168.    _vx += (_sphere.x-intersect.x)/1200;
  169.    _vy += (_sphere.y-intersect.y)/100;
  170.    _vz += (_sphere.z-intersect.z)/1200;
  171.  
  172.    // update vel
  173.    _vx *= .98;
  174.    _vy *= .94;
  175.    _vz *= .98;
  176.  
  177.    // move out plane to mouse coordinates
  178.    _plane.x -= (_plane.x – intersect.x)/4;
  179.    _plane.z -= (_plane.z – intersect.z)/4;
  180.  
  181.    // apply vel
  182.    _sphere.x -= _vx;
  183.    _sphere.y -= _vy;
  184.    _sphere.z -= _vz;
  185.  
  186.    // move shadow allong with sphere
  187.    _shadowPlane.x = _sphere.x;
  188.    _shadowPlane.z = _sphere.z;
  189.  
  190.    // move light with ball
  191.    _light.x = _sphere.x;
  192.    _light.z = _sphere.z;
  193.  
  194.    // the function written by Andy Zupko (blog.zupko.info), so usefull!
  195.    rollMe(_vx, _vy, _vz);
  196.  
  197.    super.onRenderTick(event);
  198.   }
  199.  
  200.   private function rollMe(vx:Number, vy:Number, vz:Number):void
  201.   {
  202. //   var pos:Number3D = new Number3D(_sphere.x, _sphere.y, _sphere.z);
  203.    var dif:Number3D = new Number3D(-vx, -vy, -vz);
  204.    var dist:Number = Math.sqrt(dif.x*dif.x+dif.z*dif.z);
  205.  
  206.    //find the cross of the up axis with the direction vector
  207.    var rotAxis:Number3D = Number3D.cross(dif, new Number3D(0, 1, 0));
  208.    rotAxis.normalize();
  209.  
  210.    //rotate around that axis by how long the direction vector is relative to the radius
  211.    var rotation:Quaternion = Quaternion.createFromAxisAngle(rotAxis.x, rotAxis.y, rotAxis.z, dist/_radius);
  212.    rotation.normalize();
  213.  
  214.    _sphere.transform.calculateMultiply3x3(rotation.matrix, _sphere.transform);
  215.   }
  216.  }
  217. }

Comments

6 Responses to “Just fun with dragging 3D Object”

  1. Ryan on March 10th, 2009 8:06 pm

    Hey Jan –

    Is it possible to supply the source files with this. Just want to check mine with yours.

    Thanks,

  2. Ryan on March 10th, 2009 8:09 pm

    When you use embed and swf in your class, how does that actually work?

  3. Jan Willem on March 11th, 2009 12:22 am

    @ryan: I work with eclipse and FDT. You can easily compile swf files with these ‘one class’ prototypes within this setup (eclipse + FDT). I’ll send you some links.

  4. Jan Willem on March 11th, 2009 10:21 am
  5. Ryan on March 11th, 2009 3:01 pm

    Thanks Jan, I’ll check it out. I had to modify your code to get that texture working on the sphere. This explains why.

  6. iphone ringtone converter on October 26th, 2010 9:21 pm

    Bravo, the excellent message

-->