Egret社区
1银子
仿照官方“360全景照片”做的项目,只是改变了加载方式,现在pc上debug都可以操作,但是到了手机上就不行了。

改动如下:
官方demo的Main.ts如下:
[mw_shl_code=applescript,true]class Main extends egret.DisplayObjectContainer {

    public constructor() {
        super();
        new Sample_360();
    }
}[/mw_shl_code]

我的Main.ts使用的eui的空项目作为基础,关键代码如下:
[mw_shl_code=applescript,true]class Main extends eui.UILayer {

    private static _instance:Main;

    public static getInstance(): Main
    {
        if (Main._instance == null)
        {
            Main._instance = new Main();
        }

        return Main._instance;
    }

    /**
     * 加载进度界面
     * loading process interface
     */
    private loadingView: LoadingUI;
    private m_show_360: Sample_360;

    protected createChildren(): void {
        super.createChildren();

        Main._instance = this;

        // return;

        //inject the custom material parser
        //注入自定义的素材解析器
        var assetAdapter = new AssetAdapter();
        this.stage.registerImplementation("eui.IAssetAdapter", assetAdapter);
        this.stage.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());
        //Config loading process interface
        //设置加载进度界面
        this.loadingView = new LoadingUI();
        this.stage.addChild(this.loadingView);
        // initialize the Resource loading library
        //初始化Resource资源加载库
        RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
        RES.loadConfig("resource/default.res.json", "resource/");

    }
    /**
     * 配置文件加载完成,开始预加载皮肤主题资源和preload资源组。
     * Loading of configuration file is complete, start to pre-load the theme configuration file and the preload resource group
     */
    private onConfigComplete(event: RES.ResourceEvent): void {
        RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
        // load skin theme configuration file, you can manually modify the file. And replace the default skin.
        //加载皮肤主题配置文件,可以手动修改这个文件。替换默认皮肤。
        var theme = new eui.Theme("resource/default.thm.json", this.stage);
        theme.addEventListener(eui.UIEvent.COMPLETE, this.onThemeLoadComplete, this);

        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
        RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
        RES.loadGroup("preload");

    }

    private isThemeLoadEnd: boolean = false;
    /**
     * 主题文件加载完成,开始预加载
     * Loading of theme configuration file is complete, start to pre-load the
     */
    private onThemeLoadComplete(): void {
        this.isThemeLoadEnd = true;
        this.createScene();
    }
    private isResourceLoadEnd: boolean = false;
    /**
     * preload资源组加载完成
     * preload resource group is loaded
     */
    private onResourceLoadComplete(event: RES.ResourceEvent): void {
        if (event.groupName == "preload") {
            this.stage.removeChild(this.loadingView);
            RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
            RES.removeEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
            RES.removeEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
            RES.removeEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
            this.isResourceLoadEnd = true;
            this.createScene();

        }
    }
    private createScene() {
        if (this.isThemeLoadEnd && this.isResourceLoadEnd) {

            this.startCreateScene(egret3d.Event3D.EVENT_LOAD_COMPLETE);
        }
    }
    /**
     * 资源组加载出错
     *  The resource group loading failed
     */
    private onItemLoadError(event: RES.ResourceEvent): void {
        console.warn("Url:" + event.resItem.url + " has failed to load");
    }
    /**
     * 资源组加载出错
     * Resource group loading failed
     */
    private onResourceLoadError(event: RES.ResourceEvent): void {
        //TODO
        console.warn("Group:" + event.groupName + " has failed to load");
        //忽略加载失败的项目
        //ignore loading failed projects
        this.onResourceLoadComplete(event);
    }
    /**
     * preload资源组加载进度
     * loading process of preload resource
     */
    private onResourceProgress(event: RES.ResourceEvent): void {
        if (event.groupName == "preload") {
            this.loadingView.setProgress(event.itemsLoaded, event.itemsTotal);
        }
    }

    /**
     * 创建场景界面
     * Create scene interface
     */
    protected startCreateScene(e): void {
        this.m_show_360 = new Sample_360();

    }[/mw_shl_code]

另外:
原官方demo中使用的lib为“egret3d.js”
而我这里使用的是“egret3d.min.js”(为了解决“进入sample_360场景往下延伸一倍屏幕”的问题)

请问:
这些不同,具体是哪一处导致了我现在的问题(不能在手机上操作)?

分享到 :
0 人收藏

3 个回复

倒序浏览
wannatwo  登堂入室 | 2016-8-2 22:06:40
本帖最后由 wannatwo 于 2016-8-2 22:30 编辑


wannatwo  登堂入室 | 2016-8-2 22:20:35
补充:
在层级中发现:在“egret-player”下第一层是一个canvas,具体属性如下:
[mw_shl_code=applescript,true]<canvas width="1136" height="640" style="cursor: inherit; position: absolute; top: 30px; bottom: 0px; left: 0px; right: 0px; transform-origin: 0% 0% 0px; width: 1032px; height: 582px; transform: rotate(0deg);"></canvas>[/mw_shl_code]

请问:会是这一层导致了上述问题吗?
如果是应该怎么修改?
wannatwo  登堂入室 | 2016-8-11 11:05:38
我总结一下这个问题我的解决历程:

一开始就是仿照官方全景图项目做的,但是如果按照官方实例,把index中 egret-player的div属性width 和height设为0, 我就无法添加UI界面了,而如果设为100%,又会出现往下延伸一倍屏幕的情况。在观察了另一个官方实例(F1赛车展示)后,发现只要使用egret3d.min.js而不是使用egret3d.js作为lib,就能够完美实现UI和3d场景的融合。解决了这一问题后,我放到手机上进行测试,才发现手机上完全不能滑动。然后就是不停地反复对比两个官方项目,一开始我选择以全景图实例为主要参照(毕竟主功能完全一致),发现有一段index中的代码没有添加:
[mw_shl_code=applescript,true]
    <script>
    window.addEventListener("touchmove", function (event) { event.preventDefault(); }, false);
    if (typeof window.devicePixelRatio != 'undefined' && window.devicePixelRatio > 2) {
        var meta = document.getElementById("viewport");
        meta.setAttribute('content', 'width=device-width, initial-scale=' + (2 / window.devicePixelRatio) + ', user-scalable=no');
    }
    </script>[/mw_shl_code]
被自己蠢哭  
但是,添加之后依然没有解决问题,这才发现,这段代码只有在使用lib egret3d.js才有效,在使用egret3d.min.js时并没有效果。至此,我又回到了最初使用lib egret3d.js时解决屏幕往下延伸问题的阶段,我尝试了使用html中改变层级的方式,把egret3d的element换到 egret-player下,作为其child。但是一旦改变了层级关系,index中那段3d场景添加触摸的代码就不起作用了。我也尝试了将这段代码放进我的ts代码中,在改变了层级之后调用,依然没有奏效...。随后,我又回到上一步,改将F1实例作为主要参照,改了一系列的东西,最后在研究他的摄像头控制代码CameraHoverController 中发现:在手机上执行touchMove方法时,其参数e.touchPointID会不停地变化,导致无法滑动。发现问题后,我索性将检测e.touchPointID的条件删除,终于成功地实现了手机上的滑动操作,但是随之而来又出现了两个新问题:1.滑动区域过小2.往右滑动有阻塞感。针对问题1,我改了sample_base.ts中的onResize方法:
[mw_shl_code=applescript,true]protected onResize(x: number, y: number, width: number, height: number) {
        this.rect.x = x;
        this.rect.y = y;
        this.rect.width = width * 2;
        this.rect.height = height * 2;
    }[/mw_shl_code]
问题2暂时还没有很好的解决方案,如果后面解决了会持续更新。

希望能有大神留下些批评或建议。
最后,希望egret可以越做越好。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部