0 Replies Latest reply on Jul 20, 2009 4:11 AM by OmnislashS

    Flex3 - Papervision - Camera movements

    OmnislashS

      Hi everyone,

       

       

      I'm working at this time on a website in 3D, developped in flex, and i'm facing some issues.

      I managed to create a 3D environement, insert 3D planes into this environement, and i even reach to make my first camera movement !

       

      The website is organised like that :

       

      - a 3D environement with 3D components (planes actually), and some camera movement which make me navigate from a plane to another, thanks to a mouseclick event on my buttons.

      - i'm using Papervision3D and libs Tweener & Efflex.

      - I can make move my camera at the launching of the application by the fonction of my 3D environement initialisation.

       

       

      The problem is I have a lot of trouble to make the camera works as i wish, more particulary i can manage it only threw my initWorld3D.. I mean i can't use an other function (which is trigged by my buttons on my planes - in my MXML file) which permit me to manage this camera. I can't see any errors from Flex, the programs lauch my application, but nothing happens.

       

      Therefore, i thought the key was in a addEventlistener function, but i don't really get how it works on the first hand, and on the other hand, i wouldn't be able to use it in my application for now.. I join you my code, hoping someone will help me ..

       

      (The function where i'd like to use my camera is moveTo..)

       

      Thank you everyone for reading this post, bye !

       

      Here my Canvas3D.as :

      package
      {
          import caurina.transitions.Tweener;
         
          import flash.events.Event;
         
          import mx.containers.Canvas;
          import mx.controls.Alert;
          import mx.core.UIComponent;
         
          import org.papervision3d.cameras.Camera3D;
          import org.papervision3d.objects.DisplayObject3D;
          import org.papervision3d.render.BasicRenderEngine;
          import org.papervision3d.scenes.Scene3D;
          import org.papervision3d.view.Viewport3D;   

          public class myCanvas3D extends Canvas
          {
              // Attributs spécifique à la création du monde 3D
              public var viewport:Viewport3D;
              public var scene:Scene3D;
              public var camera:Camera3D = new Camera3D();
              public var camera1:Camera3D;
              public var renderer:BasicRenderEngine;
              private var originX:Number = 0;
              private var originY:Number = 0;
              private var originZ:Number = -509;
             
             
             
             
             
      /* public var middleW = stage.stageWidth * 0.5;
      public var middleH = -stage.stageHeight * 0.5;
      public var mousex = stage.mouseX;
      public var mousey = -stage.mouseY;
       
      public var minRotationY:Number = 10;
      public var maxRotationY:Number = 200;
       
      public var minRotationX:Number = 10;
      public var maxRotationX:Number = 200; */
             
             
             
              // Attribut correspondant au tableau des fils.
              public var childrenObjects:Array = new Array();
             
              // Attribut indiquant la transparence du composant
              public var transparent:Boolean = true;
             
              public function myCanvas3D()
              {
                  super();
              }   
             
              public function initWorld3D():void
              {
                  createViewport();
                  createRenderer();
                  createScene3D();
                  createCamera3D();               
                 
                     
                  //camera.rotationY = camera.rotationY+20;                                   
                  //scene.addChild(new Plane(new ColorMaterial(0xff0000),100,100));
                 
                  if (transparent)
                      setBackground();
                 
                  addEventListener(Event.ENTER_FRAME, render);
              }               
             
              private function createViewport():void
              {
                  viewport = new Viewport3D(this.width, this.height, true, true);
                  rawChildren.addChild(viewport);
                  viewport.interactive = true;                                   
             
              }
             
              private function createRenderer():void
              {
                 
                  renderer = new BasicRenderEngine();
                 
              }
             
              private function createScene3D():void
              {
                 
                  scene = new Scene3D();
              }
             
              public function createCamera3D():void
              {           
                 
                  camera.far = 5000;
                  camera.near = 10;
                  camera.fov = 60;
                  camera.zoom = 1;
                  camera.x = originX;
                  camera.z = originZ;
                  camera.y = originY;
                 
                 
                  //Tweener.addTween(camera, {x : -1572, y : 650, z : -500, time:1, delay:1, transition:"easeinoutexpo"});
                         
                  //reverse();
                 
              }
             
              public function reverse():void
              {
                  //camera1 = new Camera3D();

                  //Tweener.addTween(camera1, {x : 1000, y : 650, z : -489, time:10, transition:"easeinoutexpo"});
                  //Alert.show('TOTO');           
              }
             
              // Move the camera to a specific set of coords
              public function moveTo():void
              {
                 
                  //Alert.show('tutu');
                  //Tweener.addTween(camera, {x : 1000, y : 650, z : -489, time:10, transition:"easeinoutexpo"});   
                  //Tweener.addTween(camera, {x:-1900, y:60, z:216, rotationX:-10, rotationY:90, rotationZ:0, time:1, transition:"easeinoutexpo"});
                  //Alert.show('tata');           
                  //Alert.show('tyty');
              }
             

             
              private function setBackground():void
              {
                  viewport.graphics.clear();
                  viewport.graphics.beginFill(0x000000,0.0);
                  viewport.graphics.drawRect(0,0,this.width,this.height);
                  viewport.graphics.endFill();
              }
                     
             
              private function render(e:Event):void
              {
                  //camera.x += (((stage.mouseX-(stage.stageWidth* 0.5))*2) - camera.x )*0.05;
                 
                  //camera.rotationY += (((stage.mouseY-(stage.stageWidth* 0.5))*2) - camera.rotationY )*0.5;
                   //camera.rotationX += (((stage.mouseX-(stage.stageWidth* 0.5))*2) - camera.rotationX)*0.5;
                 
                  //camera.rotationY += (((stage.mouseY-(stage.stageWidth* 0.5))*2) - camera.rotationY )*0.5;
                 
                 
                  //camera.rotationY += (((stage.mouseX-(stage.stageWidth* 0.5))*2) - camera.rotationY )*0.000025;  // Un peu lent, sans limite.
                 
                  camera.rotationY += (((stage.mouseX-(stage.stageWidth* 0.5))*2) - camera.rotationY )*0.000025; // vitesse ok, sans limite. Voir http://www.mega-art.com/blog/?p=28
                 
                 
                 
                  renderer.renderScene(scene,camera,viewport);
              }

              override protected function childrenCreated():void
              {
                  super.childrenCreated();
                  initWorld3D();
                  for each (var child:UIComponent in this.getChildren())
                  {
                      if (child is myUiComponent)
                      {
                          var child2:myUiComponent = myUiComponent(child);
                          scene.addChild(child2.displayObject3D);
                      }
                      if (child is myContainer)
                      {
                          trace("container");
                          var child3:myContainer = myContainer(child);
                          scene.addChild(child3.displayObject3D);
                      }
                  }
                 
                  for each (var child5:DisplayObject3D in this.scene.children)
                      trace("scene enfant name = "+child5.name);
              }
             
      /*          private function lold():void
              {
             
               if (mousex > middleW)
               {
                   camera.rotationY += (mousex-middleW)/100;
                camera.rotationY = camera.rotationY <= maxRotationY ? camera.rotationY : maxRotationY;
               }
               else
               {
               camera.rotationY -= (middleW - mousex) / 100;
                camera.rotationY = camera.rotationY >= minRotationY ? camera.rotationY : minRotationY;
               }
       
               if (mousey > middleH && camera.rotationX > -60)
               {
               camera.rotationX -= (mousey - middleH) / 100;
               camera.rotationX = camera.rotationX >= minRotationX ? camera.rotationX : minRotationX;
               }
               else if (mousey < middleH && camera.rotationX < 60)
               {
                camera.rotationX += (middleH - mousey) / 100;
               camera.rotationX = camera.rotationX <= maxRotationX ? camera.rotationX : maxRotationX;
                   }
              }  */
             

          }
      }

       

      Here my MXML :

       

      <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" horizontalScrollPolicy="off" horizontalGap="0" xmlns:myCom3D="*">
          <mx:Script>
              <![CDATA[
                  import mx.core.Application;
                  import mx.controls.Alert;
                  import mx.collections.ArrayCollection;
                 
             
                  [Bindable]
                  private var _monIndex :int = 0;
                 
                  [Bindable]
                  public function set monIndex( monIndex : int) : void
                  {
                      _monIndex = monIndex;
                  }
                 
                  public function get monIndex( ) : int
                  {
                      return _monIndex;
                  }
                 
                  private var view:myCanvas3D = new myCanvas3D;
                 
                 
                 
                         
                 
              ]]>
          </mx:Script>
             
          <mx:Button styleName="BouttonAgence"  width="92"  height="35" id="BouttonAgence" mouseOver="{monIndex=0;}" click="view.moveTo();"/>
          <mx:Button styleName="BouttonEMarketing" width="92" height="35" id="BouttonEMarketing" mouseOver="{monIndex=1;}" click="{monIndex=1;}"/>
          <mx:Button styleName="BouttonWeb" width="92" height="35" id="BouttonWeb" mouseOver="{monIndex=2;}" click="{monIndex=2;}"/>
          <mx:Button styleName="BouttonLogistique" width="92" height="35" id="BouttonLogistique" mouseOver="{monIndex=3;}" click="{monIndex=3;}"/>
          <mx:Button styleName="BouttonReferences" width="92" height="35" id="BouttonReferences" mouseOver="{monIndex=4;}" click="{monIndex=4;}"/>
          <mx:Button styleName="BouttonContact" width="92" height="35" id="BouttonContact" mouseOver="{monIndex=5;}" click="{monIndex=5;}"/>
      </mx:HBox>