Integrate Flare3D into a Flex application

Question

I'm building an application with the Flex framework and the 3D graphics library Flare3D.
I want to be able to embed my 3D scene into an MXML application and still have the mouse events dispatched to the 3D scene.

Here is my code:
- The MXML app:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:views="views.*"
               minWidth="955" minHeight="600" 
               backgroundAlpha="0">

<s:HGroup width="100%" height="100%">

    <s:Panel width="250" height="100%">
    </s:Panel>
    <views:MyView 
        id="myView" 
        width="100%" height="100%" />

</s:HGroup>
</s:Application>

The UIComponent responsible of the 3D rendering (just a cube).

package views
{

import flare.basic.Scene3D;
import flare.basic.Viewer3D;
import flare.core.Camera3D;
import flare.primitives.Cube;

import flash.display.Stage3D;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;

import mx.controls.Alert;
import mx.core.UIComponent;

public class MyView extends UIComponent
{

    private var scene:Scene3D;
    private var stage3D:Stage3D;

    private var cube:Cube;

    public function MyView()
    {
        super();
        this.addEventListener(Event.ADDED_TO_STAGE, init);
    }

    public function init(event:Event):void 
    {
        stage.scaleMode = StageScaleMode.NO_SCALE;
        stage.align = StageAlign.TOP_LEFT;
        //stage.focus = null;
        //stage.getChildAt(0).visible = false;

        scene = new Viewer3D(stage);
        scene.setViewport(250, 0);
        scene.addEventListener(Scene3D.PROGRESS_EVENT, progressEvent);
        scene.addEventListener(Scene3D.COMPLETE_EVENT, completeEvent);

        scene.camera = new Camera3D();
        scene.camera.setPosition(150, 150, -300);
        scene.camera.lookAt(0, 0, 0);

        cube = new Cube("cube");
        scene.addChild(cube);
    }

    protected function progressEvent(e:Event):void {}
    protected function completeEvent(e:Event):void {}

}
}

The problem is that the 3D rendering is done by default in a "layer" that is behind the 2D layer (where we can put MXML components).
By default, if we mix 3D and 2D elements, we can't see 3D elements.
So I added backgroundAlpha="0". This solved the problem of showing the 3D view. But now I have another problem, I can't move the cube (which is the default behaviour) when I click on the scene and move the mouse. I understand that this is because the 3D view is behind the 2D view.

Is it possible to give the 3D view the focus for mouse events (when it's needed) ?
Or is there a different way of doing what I want ? The only hack I figured out is to uncomment this //stage.getChildAt(0).visible = false; which make the 2D view invisible. But I want to mix 2D elements and 3D view, so it's not a solution.

Thanks for any help.

score 1 · Accepted Answer · answered Jan 08 '12 at 12:22

I had the exact same issue working with Alternativa3D and Flex 4.6. What I tried was to add the UIComponent in the application tag instead of the Panel tag and both my Flex and Stage3D mouse events worked.

So the code looks like this:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:views="views.*"
               minWidth="955" minHeight="600" 
               backgroundAlpha="0">

    <views:MyView 
        id="myView" 
        width="100%" height="100%" />

<s:HGroup width="100%" height="100%">

    <s:Panel width="250" height="100%">
    </s:Panel>

</s:HGroup>
</s:Application>

I will test this with Flare as soon as I can, so maybe your answer will be accepted. We already gave in the project (and had a very good grade ;-)). — grandouassou, Feb 05 '12 at 11:38

score 0 · Answer 2 · edited Oct 27 '12 at 06:34

Setting backgroundAlpha="0" worked for me.

I was trying to get http://www.beyond-reality-face.com/sdk working with Flex / Flash Builder.

Now I understand the issue. Flex app is 2D and is not transparent, so backgroundAlpha="0" fixes that.

Also stage3D is not transparent - but the examples in the face SDK already account for that by painting the webcam as an animated texture onto a Flare3D plane.

Integrate Flare3D into a Flex application

2 Answers2