简介面向Laya引擎开发者的粒子效果预览Demo演示点击按钮弹出本地文件选择框导入Unity导出的.lh粒子文件支持最多两层嵌套粒子的加载可在播放与停止间切换更换文件不需重新运行。提供键盘与鼠标视角控制实现3D场景与网页DOM的混合交互适合学习Laya粒子系统加载、文件选择与前端交互。资源包共302个文件压缩包约23.43MB主要包含67个JavaScript脚本、51张PNG贴图、18个lmat材质文件、13个JSON配置、6个.lh粒子场景文件及readme说明构成一套可直接导入LayaIDE运行的完整示例工程附带日志文件可辅助排查运行异常。已有742人学习浏览测试环境为LayaIDE。对具备一定Laya基础的中级开发者可据此快速搭建粒子预览工具并扩展多文件选择、粒子层级解析或播放控制等功能也可作为美术与前端协作时的效果预览桥接方案减少重复编译和联调等待。1. 项目速览一个让Unity粒子在浏览器里直接预览的Laya小工具这个Laya预览Unity导出粒子demo最初解决的是我桌面上一直放着的那个痛点美术同事扔来一份Unity粒子特效预处理文件我却没法在浏览器里直接确认效果。以前要么临时改游戏内入口要么先把资源倒进Laya工程再跑一遍来回折腾几十分钟。这个demo把流程压缩成三步点一个按钮、弹出本地文件选择框、选中Unity导出的.lh粒子文件Laya引擎立刻把它实例化到3D场景里循环播放。它对你的价值在于把“资源预览”从游戏项目里剥离开。做Laya游戏开发、特效联调或者资源打包前检查的同学都可以直接拿来用更准确地说它是一份“Laya 文件操作DOM 粒子系统”的最小可跑样板。懂了这个项目你以后再接到类似“把本地文件拖进页面预览”的需求就有了可复制的骨架。2. 技术选型与目录结构用LayaAir3和DOM文件桥接搭起预览骨架2.1 为什么是LayaAir3 原生DOM而不是全引擎内置UI预览场景有一个明显特点文件来源是本地磁盘不是服务器资源也不是游戏内道具。如果全部用Laya内置UI来实现文件选择就得在场景里拼一个复杂的输入框列表还得处理运行时没有DOM访问权限的问题完全绕远路。原生input typefile加上一次click()跳转举手之劳就能拿到用户选择的文件句柄这是浏览器本身给的能力没必要在引擎里再造轮子。技术栈上这个demo使用LayaAir 3.x作为渲染与粒子解析核心。Unity粒子系统通过官方导出插件序列化成.lh文件本质上是一个JSON结构的场景配置里面记录了粒子发射器参数、材质引用和贴图路径。LayaAir的Scene3D加载器可以直接解析这种配置把粒子节点还原出来所以我们不需要自己写粒子运动学解析只需要把文件内容正确交给Loader。模块分工上我习惯拆成三个文件入口负责3D场景和相机初始化文件选择封装成独立的DOM工具粒子加载单独放一个加载器类。目录结构大概长这样laya-particle-preview/ ├─ src/ │ ├─ Main.ts // 入口创建3D场景、相机、光照 │ ├─ ui/ │ │ └─ FilePicker.ts // 隐藏input点击按钮触发原生文件选择 │ └─ core/ │ └─ ParticleLoader.ts // objectURL生成、Loader加载、粒子挂接 ├─ assets/ │ └─ effects/ // 测试用的.lh粒子文件 ├─ bin/js/ // 编译输出 └─ index.html // 浏览器入口这个结构的好处是文件选择和粒子加载相互独立下次你想改成“拖拽文件进页面”只需要动FilePickerParticleLoader完全不用碰。2.2 工程目录与场景初始化在LayaAir IDE里新建3D项目后入口脚本Main.ts负责最基础的环境搭建。常见做法是Laya3D.init(0, 0)开启WebGL渲染stage全屏然后创建一个空场景和透视相机。因为粒子预览通常需要一定深度感我会挂一盏方向光避免粒子材质因为无光而变黑。// src/Main.ts import { Laya3D, Stage, Scene3D, Camera, DirectionLight, Vector3 } from Laya; export default class Main { private _scene: Scene3D; constructor() { Laya3D.init(0, 0); Laya.stage.scaleMode Stage.SCALE_FULL; Laya.stage.screenMode Stage.SCREEN_HORIZONTAL; this._scene new Scene3D(); Laya.stage.addChild(this._scene); const camera new Camera(0, 60, 0, 20); camera.transform.position new Vector3(0, 2, 8); camera.transform.rotate(new Vector3(-15, 0, 0), true, false); camera.clearColor new Vector4(0.15, 0.15, 0.18, 1); this._scene.addChild(camera); const light new DirectionLight(); light.color new Vector3(1, 1, 1); light.transform.translate(new Vector3(0, 5, -3)); this._scene.addChild(light); // 后面章节会讲到 FilePicker 和 ParticleLoader } }逻辑说明Laya3D.init(0, 0)里两个0表示不加载预置资源和物理系统对于纯预览demo可以省掉启动开销。相机用60度透视视角放在(0, 2, 8)稍微俯视往下看这样粒子播放时有立体感。DirectionLight的位置本身无所谓方向光只关心方向translate之后默认指向原点即可。参数说明Camera的四个参数分别是fieldOfView、aspectRatio、nearPlane和farPlane这里写的是60度视角、自适应宽高比、近裁剪0和远裁剪20。如果粒子范围特别大记得把farPlane调大到100以上否则离太远的粒子会被裁剪掉。3. 核心模块拆解从文件选择框到粒子播放的完整链路3.1 文件选择框的DOM封装input的隐藏与复用所有DOM操作集中在FilePicker里。一个容易踩的坑是不要每次打开都创建新的input那样会产生大量监听器更稳妥的做法是页面初始化时创建一个隐藏input只绑定一次change事件之后反复使用。按钮点击时调用input.click()浏览器会弹出系统文件选择框。// src/ui/FilePicker.ts import { Laya, Button, Event, Handler, Scene3D } from Laya; export class FilePicker { private _input: HTMLInputElement; constructor(private _scene: Scene3D, private _onFile: Handler) { this._input document.createElement(input); this._input.type file; this._input.accept .lh,.json; this._input.style.display none; document.body.appendChild(this._input); this._input.addEventListener(change, this._onNativeChange); // 场景里的按钮实例化之后由外部调用 bindButton } bindButton(btn: Button): void { btn.on(Event.CLICK, this, this._onLayaClick); } private _onLayaClick(): void { this._input.value ; this._input.click(); } private _onNativeChange (e: Event): void { const input e.target as HTMLInputElement; const file input.files input.files[0]; if (!file) return; this._onFile.runWith(file); }; }逻辑说明_input.value 这段非常关键它清空input让用户可以连续选择同一个文件而不被浏览器跳过change事件。_onLayaClick绑定到Laya UI按钮_onNativeChange是原生DOM监听器两个事件体系在这里交汇但各干各的不会冲突。参数说明accept.lh,.json表示文件选择框默认只显示这两种扩展名。实际Unity导出的粒子配置文件大多数是.lh但也有些旧版本是json场景文件所以两者都放进去。你要支持更多资源类型比如.t3d就在accept里追加。3.2 把本地文件变成Laya能懂的URL拿到File对象后最直接的思路是把它变成URL。URL.createObjectURL(file)会生成一个blob链接浏览器允许Laya的Loader直接读取。但这里有个隐藏问题blob链接没有文件名也没有扩展名Loader靠扩展名识别资源类型时会失败。我们的对策是不依赖扩展名而是显式告诉Loader要按Scene3D类型去解析。// src/core/ParticleLoader.ts import { Loader, Handler, Laya, Scene3D, Vector3 } from Laya; export class ParticleLoader { private _current: Scene3D | null null; private _currentUrl: string | null null; load(file: File, scene: Scene3D): void { const url URL.createObjectURL(file); if (this._current) { this._current.destroy(); this._current null; } if (this._currentUrl) { URL.revokeObjectURL(this._currentUrl); this._currentUrl null; } this._currentUrl url; Loader.create(url, Handler.create(this, this._onLoaded, [scene, url]), null, Scene3D ); } private _onLoaded(scene: Scene3D, url: string): void { const particle Loader.getRes(url) as Scene3D; URL.revokeObjectURL(url); this._currentUrl null; particle.transform.position new Vector3(0, 0, 0); scene.addChild(particle); this._current particle; } }逻辑说明Loader.create的第三个参数是优先级这里传null第四个参数是关键写成Scene3D后Laya会直接走3D场景解析器不再关心URL后缀是什么。加载完成的回调里通过Loader.getRes(url)拿到解析好的Scene3D实例再挂到主场景上。参数说明Handler.create(this, this._onLoaded, [scene, url])中后面的回调参数会追加到方法参数之后所以我写的_onLoaded(scene, url)能同时拿到主场景和当前blob URL。这里有一个容易被忽略的内存问题加载成功后要立即URL.revokeObjectURL否则每次预览都泄漏一段blob内存。3.3 粒子节点加载、挂接与播放控制.lh加载出来的是一个Scene3D对象它内部可能挂着一个或几个粒子系统。Unity粒子导出时通常自带playOnAwake属性所以很多情况下不用手动播放但为了让预览行为可控我还是会在回调里遍历一遍所有粒子组件主动调用play()同时如果有播放循环开关也一并设上。private _onLoaded(scene: Scene3D, url: string): void { const particleScene Loader.getRes(url) as Scene3D; URL.revokeObjectURL(url); particleScene.transform.position new Vector3(0, 1, 0); scene.addChild(particleScene); this._current particleScene; const systems particleScene.getComponents(ParticleSystem) as ParticleSystem[]; for (const ps of systems) { ps.loop true; ps.play(); } }逻辑说明getComponents(ParticleSystem)会遍历该节点树把类型匹配的粒子组件全部找出来。循环里设置loop true保证美术资源在预览时不会播完一遍就停。如果某些.lh导出时把循环关闭这里就是统一恢复循环的好位置。参数说明把粒子场景放在(0, 1, 0)而不是原点是因为很多Unity粒子的发射器位于原点放在y1可以让粒子主体刚好落在相机中央。如果你的相机位置改了这里也要跟着调。另外getComponents在Unity导出的.lh上可能拿到多个粒子组件例如同时有拖尾和主体粒子循环播放所有组件是合理的但如果你的场景里还包含了非粒子的骨骼动画节点就需要增加一个白名单判断。4. 预览粒子时的避坑与排查从黑屏到坐标错乱4.1 文件选择与加载阶段的坑现象一点击Laya按钮后文件选择框没有任何响应。原因最常见的是input没有append到DOM树上。隐藏元素如果只存在于变量里浏览器在某些情况下会直接丢弃click()调用尤其在全屏WebGL Canvas覆盖页面时事件焦点被引擎抢走。解决办法是把input挂到body下并在按钮点击时加一点延迟private _onLayaClick(): void { if (!this._input.parentNode) { document.body.appendChild(this._input); } this._input.value ; setTimeout(() this._input.click(), 30); }现象二选择.lh后Loader回调永远不执行控制台静悄悄。原因绝大多数情况是Loader没有把blob URL识别成Scene3D。objectURL形如blob:http://localhost:8080/3f2d4c1e没有任何扩展名Loader内部无法推断加载器于是无限等资源返回。解决办法是像前面代码一样强制传第四个参数Scene3D。如果再遇到不识别可以用一行代码验证文件内容是不是合法JSONconst reader new FileReader(); reader.onload () console.log(reader.result?.toString().substring(0, 200)); reader.readAsText(file);如果输出的是{version:...}类似结构那说明.lh内容没问题问题只出在加载类型上。现象三每次加载新文件前预览旧粒子会闪一下黑屏或报错。原因我把_current.destroy()和URL.revokeObjectURL放在了load方法的开头但其实上一轮加载可能还没有完全结束旧场景被过早销毁。解决办法是只在_onLoaded回调里做销毁并加一个_loading标志新文件选择时先清空input但不销毁旧场景等新的onLoaded触发时才替换。我一般在工程里会这样写if (this._current) { this._current.destroy(); this._current null; }这行必须放在Loader.create之前但destroy之后一定要立刻把_current置空避免后面回调重复销毁。4.2 粒子显示与资源依赖的坑现象一粒子网格加载出来了但材质是紫红色或全黑。原因.lh内部引用了外部贴图文件例如texture:textures/fire_flash.png。当我们把.lh通过blob URL加载时浏览器会尝试从当前页面地址去解析相对路径textures/...结果自然是404贴图加载不到材质就变成紫红色或黑色。解决办法分两种如果只是临时看一眼把贴图资源放到页面目录下并让.lh里的路径改成相对页面路径如果是完整的多文件预览必须走第5章讲的“文件映射替换”方案把所有贴图路径替换成对应的objectURL。现象二预览的粒子方向和Unity编辑器里明显不一样转了个90度或180度。原因Unity和Laya的坐标系都是右手系但导出插件在不同版本里对坐标轴转换的处理不一致。有的勾选“坐标轴转换”后导出模型会多一层旋转有的没有勾选导致.lh根节点带了一个不该有的旋转量。解决办法是不要动粒子内部节点只调整加载出来的根节点。例如Unity粒子通常是Y轴向上的如果发现粒子倒立就在_onLoaded里补一次旋转particleScene.transform.rotate(new Vector3(0, 0, 180), true, false);如果还是不对就分别试0/90/180/270四个角度找对一次后把这个角度记录下来作为可配置参数。现象三连续预览十几个文件后页面帧率明显下降。原因文件虽然销毁了但贴图资源没有从Laya的资源缓存里释放同时objectURL如果忘了revoke浏览器的blob内存会一直占着。解决办法是在destroy场景后调用资源回收接口Laya.ResourceUtils.unDestroyResource(this._current.destroy());或者更简单粗暴地直接使用Laya.loader.clearRes(url)清理掉对应资源。关键是把“销毁场景、清资源、释放blob URL”三步写进同一个流程少一步后面都会找上门。5. 二次开发扩展从单个文件到多资源粒子包的完整预览如果你只拿这个demo去加载一个.lh文件贴图依赖一定会成为拦路虎。常见做法是让文件选择框支持多选用户把整个粒子资源包里的文件都选上我们在前端生成一个“文件名 → objectURL”的映射然后在加载前修改.lh里的JSON路径引用。这才是真正能在日常工作中落地的形态。具体改造思路是把input从单选改成多选或文件夹选择然后在change回调里遍历所有File对象。对于.lh主文件读取文本并解析成JSON对于其余贴图文件按文件名生成blob URL。最后递归遍历JSON对象只要发现字符串值是一个图片相对路径就替换成对应的objectURL。代码片段如下async loadParticlePack(files: FileList): Promisevoid { const list Array.from(files); const lhFile list.find(f f.name.endsWith(.lh)); if (!lhFile) return; const urlMap new Mapstring, string(); list.forEach(f urlMap.set(f.name, URL.createObjectURL(f))); const source await lhFile.text(); const json JSON.parse(source); this.replaceTexturePath(json, urlMap); const blob new Blob([JSON.stringify(json)], { type: application/json }); const url URL.createObjectURL(blob); Loader.create(url, Handler.create(this, this._onLoaded, [this._scene, url]), null, Scene3D); } replaceTexturePath(node: any, map: Mapstring, string): void { if (Array.isArray(node)) { node.forEach(item this.replaceTexturePath(item, map)); return; } if (node typeof node object) { for (const key of Object.keys(node)) { const value node[key]; if (typeof value string map.has(value)) { node[key] map.get(value) ?? value; } else if (typeof value object value ! null) { this.replaceTexturePath(value, map); } } } }逻辑说明replaceTexturePath做的是深度优先遍历遇到字符串就判断是否在urlMap里。因为.lh里的贴图路径可能是textures/fire1.png而文件名映射是fire1.png这段代码还需要再加工一下匹配逻辑比如提取最后一个斜杠后的文件名再比对这是二开时最值得打磨的部分。这段代码跑通后预览工具就从“看单文件”进化成“看整个特效包”了。从那以后我每次做资源预览类工具都会强制走一遍“先选文件、再验依赖、最后再销毁”的流程避免页面卡成PPT新接手Laya资源联调的同事也能拿着这个壳子快速上手不用再为了看一个粒子特效去把整个游戏工程跑起来。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/17 15:32:37 · 阅读 1.2k LayaAir3加载Unity粒子：本地文件浏览器预览工具实现与踩坑指南
简介面向Laya引擎开发者的粒子效果预览Demo演示点击按钮弹出本地文件选择框导入Unity导出的.lh粒子文件支持最多两层嵌套粒子的加载可在播放与停止间切换更换文件不需重新运行。提供键盘与鼠标视角控制实现3D场景与网页DOM的混合交互适合学习Laya粒子系统加载、文件选择与前端交互。资源包共302个文件压缩包约23.43MB主要包含67个JavaScript脚本、51张PNG贴图、18个lmat材质文件、13个JSON配置、6个.lh粒子场景文件及readme说明构成一套可直接导入LayaIDE运行的完整示例工程附带日志文件可辅助排查运行异常。已有742人学习浏览测试环境为LayaIDE。对具备一定Laya基础的中级开发者可据此快速搭建粒子预览工具并扩展多文件选择、粒子层级解析或播放控制等功能也可作为美术与前端协作时的效果预览桥接方案减少重复编译和联调等待。1. 项目速览一个让Unity粒子在浏览器里直接预览的Laya小工具这个Laya预览Unity导出粒子demo最初解决的是我桌面上一直放着的那个痛点美术同事扔来一份Unity粒子特效预处理文件我却没法在浏览器里直接确认效果。以前要么临时改游戏内入口要么先把资源倒进Laya工程再跑一遍来回折腾几十分钟。这个demo把流程压缩成三步点一个按钮、弹出本地文件选择框、选中Unity导出的.lh粒子文件Laya引擎立刻把它实例化到3D场景里循环播放。它对你的价值在于把“资源预览”从游戏项目里剥离开。做Laya游戏开发、特效联调或者资源打包前检查的同学都可以直接拿来用更准确地说它是一份“Laya 文件操作DOM 粒子系统”的最小可跑样板。懂了这个项目你以后再接到类似“把本地文件拖进页面预览”的需求就有了可复制的骨架。2. 技术选型与目录结构用LayaAir3和DOM文件桥接搭起预览骨架2.1 为什么是LayaAir3 原生DOM而不是全引擎内置UI预览场景有一个明显特点文件来源是本地磁盘不是服务器资源也不是游戏内道具。如果全部用Laya内置UI来实现文件选择就得在场景里拼一个复杂的输入框列表还得处理运行时没有DOM访问权限的问题完全绕远路。原生input typefile加上一次click()跳转举手之劳就能拿到用户选择的文件句柄这是浏览器本身给的能力没必要在引擎里再造轮子。技术栈上这个demo使用LayaAir 3.x作为渲染与粒子解析核心。Unity粒子系统通过官方导出插件序列化成.lh文件本质上是一个JSON结构的场景配置里面记录了粒子发射器参数、材质引用和贴图路径。LayaAir的Scene3D加载器可以直接解析这种配置把粒子节点还原出来所以我们不需要自己写粒子运动学解析只需要把文件内容正确交给Loader。模块分工上我习惯拆成三个文件入口负责3D场景和相机初始化文件选择封装成独立的DOM工具粒子加载单独放一个加载器类。目录结构大概长这样laya-particle-preview/ ├─ src/ │ ├─ Main.ts // 入口创建3D场景、相机、光照 │ ├─ ui/ │ │ └─ FilePicker.ts // 隐藏input点击按钮触发原生文件选择 │ └─ core/ │ └─ ParticleLoader.ts // objectURL生成、Loader加载、粒子挂接 ├─ assets/ │ └─ effects/ // 测试用的.lh粒子文件 ├─ bin/js/ // 编译输出 └─ index.html // 浏览器入口这个结构的好处是文件选择和粒子加载相互独立下次你想改成“拖拽文件进页面”只需要动FilePickerParticleLoader完全不用碰。2.2 工程目录与场景初始化在LayaAir IDE里新建3D项目后入口脚本Main.ts负责最基础的环境搭建。常见做法是Laya3D.init(0, 0)开启WebGL渲染stage全屏然后创建一个空场景和透视相机。因为粒子预览通常需要一定深度感我会挂一盏方向光避免粒子材质因为无光而变黑。// src/Main.ts import { Laya3D, Stage, Scene3D, Camera, DirectionLight, Vector3 } from Laya; export default class Main { private _scene: Scene3D; constructor() { Laya3D.init(0, 0); Laya.stage.scaleMode Stage.SCALE_FULL; Laya.stage.screenMode Stage.SCREEN_HORIZONTAL; this._scene new Scene3D(); Laya.stage.addChild(this._scene); const camera new Camera(0, 60, 0, 20); camera.transform.position new Vector3(0, 2, 8); camera.transform.rotate(new Vector3(-15, 0, 0), true, false); camera.clearColor new Vector4(0.15, 0.15, 0.18, 1); this._scene.addChild(camera); const light new DirectionLight(); light.color new Vector3(1, 1, 1); light.transform.translate(new Vector3(0, 5, -3)); this._scene.addChild(light); // 后面章节会讲到 FilePicker 和 ParticleLoader } }逻辑说明Laya3D.init(0, 0)里两个0表示不加载预置资源和物理系统对于纯预览demo可以省掉启动开销。相机用60度透视视角放在(0, 2, 8)稍微俯视往下看这样粒子播放时有立体感。DirectionLight的位置本身无所谓方向光只关心方向translate之后默认指向原点即可。参数说明Camera的四个参数分别是fieldOfView、aspectRatio、nearPlane和farPlane这里写的是60度视角、自适应宽高比、近裁剪0和远裁剪20。如果粒子范围特别大记得把farPlane调大到100以上否则离太远的粒子会被裁剪掉。3. 核心模块拆解从文件选择框到粒子播放的完整链路3.1 文件选择框的DOM封装input的隐藏与复用所有DOM操作集中在FilePicker里。一个容易踩的坑是不要每次打开都创建新的input那样会产生大量监听器更稳妥的做法是页面初始化时创建一个隐藏input只绑定一次change事件之后反复使用。按钮点击时调用input.click()浏览器会弹出系统文件选择框。// src/ui/FilePicker.ts import { Laya, Button, Event, Handler, Scene3D } from Laya; export class FilePicker { private _input: HTMLInputElement; constructor(private _scene: Scene3D, private _onFile: Handler) { this._input document.createElement(input); this._input.type file; this._input.accept .lh,.json; this._input.style.display none; document.body.appendChild(this._input); this._input.addEventListener(change, this._onNativeChange); // 场景里的按钮实例化之后由外部调用 bindButton } bindButton(btn: Button): void { btn.on(Event.CLICK, this, this._onLayaClick); } private _onLayaClick(): void { this._input.value ; this._input.click(); } private _onNativeChange (e: Event): void { const input e.target as HTMLInputElement; const file input.files input.files[0]; if (!file) return; this._onFile.runWith(file); }; }逻辑说明_input.value 这段非常关键它清空input让用户可以连续选择同一个文件而不被浏览器跳过change事件。_onLayaClick绑定到Laya UI按钮_onNativeChange是原生DOM监听器两个事件体系在这里交汇但各干各的不会冲突。参数说明accept.lh,.json表示文件选择框默认只显示这两种扩展名。实际Unity导出的粒子配置文件大多数是.lh但也有些旧版本是json场景文件所以两者都放进去。你要支持更多资源类型比如.t3d就在accept里追加。3.2 把本地文件变成Laya能懂的URL拿到File对象后最直接的思路是把它变成URL。URL.createObjectURL(file)会生成一个blob链接浏览器允许Laya的Loader直接读取。但这里有个隐藏问题blob链接没有文件名也没有扩展名Loader靠扩展名识别资源类型时会失败。我们的对策是不依赖扩展名而是显式告诉Loader要按Scene3D类型去解析。// src/core/ParticleLoader.ts import { Loader, Handler, Laya, Scene3D, Vector3 } from Laya; export class ParticleLoader { private _current: Scene3D | null null; private _currentUrl: string | null null; load(file: File, scene: Scene3D): void { const url URL.createObjectURL(file); if (this._current) { this._current.destroy(); this._current null; } if (this._currentUrl) { URL.revokeObjectURL(this._currentUrl); this._currentUrl null; } this._currentUrl url; Loader.create(url, Handler.create(this, this._onLoaded, [scene, url]), null, Scene3D ); } private _onLoaded(scene: Scene3D, url: string): void { const particle Loader.getRes(url) as Scene3D; URL.revokeObjectURL(url); this._currentUrl null; particle.transform.position new Vector3(0, 0, 0); scene.addChild(particle); this._current particle; } }逻辑说明Loader.create的第三个参数是优先级这里传null第四个参数是关键写成Scene3D后Laya会直接走3D场景解析器不再关心URL后缀是什么。加载完成的回调里通过Loader.getRes(url)拿到解析好的Scene3D实例再挂到主场景上。参数说明Handler.create(this, this._onLoaded, [scene, url])中后面的回调参数会追加到方法参数之后所以我写的_onLoaded(scene, url)能同时拿到主场景和当前blob URL。这里有一个容易被忽略的内存问题加载成功后要立即URL.revokeObjectURL否则每次预览都泄漏一段blob内存。3.3 粒子节点加载、挂接与播放控制.lh加载出来的是一个Scene3D对象它内部可能挂着一个或几个粒子系统。Unity粒子导出时通常自带playOnAwake属性所以很多情况下不用手动播放但为了让预览行为可控我还是会在回调里遍历一遍所有粒子组件主动调用play()同时如果有播放循环开关也一并设上。private _onLoaded(scene: Scene3D, url: string): void { const particleScene Loader.getRes(url) as Scene3D; URL.revokeObjectURL(url); particleScene.transform.position new Vector3(0, 1, 0); scene.addChild(particleScene); this._current particleScene; const systems particleScene.getComponents(ParticleSystem) as ParticleSystem[]; for (const ps of systems) { ps.loop true; ps.play(); } }逻辑说明getComponents(ParticleSystem)会遍历该节点树把类型匹配的粒子组件全部找出来。循环里设置loop true保证美术资源在预览时不会播完一遍就停。如果某些.lh导出时把循环关闭这里就是统一恢复循环的好位置。参数说明把粒子场景放在(0, 1, 0)而不是原点是因为很多Unity粒子的发射器位于原点放在y1可以让粒子主体刚好落在相机中央。如果你的相机位置改了这里也要跟着调。另外getComponents在Unity导出的.lh上可能拿到多个粒子组件例如同时有拖尾和主体粒子循环播放所有组件是合理的但如果你的场景里还包含了非粒子的骨骼动画节点就需要增加一个白名单判断。4. 预览粒子时的避坑与排查从黑屏到坐标错乱4.1 文件选择与加载阶段的坑现象一点击Laya按钮后文件选择框没有任何响应。原因最常见的是input没有append到DOM树上。隐藏元素如果只存在于变量里浏览器在某些情况下会直接丢弃click()调用尤其在全屏WebGL Canvas覆盖页面时事件焦点被引擎抢走。解决办法是把input挂到body下并在按钮点击时加一点延迟private _onLayaClick(): void { if (!this._input.parentNode) { document.body.appendChild(this._input); } this._input.value ; setTimeout(() this._input.click(), 30); }现象二选择.lh后Loader回调永远不执行控制台静悄悄。原因绝大多数情况是Loader没有把blob URL识别成Scene3D。objectURL形如blob:http://localhost:8080/3f2d4c1e没有任何扩展名Loader内部无法推断加载器于是无限等资源返回。解决办法是像前面代码一样强制传第四个参数Scene3D。如果再遇到不识别可以用一行代码验证文件内容是不是合法JSONconst reader new FileReader(); reader.onload () console.log(reader.result?.toString().substring(0, 200)); reader.readAsText(file);如果输出的是{version:...}类似结构那说明.lh内容没问题问题只出在加载类型上。现象三每次加载新文件前预览旧粒子会闪一下黑屏或报错。原因我把_current.destroy()和URL.revokeObjectURL放在了load方法的开头但其实上一轮加载可能还没有完全结束旧场景被过早销毁。解决办法是只在_onLoaded回调里做销毁并加一个_loading标志新文件选择时先清空input但不销毁旧场景等新的onLoaded触发时才替换。我一般在工程里会这样写if (this._current) { this._current.destroy(); this._current null; }这行必须放在Loader.create之前但destroy之后一定要立刻把_current置空避免后面回调重复销毁。4.2 粒子显示与资源依赖的坑现象一粒子网格加载出来了但材质是紫红色或全黑。原因.lh内部引用了外部贴图文件例如texture:textures/fire_flash.png。当我们把.lh通过blob URL加载时浏览器会尝试从当前页面地址去解析相对路径textures/...结果自然是404贴图加载不到材质就变成紫红色或黑色。解决办法分两种如果只是临时看一眼把贴图资源放到页面目录下并让.lh里的路径改成相对页面路径如果是完整的多文件预览必须走第5章讲的“文件映射替换”方案把所有贴图路径替换成对应的objectURL。现象二预览的粒子方向和Unity编辑器里明显不一样转了个90度或180度。原因Unity和Laya的坐标系都是右手系但导出插件在不同版本里对坐标轴转换的处理不一致。有的勾选“坐标轴转换”后导出模型会多一层旋转有的没有勾选导致.lh根节点带了一个不该有的旋转量。解决办法是不要动粒子内部节点只调整加载出来的根节点。例如Unity粒子通常是Y轴向上的如果发现粒子倒立就在_onLoaded里补一次旋转particleScene.transform.rotate(new Vector3(0, 0, 180), true, false);如果还是不对就分别试0/90/180/270四个角度找对一次后把这个角度记录下来作为可配置参数。现象三连续预览十几个文件后页面帧率明显下降。原因文件虽然销毁了但贴图资源没有从Laya的资源缓存里释放同时objectURL如果忘了revoke浏览器的blob内存会一直占着。解决办法是在destroy场景后调用资源回收接口Laya.ResourceUtils.unDestroyResource(this._current.destroy());或者更简单粗暴地直接使用Laya.loader.clearRes(url)清理掉对应资源。关键是把“销毁场景、清资源、释放blob URL”三步写进同一个流程少一步后面都会找上门。5. 二次开发扩展从单个文件到多资源粒子包的完整预览如果你只拿这个demo去加载一个.lh文件贴图依赖一定会成为拦路虎。常见做法是让文件选择框支持多选用户把整个粒子资源包里的文件都选上我们在前端生成一个“文件名 → objectURL”的映射然后在加载前修改.lh里的JSON路径引用。这才是真正能在日常工作中落地的形态。具体改造思路是把input从单选改成多选或文件夹选择然后在change回调里遍历所有File对象。对于.lh主文件读取文本并解析成JSON对于其余贴图文件按文件名生成blob URL。最后递归遍历JSON对象只要发现字符串值是一个图片相对路径就替换成对应的objectURL。代码片段如下async loadParticlePack(files: FileList): Promisevoid { const list Array.from(files); const lhFile list.find(f f.name.endsWith(.lh)); if (!lhFile) return; const urlMap new Mapstring, string(); list.forEach(f urlMap.set(f.name, URL.createObjectURL(f))); const source await lhFile.text(); const json JSON.parse(source); this.replaceTexturePath(json, urlMap); const blob new Blob([JSON.stringify(json)], { type: application/json }); const url URL.createObjectURL(blob); Loader.create(url, Handler.create(this, this._onLoaded, [this._scene, url]), null, Scene3D); } replaceTexturePath(node: any, map: Mapstring, string): void { if (Array.isArray(node)) { node.forEach(item this.replaceTexturePath(item, map)); return; } if (node typeof node object) { for (const key of Object.keys(node)) { const value node[key]; if (typeof value string map.has(value)) { node[key] map.get(value) ?? value; } else if (typeof value object value ! null) { this.replaceTexturePath(value, map); } } } }逻辑说明replaceTexturePath做的是深度优先遍历遇到字符串就判断是否在urlMap里。因为.lh里的贴图路径可能是textures/fire1.png而文件名映射是fire1.png这段代码还需要再加工一下匹配逻辑比如提取最后一个斜杠后的文件名再比对这是二开时最值得打磨的部分。这段代码跑通后预览工具就从“看单文件”进化成“看整个特效包”了。从那以后我每次做资源预览类工具都会强制走一遍“先选文件、再验依赖、最后再销毁”的流程避免页面卡成PPT新接手Laya资源联调的同事也能拿着这个壳子快速上手不用再为了看一个粒子特效去把整个游戏工程跑起来。希望帮到你。本文还有配套的精品资源点击获取