Laya commercial-grade 3d actual combat-05 loading 3d homepage scene

Video viewing address:

laya commercial 3d game development

Goal of this section: display 3D scene + home page ui

Open the LayaEdu/scnnes/Home scene

Configure the export path, click Export

Laya f9

Homeview 代码更改如下
onOpened(data) {
this.startImage.on(Laya.Event.CLICK, this, this.OnStartImageClick);
let sceneName = ‘Home’;
let url = ‘res3d/LayaScene_’ + sceneName + ‘/Conventional/’ + sceneName + ‘.ls’;
Laya.Scene3D.load(url, Laya.Handler.create(this, this.OnSceneLoadOk));
}

    OnSceneLoadOk(scene3D: Laya.Scene3D) {
      //场景添加到舞台      
     Laya.stage.addChild(scene3D);
    }

Ui is gone.
To find the problem, open the debugging aid

F8

Laya rendering order and node ordering are related to the 3d node rendering last,
so adjust the node order
code adjustment
OnSceneLoadOk(rs: Laya.Scene3D) { this.scene3D = rs; // Laya.stage.addChild(rs); ///3d scene will Block ui //Ensure that the 3D scene is in front of the UI node Laya.stage.addChildAt(rs, 0);

Conclusion;
this lesson learned the export and loading of 3d scene resources,
3d plus 2D display,
adjust the rendering order through control nodes