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

前言

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


加载管理的处理

使用引入的加载模块

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

}

}

}

相关推荐
小彭努力中7 小时前
141. Sprite标签(Canvas作为贴图)
前端·深度学习·3d·webgl·three.js
Ian10251 天前
WebGL进阶(十一)层次模型
webgl
mirrornan2 天前
什么是Web3D?有何优势?有哪些应用场景?
3d·web3·webgl·3d模型
gis分享者3 天前
学习threejs,通过SkinnedMesh来创建骨骼和蒙皮动画
threejs·蒙皮网格·skinnedmesh·骨骼和蒙皮动画
gis分享者4 天前
学习threejs,导入FBX格式骨骼绑定模型
threejs·骨骼动画·fbx
小彭努力中4 天前
138. CSS3DRenderer渲染HTML标签
前端·深度学习·3d·webgl·three.js
优雅永不过时·4 天前
three.js实现地球 外部扫描的着色器
前端·javascript·webgl·three.js·着色器
汪洪墩4 天前
【Mars3d】实现这个地图能靠左,不居中的样式效果
前端·javascript·vue.js·3d·webgl·cesium
gis分享者5 天前
学习threejs,对模型多个动画切换展示
threejs·动画切换
allenjiao5 天前
webgl threejs 云渲染(服务器渲染、后端渲染)解决方案
webgl·云渲染·threejs·服务器渲染·后端渲染·云流化·三维云渲染