Laya商业级3d实战-05加载3d首页场景

视频观看地址:

laya商业级3d游戏开发

本节目标:显示3D场景+首页ui

Laya商业级3d实战-05加载3d首页场景_第1张图片

打开LayaEdu/scnnes/Home 场景
Laya商业级3d实战-05加载3d首页场景_第2张图片

配置导出路径,点击导出
Laya商业级3d实战-05加载3d首页场景_第3张图片

Laya f9
Laya商业级3d实战-05加载3d首页场景_第4张图片

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);
    }

Laya商业级3d实战-05加载3d首页场景_第5张图片

Ui不见了
为了查找问题,打开调试辅助工具
Laya商业级3d实战-05加载3d首页场景_第6张图片

F8

Laya商业级3d实战-05加载3d首页场景_第7张图片

Laya渲染顺序和节点排序有关3d节点最后渲染了
所以 调整节点顺序
代码调整
OnSceneLoadOk(rs: Laya.Scene3D) {
this.scene3D = rs;
// Laya.stage.addChild(rs);
///3d场景会遮挡ui
//保证3d场景在UI节点前面
Laya.stage.addChildAt(rs, 0);

Laya商业级3d实战-05加载3d首页场景_第8张图片

结语;
本节课学习了3d场景资源的导出和加载
3d加2D的显示
通过控制节点调整渲染顺序
Laya商业级3d实战-05加载3d首页场景_第9张图片

你可能感兴趣的:(h5,laya)