元宇宙虚拟空间的加载管理(三)

前言

该文章主要讲元宇宙虚拟空间的加载管理,基本核心技术点,不多说,直接引入正题。


加载管理的处理

使用引入的加载模块

let loadingManager = new LoadingManager(this);

对引入的加载模块,设置时间因子调整为0(时间因子:在这里是指页面与时间相关的要素,当这个数是0时,页面将会呈现一个缓慢时间的效果)对每个加载做跟踪监听

this.world.setTimeScale(0);

当加载管理界面加载完毕,时间因子再调整为1,并且调用Swal库的弹出框,当关闭弹窗显示UI调试开发界面方便后续操作

loadingManager.onFinishedCallback = () =>

{

this.update(1, 1);

this.setTimeScale(1);

Swal.fire({

title: '欢迎来到虚拟空间!',

text: '',

footer: '< ',

confirmButtonText: 'Okay',

buttonsStyling: false,

onClose: () => {

UIManager.setUserInterfaceVisible(true);

}

});

};

关于场景的加载,判断建模是否有定义的属性,判断是否为物体,凡是物体都要对材质进行一个初始化修改(因为要做级联阴影的效果),如果是一些特别的材质,就要对它进行创建,然后把它添加到世界的更新表单中。

当然关于场景里的一些效果碰撞等特殊事件,也要在这个场景加载里面进行调用,,后续会讲到.

gltf.scene.traverse((child) => {

if (child.hasOwnProperty('userData')) {

if (child.type === 'Mesh'){

Utils.setupMeshProperties(child);

this.sky.csm.setupMaterial(child.material);

if (child.material.name === 'ocean'){

this.registerUpdatable(new Ocean(child, this));

}

}

}

相关推荐
总要学点什么17 小时前
第108篇:三维特效-图片轨迹线效果——把贴图滚成一串箭头,想用它的本色反而整条消失
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
总要学点什么1 天前
第106篇:三维特效-流动线效果——让一颗光点沿整条线一路滚到头
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
总要学点什么2 天前
第105篇:三维特效-流动图片墙体效果——让箭头沿墙长滚,它俩竟是同一份代码
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
总要学点什么2 天前
第104篇:三维特效-流动墙体效果——让贴图沿墙流动,它却只肯走一条对角线
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
西伯利亚小火龙2 天前
我以为是流体解算,结果只是一张贴图:复刻 Lusion 的屏幕流体特效
webgl·three.js
普通人62 天前
WebGL与WebGPU入门指南
开发语言·webgl·1024程序员节
魂断蓝桥6663 天前
如何用 three.js 把 3D 消防演练落到一栋楼里——第一课:场景搭建与火情定位
webgl·three.js·3d建筑·物联网3d·、3d工厂、3d工业园区、智慧制造、智慧工业、智慧工厂·3d定位、三维室内定位、3d建筑·3d消防
总要学点什么5 天前
第96篇:三维数据加载-城市建筑白模样式+着色器——让色带按体量上色,最白的那档却涂不上去
前端·gis·webgl·cesium·着色器·空间分析·白模
总要学点什么6 天前
第97篇:三维数据加载-城市建筑白模自定义着色器——让一条光带沿高度扫上去,快慢却由帧率说了算
前端·gis·webgl·cesium·着色器·空间分析·白模
总要学点什么7 天前
第98篇:三维特效-材质线效果——给一条线换十种材质,虚线的图案只填了一半
开发语言·前端·javascript·ecmascript·gis·webgl·材质