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

前言

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


加载管理的处理

使用引入的加载模块

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

}

}

}

相关推荐
weixin_4368040710 小时前
毒蘑菇性能测试增强版 - 毒蘑菇性能测试 - 在线 WebGL GPU 帧率压力测试工具
webgl
山河木马1 天前
GPU自动处理专题3-NDC怎么映射成屏幕像素坐标(视口变换)
javascript·webgl·图形学
山河木马1 天前
GPU自动处理专题2-NDC是什么(透视除法)
javascript·webgl·计算机图形学
山河木马2 天前
GPU自动处理专题1-裁剪到底在裁什么(裁剪)
前端·webgl·计算机图形学
山河木马3 天前
渲染管线-计算得到gl_FragColor(片元着色器)之后续GPU流程
前端·webgl·计算机图形学
TMAH3 天前
OpenLayers 实现网格色斑图:WebGL 叠加层方案
webgl
熊猫钓鱼>_>3 天前
2026 前端的三场底层革命:当 Vue、React Native 和 Three.js 同时去掉中间层
前端·javascript·vue.js·react native·架构·webgl·three.js
廖菌3 天前
DATASPACE3D 产品介绍:面向数字孪生与 Web3D 场景的一体化可视化搭建平台
前端·webgl
真鬼1234 天前
【Unity WebGL】内嵌网页与双向通信
unity·游戏引擎·webgl
图扑软件4 天前
WebGIS 零碳智能港口态势感知与 VR 远控系统
物联网·自动化·vr·webgl·数字孪生·3d 渲染