Laya寻路在构建过程中阻塞页面加载问题处理

如果json文件有三四百kb以上,那么构建寻路的时候会非常卡,甚至阻塞模型加载,这时候可以使用worker来构建新的线程避免阻塞页面的模型
使用worker处理阻塞问题
navWorker.js: 这个文件放在src中在运行的时候会报错找不到,所以worker代码必须放在bin目录下,但是在bin目录下又无法读取Laya,window,NevMesh等全局变量,所以,必须在这里引入NevMesh.js来执行计算

(function (){if ('function' === typeof importScripts) {importScripts("../NevMesh.js");self.addEventListener('message', function (e) {let floorNum = e.data[1];let navUrl = e.data[2];console.log('new worker msg:', floorNum)var xmlreq = new XMLHttpRequest();xmlreq.responseType = "json";xmlreq.onload = function (e) {var data = e.currentTarget.response;let zoneNodes = NevMesh.buildNodesByJson(data);self.postMessage([floorNum, zoneNodes]);}xmlreq.open("get",navUrl);xmlreq.send();}, false);}}())

主线程代码

initNavMesh() {let self = this;let { buildingName, currFloor, isStack, buildingInfo } = this.sceneInfo;if (isStack) {for (var key in buildingInfo) {// 多层路线构建if (NevMesh.zoneNodes[key] || this.workList.includes(key)) {} else {this.workList.push(key);nWork(key);}}if (this.workList.length === 0) this.initComplete();} else {if (NevMesh.zoneNodes[currFloor]) {this.initComplete();} else if (this.workList.includes(currFloor)) {} else {this.workList.push(currFloor);nWork(currFloor);}}function nWork(key) {// 构建需要提示var worker = new Laya.Browser.window.Worker("js/navWorker.js");worker.onmessage = function (oEvent): void {let floorNum = oEvent.data[0];let zoneNodes = oEvent.data[1];NevMesh.setZoneData(floorNum, zoneNodes);let id = self.workList.findIndex((val) => {return val === floorNum;});self.workList.splice(id, 1);if (self.workList.length === 0) {self.initComplete();if (isStack) {// self.findPathByPos(false);// self.findDemo(false);} else {// self.findPathByPos(true, floorNum);}}console.log(`${buildingName}/${floorNum} 导航数据构建完毕`);};worker.postMessage(["start", key, `../meshes/${buildingName}/${key}.json`]);// meshes文件夹要放在bin目录下,如果放在src里会找不到}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/628756.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为设备VRRP配置

核心代码: 需要对所有虚拟路由器设置(要进入到对应的端口) vrrp vrid 38 virtual-ip 192.168.10.254 vrrp vrid 38 priority 120 vrrp vrid 38 track int g0/0/1 reduced 30①mac由vrid生成 ②指定虚拟ip ③虚拟ip作为内部主机的网关&#x…

如何在云端加速缓存构建

缓存是指将某类数据存储起来以便以后重复使用的过程,它的运用在开发场景中非常普遍。类似于你习惯把最常用的调料放在厨房台面上,而不是橱柜里,这样你在准备大餐时就可以轻松取用。 但对于一个更为技术性、更精确的用例,比如像谷…

js中如何从tree数据中找出某一项以及父级和祖先级

js中如何从tree数据中找出某一项以及父级和祖先级 递归方法迭代方法:深度优先搜索(DFS)广度优先搜索(BFS) 扩展: js中迭代方法主要有哪些 js中如何从tree数据中找出某一项以及父级和祖先级 在JavaScript中…

云服务器基于Centos创建个人云盘实践经验分享

文章目录 安装运行Cloudreve安装ossfscentos更换yum源 配置ossfs挂载oss存储配置开机启动 配置cloudreve推荐阅读 安装运行Cloudreve 执行如下命令,下载cloudreve安装包。 wget https://labfileapp.oss-cn-hangzhou.aliyuncs.com/cloudreve_3.3.1_linux_amd64.tar…

C#/WPF 设置和启动Windows屏保程序

前言 我们平时电脑启动的屏保程序其本质也是应用程序,只是后缀名为.scr。所以我们只需要把应用程序后缀改为.scr,然后右键选择安装即可启动我们自己的屏保程序。 屏保注册表参数 设置电脑屏保参数,在个性化设置>锁屏界面>屏幕保护程序设…

Qt/QML编程之路:slider(34)

滑条slider,有时也成为进度条progressbar,在GUI界面中也是经常用到的。 import QtQuick 2.9 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.2ApplicationWindow {id:rootvisible: truewidth: 1920height: 720//title: qsTr("Hello World&q…

C#使用Stopwatch实现执行耗时及性能监测

Stopwatch类提供一组方法和属性,一般用来测量代码运行消耗时间,以便获取更多代码运行性能上的数据。以下主要介绍C#中用Stopwatch实现执行耗时及性能监测的方法。 1、Stopwatch简介 1)命名空间 using System.Diagnostics; 2)字段 字段 字…

rabbitmq-java基础详解

一、rabbitmq是什么? 1、MQ定义 MQ(Message Queue)消息队列 主要解决:异步处理、应用解耦、流量削峰等问题,是分布式系统的重要组件,从而实现高性能,高可用,可伸缩和最终一致性的架…

c#之枚举类型和结构体

(一般如果取值范围有效,使用枚举,几个类型组成了一个新的类型使用结构体) 1. 枚举 namespace 枚举类型 {enum GameState{//枚举类型中的每一个值,都是一个整数,默认为int类型Pause3,//默认值为0Failed2,//默认值为1Success7,//默认值为2Start8//默认值为3}class Program{st…

Unity面试笔记:Unity常见关键词概念

Unity面试笔记:Unity常见关键词概念 Invoke 延迟函数 和 Coroutine协程 和 Thread线程帧缓冲区(Frame buffer)颜色缓冲区(Color buffer)深度缓冲区(Depth buffer)模板缓冲区(Stencil…

如何从命令行运行testng.xml?

目录 创建一个新的java项目并从命令行运行testng.xml 使用命令行运行XML文件 从命令行运行现有maven项目的XML文件 在这篇文章中,我们将使用命令行运行testng.xml。有多种场景需要使用命令行工具运行testng.xml。也许您已经创建了一个maven项目,现在想…

运筹说 第97期|非线性规划-一维搜索

第二节 一维搜索 通过上期学习,大家已经了解了非线性规划的基本内容,那么如何求解一个非线性规划问题呢?本期小编就带大家来学习用于求解单变量无约束极值问题的方法——一维搜索,该方法也是后面求解更复杂问题的基础。 一、引入…

FinalShell连接虚拟机2024/1/16

目录 1.右键虚拟机桌面空白处,选择打开终端,在终端中输入ifconfig命令,查看Linux系统的IP地址:复制。 2.打开FinalShell,点击(1)号文件夹打开连接管理器,点击(2)号选择…

Angular系列教程之zone.js和NgZone

文章目录 什么是zone.jsZone的工作原理Zone的常见用途NgZone:Angular中的zone.js使用NgZone使用NgZone执行代码使用NgZone外部检测 结论 什么是zone.js 在Angular中,zone.js是一个非常重要的库,它为我们提供了一种跟踪和管理异步操作的机制。…

vue中引入sass、scss

常规步骤 1. 创建项目 使用vue cli 脚手架工具创建项目 vue create xxxx2. 创建全局样式文件 全局样式变量 路径:/assets/styles/variables.scss //flex 布局变量 $--flex-direction: ("row", "column"); $--flex-position: ("start"…

排序嘉年华———归并排序

文章目录 一.归并是什么?题目一:合并有序数组题目二:合并有序链表 二.归并排序1.递归式归并2.非递归式的归并排序 一.归并是什么? 相信朋友们应该做过一类题,合并两个有序数组,在链表里也有合并两个单链表…

liunx安装redis

安装redis 1.向Xftp7上传Redis压缩包 进行解压:tar -zxvf redis-6.0.8.tar.gz 解压后预编译: cd redis-6.0.8 make 创建文件: mkdir -p /opt/redis 安装到指定目录: make install PREFIX/opt/redis 进入安装文件 bin 目录:cd /opt/redis/bin ./redis-se…

Angular系列教程之依赖注入详解

文章目录 引言依赖注入基础依赖注入的基本概念依赖注入的原理 依赖注入实践依赖注入注意事项 引言 Angular作为一款流行的前端框架,提供了许多优秀的功能和特性,其中之一就是依赖注入(Dependency Injection)。依赖注入是一种设计…

IP定位技术在网络安全行业的探索

随着互联网的普及和深入生活,网络安全问题日益受到人们的关注。作为网络安全领域的重要技术,IP定位技术正逐渐成为行业研究的热点。本文将深入探讨IP定位技术在网络安全行业的应用和探索。 一、IP定位技术的概述 IP定位技术是通过IP地址来确定设备地理位…

Github 2FA验证的解决方法

当前使用GitHub需要启用 2FA 验证,也就是除了账号密码外还有一个实时码,需要额外输入这个正确的实时码才能开启 2FA 验证和后续登陆。 浏览器插件 这是目前我在使用的方法。在浏览器中添加一个叫做Authenticator的插件,传送地址:…