将 Flare3D 集成到 Flex 应用程序中

Question

我正在使用 Flex 框架和 3D 图形库 Flex 构建一个应用程序。 flare3d.com/" rel="nofollow">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 和 Flex 4.6 时遇到了完全相同的问题。我尝试的是在应用程序标签中添加 UIComponent 而不是 Panel 标签，并且我的 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 使用 Flex / Flash Builder。

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

此外，stage3D 不是透明的 - 但 Face SDK 中的示例已经通过将网络摄像头绘制为 Flare3D 平面上的动画纹理来说明这一点。