将Flare3D集成到Flex应用程序中

Question

我正在使用Flex框架和3D图形库Flare3D构建一个应用程序。

我希望能够将3D场景嵌入到MXML应用程序中，并且仍然可以将鼠标事件分派到3D场景中。

下面是我的代码：

• MXML应用程序：

<?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>

负责3D渲染的UIComponent (只是一个立方体)。

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 {}

}
}

问题是，默认情况下，3D渲染是在2D层后面的“层”中完成的(我们可以在那里放置MXML组件)。

默认情况下，如果我们混合了3D和2D元素，我们看不到3D元素。

所以我添加了backgroundAlpha="0"。这解决了显示3D视图的问题。但现在我有了另一个问题，当我点击场景并移动鼠标时，我不能移动立方体(这是默认行为)。我理解这是因为3D视图在2D视图之后。

是否可以为3D视图提供鼠标事件的焦点(当需要时)？

或者有不同的方式来做我想做的事情？我想出的唯一办法就是取消对这个//stage.getChildAt(0).visible = false;的注释，这使得2D视图不可见。但是我想混合2D元素和3D视图，所以这不是一个解决方案。

谢谢你的帮助。

Answer 1

我在使用Alternativa3D和Flex4.6时遇到了完全相同的问题。我尝试的是在应用程序标签中添加UIComponent，而不是面板标签，并且我的Flex和Stage3D鼠标事件都可以工作。

所以代码看起来像这样：

<?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>

Answer 2

设置backgroundAlpha="0"对我很有效。

我试着让http://www.beyond-reality-face.com/sdk和Flash一起工作。

现在我明白问题所在了。Flex应用程序是2D的，并且不透明，所以backgroundAlpha="0"解决了这个问题。

此外，stage3D也不是透明的--但是face中的例子已经说明了这一点，它将摄像头作为动画纹理绘制到Flare3D平面上。