apache-flex - 将 Flare3D 集成到 Flex 应用程序中

Question

我正在使用 Flex 构建一个应用程序框架和 3D 图形库 Flare3D .
我希望能够将我的 3D 场景嵌入到 MXML 应用程序中，并且仍然将鼠标事件分派(dispatch)到 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 View 的问题。
但是现在我遇到了另一个问题，当我单击场景并移动鼠标时，我无法移动立方体(这是默认行为)。
我知道这是因为 3D View 位于 2D View 之后。

是否可以将 3D View 作为鼠标事件的焦点(在需要时)？
还是有不同的方式来做我想做的事？
我发现的唯一技巧是取消注释 //stage.getChildAt(0).visible = false;这使得 2D View 不可见。但我想混合 2D 元素和 3D View ，所以这不是一个解决方案。

谢谢你的帮助。

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>