尧图网页设计 
图形学游戏开发3D渲染【免费下载链接】Babylon.jsBabylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.项目地址https://gitcode.com/gh_mirrors/ba/Babylon.js点击查看免费下载Node Particle EditorNPE是 Babylon.js 家族中专用于「节点式粒子系统」的可视化编辑器扩展它允许开发者以图形化节点连线的方式创建或更新任意NodeParticleSet节点粒子系统集合并将编辑结果直接序列化回场景使用。本文基于仓库 packages/tools/nodeParticleEditor/README.md 展开结合编辑器源码与构建配置完整讲解两种接入方式——在线动态加载与离线手动引用——并深入说明Show()方法的参数体系、底层调用链与序列化机制帮助你在自己的项目中把 NPE 快速嵌入到应用页面。Node Particle Editor 是什么从仓库的包声明看该编辑器位于 packages/tools/nodeParticleEditor/package.json包名为tools/node-particle-editor是一个基于 React 18 构建的独立前端应用。它的核心价值在于图形化编辑通过节点图graph编辑器对粒子系统的发射、更新、触发器、纹理、调试等节点进行连线与参数配置对象绑定直接操作NodeParticleSystemSet编辑结果可立即在宿主场景host scene中预览序列化复用节点布局与系统配置可被序列化为 JSON随后反序列化回任意场景实现粒子效果的保存、分享与离线复用。编辑器的对外入口是一个静态类BABYLON.NodeParticleEditor通过其Show方法即可启动编辑器实例。在线方式一行代码动态加载编辑器这是官方文档推荐的首选接入方式。只需要调用BABYLON.NodeParticleEditor类的Show方法BABYLON.NodeParticleEditor.Show({hostElement: document.getElementById(host)});该调用会动态检索库文件babylon.nodeParticleEditor.js下载并自动添加到当前 HTML 页面中因此使用前无需在页面中预先引入任何编辑器脚本只需确保BABYLON核心引擎已可用即可。从源码层面看这一步的完整行为由 packages/tools/nodeParticleEditor/src/nodeParticleEditor.ts 中的NodeParticleEditor.Show静态方法实现其执行流程为注册编辑器的显示管理器DisplayManager、属性面板管理器与类型登记表完成节点图系统初始化若未提供hostElement则通过CreatePopup自动创建一个 1000×800 的独立弹窗作为宿主构造GlobalState全局状态容器挂载粒子系统集合、宿主元素/文档/窗口/场景等上下文通过createRoot(hostElement).render(graphEditor)将 React 编写的节点图编辑器渲染到宿主元素绑定beforeunload、场景onDisposeObservable等生命周期钩子在页面刷新或场景销毁时自动关闭弹窗避免内存与窗口泄漏。如果你希望把编辑器嵌入页面中的一个既有div而不是弹窗形式只需把该元素的引用作为hostElement传入即可这正是 README 示例的用法。离线方式手动引入构建产物当应用运行环境无法访问外网例如内网部署、离线演示或受控环境时需要手动将编辑器脚本引入 HTML 页面script srcbabylon.nodeParticleEditor.js /该脚本是编辑器的构建产物。在当前仓库中你可以在 packages/tools/nodeParticleEditor/public/babylon.nodeParticleEditor.js 找到现成的构建文件同时包的部署脚本build:deploymentvite build也会把最终产物输出到dist目录。引入该脚本后BABYLON.NodeParticleEditor全局对象即被挂载随后同样通过Show方法启动编辑器。两种方式的本质区别只在于脚本的加载时机与来源在线方式由Show内部动态注入script并按需下载离线方式则由开发者在构建期或部署期以静态script标签预先引入编辑器本身的初始化入口是同一套代码。Show 方法参数详解从源码读懂配置项Show方法接受一个INodeEditorOptions配置对象其完整字段定义在 packages/tools/nodeParticleEditor/src/nodeParticleEditor.ts各参数说明如下参数类型必填说明nodeParticleSetNodeParticleSystemSet是要编辑的节点粒子系统集合编辑器围绕它展开所有节点操作hostSceneScene是宿主场景编辑器在场景中完成粒子预览与运行时更新hostElementHTMLElement否编辑器挂载的 DOM 元素不传时自动创建 1000×800 弹窗customSave{ label: string; action: (data: string) Promisevoid }否自定义保存按钮的标签与回调回调接收序列化 JSON 字符串customLoadObservableObservableany否自定义加载事件订阅后可注入外部数据完成反序列化与图重建backgroundColorColor4否编辑器预览区背景色disposeOnCloseboolean否编辑器关闭时是否销毁粒子系统集合默认true一个更完整的在线调用示例同时指定宿主元素、背景色与自定义保存逻辑BABYLON.NodeParticleEditor.Show({ hostElement: document.getElementById(host), nodeParticleSet: myParticleSet, // 你的 NodeParticleSystemSet hostScene: myScene, // 你的场景 backgroundColor: new BABYLON.Color4(0.1, 0.1, 0.3, 1.0), disposeOnClose: false, customSave: { label: 保存到项目, action: async (data) { // data 为编辑器导出的 JSON 字符串可上传到服务器或写入本地 await myServer.saveParticle(myParticle, data); } } });从实现细节看src/nodeParticleEditor.tsbackgroundColor会被写入GlobalState并用于预览区渲染disposeOnClose通过options.disposeOnClose ?? true采用默认值truecustomLoadObservable订阅后会调用SerializationTools.Deserialize(data, globalState)解析数据并通过onResetRequiredObservable与onBuildRequiredObservable通知编辑器重建节点图。数据流与序列化编辑器如何与场景双向同步编辑器与场景之间的数据交换由 packages/tools/nodeParticleEditor/src/serializationTools.ts 完成它封装了三个关键动作Serialize先通过UpdateLocations把每个节点的坐标、折叠状态写入particleSet.editorData.locations再调用粒子系统集合自身的serialize(selectedBlocks)生成完整的序列化对象最终JSON.stringify(obj, undefined, 2)输出带缩进的可读 JSON——这就是customSave回调收到的data。Deserialize调用nodeParticleSet.parseSerializedObject(serializationObject)将 JSON 还原为粒子系统集合并触发onIsLoadingChanged通知界面结束加载状态。AddFrameToParticleSystemSet支持将某个「帧」Frame即节点图分组单独反序列化并合并进现有系统集合通过onImportFrameObservable通知图编辑器刷新。因此无论在线还是离线方式你在编辑器里调整的每个参数、移动的每个节点位置最终都能通过Serialize持久化为 JSON反之通过Deserialize即可把保存的效果完整还原。若使用customLoadObservable外部代码可在编辑器启动后主动推送数据实现「打开已有文件」的体验。本地开发与构建如果你需要在当前仓库中调试或重新构建该编辑器可以进入packages/tools/nodeParticleEditor目录执行启动开发服务器npm run serve即vite。开发端口默认为1345可通过环境变量NPE_PORT覆盖配置见 packages/tools/nodeParticleEditor/vite.config.ts。开发模式下Vite 中间件会拦截/babylon.nodeParticleEditor.js请求并注入一个 shim 脚本把BABYLON.NodeParticleEditor.Show的参数转发为自定义事件再由入口模块动态导入编辑器主体见 src/main.ts。构建部署产物npm run build:deployment产物输出至dist即离线方式所引用的babylon.nodeParticleEditor.js来源之一。编译类型npm run compiletsc -b配合postcompile的build-tools -c pa完成构建链。需要说明的是无论在线还是离线方式编辑器都以全局BABYLON命名空间作为运行时依赖core、loaders、materials等模块在构建时被配置为 CDN 外部依赖因此接入前必须先加载 Babylon.js 核心引擎脚本。小结Node Particle Editor 为节点式粒子系统提供了所见即所得的图形化编辑能力。接入它有两种途径在线方式通过BABYLON.NodeParticleEditor.Show({hostElement})动态加载babylon.nodeParticleEditor.js开箱即用、无需额外脚本标签离线方式则手动script srcbabylon.nodeParticleEditor.js /引入构建产物适用于无法访问外网的场景。配合INodeEditorOptions中的customSave、customLoadObservable、backgroundColor、disposeOnClose等选项以及底层Serialize/Deserialize序列化机制你可以将粒子编辑能力完整地嵌入自己的应用实现粒子效果的可视化编辑、保存与跨场景复用。赞分享图形学游戏开发3D渲染【免费下载链接】Babylon.jsBabylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.项目地址https://gitcode.com/gh_mirrors/ba/Babylon.js点击查看免费下载相关推荐LangChain for Go 文本摘要链实战基于 Vertex AI 的 LLM 摘要示例全解析LangChain for Go 文本摘要链实战基于 Vertex AI 的 LLM 摘要示例全解析 本篇技术指南以 examples/llmsummariz图形学游戏开发3D渲染flatpickr离线使用指南本地化资源加载与PWA集成方案flatpickr离线使用指南本地化资源加载与PWA集成方案 痛点直击你还在为日期选择器离线失效烦恼吗 在企业内网系统、移动端应用或网络不稳定环境中依赖前端UI组件PaddleSpeech 基于 Tiny 数据集的 DeepSpeech2 离线/在线 ASR 完整实战指南PaddleSpeech 基于 Tiny 数据集的 DeepSpeech2 离线/在线 ASR 完整实战指南 本篇指南以 PaddleSpeech 仓库中的 e人工智能语音音频上一篇深入 Symfony 8 框架仓库从 PHP 全栈框架到可复用组件生态的系统解读下一篇Chatbox AI桌面助手终极指南如何快速免费打造你的专属智能工作伙伴创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Babylon.js Node Particle Editor 集成指南：在线加载与离线引用的完整实战方案
图形学游戏开发3D渲染【免费下载链接】Babylon.jsBabylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.项目地址https://gitcode.com/gh_mirrors/ba/Babylon.js点击查看免费下载Node Particle EditorNPE是 Babylon.js 家族中专用于「节点式粒子系统」的可视化编辑器扩展它允许开发者以图形化节点连线的方式创建或更新任意NodeParticleSet节点粒子系统集合并将编辑结果直接序列化回场景使用。本文基于仓库 packages/tools/nodeParticleEditor/README.md 展开结合编辑器源码与构建配置完整讲解两种接入方式——在线动态加载与离线手动引用——并深入说明Show()方法的参数体系、底层调用链与序列化机制帮助你在自己的项目中把 NPE 快速嵌入到应用页面。Node Particle Editor 是什么从仓库的包声明看该编辑器位于 packages/tools/nodeParticleEditor/package.json包名为tools/node-particle-editor是一个基于 React 18 构建的独立前端应用。它的核心价值在于图形化编辑通过节点图graph编辑器对粒子系统的发射、更新、触发器、纹理、调试等节点进行连线与参数配置对象绑定直接操作NodeParticleSystemSet编辑结果可立即在宿主场景host scene中预览序列化复用节点布局与系统配置可被序列化为 JSON随后反序列化回任意场景实现粒子效果的保存、分享与离线复用。编辑器的对外入口是一个静态类BABYLON.NodeParticleEditor通过其Show方法即可启动编辑器实例。在线方式一行代码动态加载编辑器这是官方文档推荐的首选接入方式。只需要调用BABYLON.NodeParticleEditor类的Show方法BABYLON.NodeParticleEditor.Show({hostElement: document.getElementById(host)});该调用会动态检索库文件babylon.nodeParticleEditor.js下载并自动添加到当前 HTML 页面中因此使用前无需在页面中预先引入任何编辑器脚本只需确保BABYLON核心引擎已可用即可。从源码层面看这一步的完整行为由 packages/tools/nodeParticleEditor/src/nodeParticleEditor.ts 中的NodeParticleEditor.Show静态方法实现其执行流程为注册编辑器的显示管理器DisplayManager、属性面板管理器与类型登记表完成节点图系统初始化若未提供hostElement则通过CreatePopup自动创建一个 1000×800 的独立弹窗作为宿主构造GlobalState全局状态容器挂载粒子系统集合、宿主元素/文档/窗口/场景等上下文通过createRoot(hostElement).render(graphEditor)将 React 编写的节点图编辑器渲染到宿主元素绑定beforeunload、场景onDisposeObservable等生命周期钩子在页面刷新或场景销毁时自动关闭弹窗避免内存与窗口泄漏。如果你希望把编辑器嵌入页面中的一个既有div而不是弹窗形式只需把该元素的引用作为hostElement传入即可这正是 README 示例的用法。离线方式手动引入构建产物当应用运行环境无法访问外网例如内网部署、离线演示或受控环境时需要手动将编辑器脚本引入 HTML 页面script srcbabylon.nodeParticleEditor.js /该脚本是编辑器的构建产物。在当前仓库中你可以在 packages/tools/nodeParticleEditor/public/babylon.nodeParticleEditor.js 找到现成的构建文件同时包的部署脚本build:deploymentvite build也会把最终产物输出到dist目录。引入该脚本后BABYLON.NodeParticleEditor全局对象即被挂载随后同样通过Show方法启动编辑器。两种方式的本质区别只在于脚本的加载时机与来源在线方式由Show内部动态注入script并按需下载离线方式则由开发者在构建期或部署期以静态script标签预先引入编辑器本身的初始化入口是同一套代码。Show 方法参数详解从源码读懂配置项Show方法接受一个INodeEditorOptions配置对象其完整字段定义在 packages/tools/nodeParticleEditor/src/nodeParticleEditor.ts各参数说明如下参数类型必填说明nodeParticleSetNodeParticleSystemSet是要编辑的节点粒子系统集合编辑器围绕它展开所有节点操作hostSceneScene是宿主场景编辑器在场景中完成粒子预览与运行时更新hostElementHTMLElement否编辑器挂载的 DOM 元素不传时自动创建 1000×800 弹窗customSave{ label: string; action: (data: string) Promisevoid }否自定义保存按钮的标签与回调回调接收序列化 JSON 字符串customLoadObservableObservableany否自定义加载事件订阅后可注入外部数据完成反序列化与图重建backgroundColorColor4否编辑器预览区背景色disposeOnCloseboolean否编辑器关闭时是否销毁粒子系统集合默认true一个更完整的在线调用示例同时指定宿主元素、背景色与自定义保存逻辑BABYLON.NodeParticleEditor.Show({ hostElement: document.getElementById(host), nodeParticleSet: myParticleSet, // 你的 NodeParticleSystemSet hostScene: myScene, // 你的场景 backgroundColor: new BABYLON.Color4(0.1, 0.1, 0.3, 1.0), disposeOnClose: false, customSave: { label: 保存到项目, action: async (data) { // data 为编辑器导出的 JSON 字符串可上传到服务器或写入本地 await myServer.saveParticle(myParticle, data); } } });从实现细节看src/nodeParticleEditor.tsbackgroundColor会被写入GlobalState并用于预览区渲染disposeOnClose通过options.disposeOnClose ?? true采用默认值truecustomLoadObservable订阅后会调用SerializationTools.Deserialize(data, globalState)解析数据并通过onResetRequiredObservable与onBuildRequiredObservable通知编辑器重建节点图。数据流与序列化编辑器如何与场景双向同步编辑器与场景之间的数据交换由 packages/tools/nodeParticleEditor/src/serializationTools.ts 完成它封装了三个关键动作Serialize先通过UpdateLocations把每个节点的坐标、折叠状态写入particleSet.editorData.locations再调用粒子系统集合自身的serialize(selectedBlocks)生成完整的序列化对象最终JSON.stringify(obj, undefined, 2)输出带缩进的可读 JSON——这就是customSave回调收到的data。Deserialize调用nodeParticleSet.parseSerializedObject(serializationObject)将 JSON 还原为粒子系统集合并触发onIsLoadingChanged通知界面结束加载状态。AddFrameToParticleSystemSet支持将某个「帧」Frame即节点图分组单独反序列化并合并进现有系统集合通过onImportFrameObservable通知图编辑器刷新。因此无论在线还是离线方式你在编辑器里调整的每个参数、移动的每个节点位置最终都能通过Serialize持久化为 JSON反之通过Deserialize即可把保存的效果完整还原。若使用customLoadObservable外部代码可在编辑器启动后主动推送数据实现「打开已有文件」的体验。本地开发与构建如果你需要在当前仓库中调试或重新构建该编辑器可以进入packages/tools/nodeParticleEditor目录执行启动开发服务器npm run serve即vite。开发端口默认为1345可通过环境变量NPE_PORT覆盖配置见 packages/tools/nodeParticleEditor/vite.config.ts。开发模式下Vite 中间件会拦截/babylon.nodeParticleEditor.js请求并注入一个 shim 脚本把BABYLON.NodeParticleEditor.Show的参数转发为自定义事件再由入口模块动态导入编辑器主体见 src/main.ts。构建部署产物npm run build:deployment产物输出至dist即离线方式所引用的babylon.nodeParticleEditor.js来源之一。编译类型npm run compiletsc -b配合postcompile的build-tools -c pa完成构建链。需要说明的是无论在线还是离线方式编辑器都以全局BABYLON命名空间作为运行时依赖core、loaders、materials等模块在构建时被配置为 CDN 外部依赖因此接入前必须先加载 Babylon.js 核心引擎脚本。小结Node Particle Editor 为节点式粒子系统提供了所见即所得的图形化编辑能力。接入它有两种途径在线方式通过BABYLON.NodeParticleEditor.Show({hostElement})动态加载babylon.nodeParticleEditor.js开箱即用、无需额外脚本标签离线方式则手动script srcbabylon.nodeParticleEditor.js /引入构建产物适用于无法访问外网的场景。配合INodeEditorOptions中的customSave、customLoadObservable、backgroundColor、disposeOnClose等选项以及底层Serialize/Deserialize序列化机制你可以将粒子编辑能力完整地嵌入自己的应用实现粒子效果的可视化编辑、保存与跨场景复用。赞分享图形学游戏开发3D渲染【免费下载链接】Babylon.jsBabylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.项目地址https://gitcode.com/gh_mirrors/ba/Babylon.js点击查看免费下载相关推荐LangChain for Go 文本摘要链实战基于 Vertex AI 的 LLM 摘要示例全解析LangChain for Go 文本摘要链实战基于 Vertex AI 的 LLM 摘要示例全解析 本篇技术指南以 examples/llmsummariz图形学游戏开发3D渲染flatpickr离线使用指南本地化资源加载与PWA集成方案flatpickr离线使用指南本地化资源加载与PWA集成方案 痛点直击你还在为日期选择器离线失效烦恼吗 在企业内网系统、移动端应用或网络不稳定环境中依赖前端UI组件PaddleSpeech 基于 Tiny 数据集的 DeepSpeech2 离线/在线 ASR 完整实战指南PaddleSpeech 基于 Tiny 数据集的 DeepSpeech2 离线/在线 ASR 完整实战指南 本篇指南以 PaddleSpeech 仓库中的 e人工智能语音音频上一篇深入 Symfony 8 框架仓库从 PHP 全栈框架到可复用组件生态的系统解读下一篇Chatbox AI桌面助手终极指南如何快速免费打造你的专属智能工作伙伴创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考