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和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也不透明 - 但面部SDK中的示例已经通过将网络摄像头作为动画纹理绘制到Flare3D平面上来解释。

将Flare3D集成到Flex应用程序中

2 个答案: