科研自动驾驶物理引擎【免费下载链接】webotsWebots Robot Simulator项目地址https://gitcode.com/gh_mirrors/web/webots点击查看免费下载Webots 提供了一项把 3D 仿真世界发布到 Web 的核心能力将世界导出为一个可交互的 HTML5 页面Web Scene。本文围绕 docs/guide/web-scene.md 系统讲解 Web Scene 的导出流程、产物结构W3D/HTML/CSS、webots-viewWeb Component 的编程接口与嵌入方式并结合仓库源码揭示其底层实现最后给出 WebGL 2 兼容性与本地文件访问限制的完整解决方案。什么是 Web SceneWeb Scene 是 Webots 针对把仿真世界发布到网页这一场景提供的导出功能Webots 可以把一个世界导出为交互式 3DHTML页面任何支持 WebGL 2 的现代浏览器都可以打开并自由浏览 3D 场景。这一特性对在 Web 上展示 Webots 创建的世界尤为实用。导出过程中Webots 会同时生成三个文件产物说明W3D文件包含世界的图形信息。W3D是 Webots 自定义的、基于XML的 3D 计算机图形表示格式HTML5页面内嵌一个 Webots Player用于渲染和展示W3D文件CSS文件用于样式化上述HTML5页面导出的页面可以在任何现代 Web 浏览器中打开具体支持范围见技术栈与兼容性限制一节。页面中的 3D 导航与 Webots 内部导航一致既支持鼠标操作也支持触摸屏操作。从源码实现看整个导出流程以WbWorld::exportAsHtml()为核心src/webots/nodes/utils/WbWorld.cpp#L285-L364它依次调用exportAsW3d()写出.w3d文件再以w3d_playback.css与w3d_playback.html为模板、通过字符串替换%w3dFilename%、%title%、%description%、%cssName%、%jsonName%等占位符生成配套的 CSS 与 HTML。其中WbWriter在写入.w3d时会切换到 W3D 输出模式src/webots/vrml/WbWriter.cpp#L55-L56对字段名使用w3dQuote引号规则序列化。如何导出 Web Scene导出 Web Scene 的操作路径非常简单在 Webots 菜单中选择Share...菜单项打开共享对话框选择导出目标上传到 webots.cloud 或保存为本地文件点击Export scene按钮开始导出导出完成后Webots 会询问是否在默认 Web 浏览器中播放生成的文件。对应的对话框实现在 src/webots/gui/WbShareWindow.cpp 中窗口内提供两个单选按钮Upload to ...与Save as local files以及Export scene、Record and export animation两个动作按钮Export scene按钮直接关联到WbMainWindow::uploadScene()src/webots/gui/WbMainWindow.cpp#L1565-L1571后者调用world-exportAsHtml(fileName, false)第二个参数false表示导出的是静态场景而非动画。注意事项CSS文件、W3D文件以及所需的纹理贴图都会被导出到目标HTML文件所在的同一个目录。CSS文件定位为样式参考styling guide可以被修改也可以直接移除不影响场景本身。播放选项是否生效取决于你的默认 Web 浏览器例如部分浏览器默认禁止通过file://协议读取本地文件若无法播放请参考技术栈与兼容性限制一节解决。如何在你的网站中嵌入 Web Scene导出的HTML页面被刻意设计得足够简单它本身就是外部网站集成时的参考实现导出过程中生成的CSS文件可以在集成时被替换。嵌入方式有两种直接嵌入导出的 HTML 资源导出页面引用的资源CSS、JavaScript等在 Cyberbotics 官方网站上会长期保存外部网站可以直接使用这些资源使用iframe标签用iframe指向生成的 Webots 页面。这种方式不如前者优雅但实现最简单。提示若希望获得更强的定制能力工具栏、加载缩略图、动画/流式连接等推荐直接使用下一节介绍的webots-viewWeb Component 编程接口web-animation 指南与 web-streaming 指南 展示了它在动画播放与实时流式场景中的扩展用法。webots-view 编程接口Web Scene 由WebotsView.js包中的webots-viewWeb Component 负责渲染。你可以通过 HTML 属性声明式加载场景也可以通过 JavaScript 方法进行更复杂的交互控制。可用属性Attributes属性说明data-thumbnail缩略图.jpg文件的文件名。若未设置加载期间会显示默认缩略图data-scene包含 3D 场景的.w3d文件名。该属性仅在页面加载时求值一次一旦设置webots-view会自动尝试加载对应的 Web Scene可用方法Methods方法说明close()关闭当前场景。注意当webots-view元素被从 HTML 页面移除或调用了loadScene、loadAnimation、connect时close()会被自动调用onready()可覆写的回调函数场景加载完成后被调用loadScene(scene, mobileDevice, thumbnail)加载并显示场景。scene为.w3d文件名mobileDevice为布尔值指定应用是否运行在移动设备上thumbnail为场景缩略图的 URLsetAmbientOcclusion(level)将环境光遮蔽Ambient Occlusion强度设置为给定等级level为 14 之间的整数已知限制Web Scene 功能存在以下边界条件集成时需要格外注意节点支持所有图形类节点均受支持包括 Box、Sphere、Appearance、Material、ImageTexture、Light、Group、Pose、Transform 等渲染差异Webots Player 使用WRENJSWebots 渲染引擎WREN编译为 WebAssembly 的版本渲染。因此 Webots 桌面应用内的渲染结果与导出网页中的渲染结果可能不完全一致不支持节点Skin 节点不受支持Pen 设备不受支持单实例限制一个页面中不能同时存在多个webots-view元素无法重建webots-view元素一旦被移除就无法在同一页面重新创建。但有三种可行的替代方案重新加载页面先调用close()关闭仿真再用 CSS 隐藏webots-view保留对webots-view元素的引用将其从页面移除后再次插入例如let webotsView; function create() { if (typeof webotsView undefined) { webotsView document.createElement(webots-view); webotsView.style height:80%; display:block; } document.body.appendChild(webotsView); webotsView.loadScene(scene.w3d); } function remove() { document.body.removeChild(webotsView); }技术栈与兼容性限制Webots Player 内部使用WRENJS库渲染该库基于WebGL 2。因此运行环境存在以下限制WebGL 2 支持范围WebGL 2 在近期版本的Firefox、Chrome、Edge中受支持遗憾的是Safari 尚不支持WebGL 2若遇到渲染相关问题请先确认浏览器设置中已启用 WebGL 2。本地文件访问file 协议限制部分浏览器例如 Chrome以及 Firefox 68 及更高版本默认不允许通过file://协议打开本地文件而 Webots Player 读取W3D文件与纹理恰恰需要该能力。以下是两种解决方案方案一启动本地 HTTP 服务器在导出文件所在目录启动一个本地 HTTP 服务器再通过服务器访问HTML文件Python 3python3 -m http.serverPython 2python -m SimpleHTTPServerNode.jssudo npm install -g http-server http-server方案二禁用浏览器安全标志开发调试用Chrome使用--allow-file-access-from-files或--disable-web-security --user-data-dir.chrome参数启动Firefox打开 Firefox在地址栏输入about:config并回车点击Ill be careful, I promise!搜索privacy.file_unique_origin或旧版中的security.fileuri.strict_origin_policy双击将其状态从true改为false。与 Web Animation、Web Streaming 的关系Web Scene 并非孤立的导出能力它与 Webots 的另外两项 Web 发布功能共用同一套webots-view组件与 W3D 技术栈理解它们之间的关系有助于选择合适的发布形态Web Animation网页动画导出机制与 Web Scene 相同但额外导出一个包含运动物体位姿的JSON动画文件播放时带时间轴控制docs/guide/web-animation.mdWeb Streaming网页流式播放w3d模式下W3D文件与增量更新通过 WebSocket 实时推送到浏览器客户端本质上是边生成边发送的 Web Scenedocs/guide/web-streaming.md。从源码看这三者共享相同的 W3D 序列化机制流式服务器通过WbW3dStreamingServer::generateW3dWorld()src/webots/gui/WbW3dStreamingServer.cpp#L198-L209在运行时用WbWriter动态生成 W3D 世界并在仿真过程中以model:、node:、delete:等消息协议向客户端增量同步节点变化离线导出则直接落盘为静态.w3d文件。因此掌握了 Web Scene 的产物结构与webots-view接口就能快速迁移到动画与流式场景的开发中。赞分享科研自动驾驶物理引擎【免费下载链接】webotsWebots Robot Simulator项目地址https://gitcode.com/gh_mirrors/web/webots点击查看免费下载相关推荐Webots R2025a 版本全解析Heron USV 新机器人、W3D 格式与 Supervisor PROTO 内省 APIWebots R2025a 版本全解析Heron USV 新机器人、W3D 格式与 Supervisor PROTO 内省 API 本篇文章以 Webots科研自动驾驶物理引擎Excalidraw导入导出文件格式兼容性与转换处理Excalidraw导入导出文件格式兼容性与转换处理 概述 Excalidraw作为一款开源的虚拟白板工具其强大的导入导出功能是用户体验的核心。本文将深入探前端UI组件协同办公EmotiVoice易魔声2000音色免费开源TTS引擎5分钟快速上手指南EmotiVoice易魔声2000音色免费开源TTS引擎5分钟快速上手指南 EmotiVoice易魔声是一款由网易有道推出的开源文本转语音引擎支持中英文语音人工智能音频上一篇Vdirsyncer自动化同步使用systemd定时器实现无人值守更新下一篇推荐开源项目Profilo - Android性能监控库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
科研自动驾驶物理引擎【免费下载链接】webotsWebots Robot Simulator项目地址https://gitcode.com/gh_mirrors/web/webots点击查看免费下载Webots 提供了一项把 3D 仿真世界发布到 Web 的核心能力将世界导出为一个可交互的 HTML5 页面Web Scene。本文围绕 docs/guide/web-scene.md 系统讲解 Web Scene 的导出流程、产物结构W3D/HTML/CSS、webots-viewWeb Component 的编程接口与嵌入方式并结合仓库源码揭示其底层实现最后给出 WebGL 2 兼容性与本地文件访问限制的完整解决方案。什么是 Web SceneWeb Scene 是 Webots 针对把仿真世界发布到网页这一场景提供的导出功能Webots 可以把一个世界导出为交互式 3DHTML页面任何支持 WebGL 2 的现代浏览器都可以打开并自由浏览 3D 场景。这一特性对在 Web 上展示 Webots 创建的世界尤为实用。导出过程中Webots 会同时生成三个文件产物说明W3D文件包含世界的图形信息。W3D是 Webots 自定义的、基于XML的 3D 计算机图形表示格式HTML5页面内嵌一个 Webots Player用于渲染和展示W3D文件CSS文件用于样式化上述HTML5页面导出的页面可以在任何现代 Web 浏览器中打开具体支持范围见技术栈与兼容性限制一节。页面中的 3D 导航与 Webots 内部导航一致既支持鼠标操作也支持触摸屏操作。从源码实现看整个导出流程以WbWorld::exportAsHtml()为核心src/webots/nodes/utils/WbWorld.cpp#L285-L364它依次调用exportAsW3d()写出.w3d文件再以w3d_playback.css与w3d_playback.html为模板、通过字符串替换%w3dFilename%、%title%、%description%、%cssName%、%jsonName%等占位符生成配套的 CSS 与 HTML。其中WbWriter在写入.w3d时会切换到 W3D 输出模式src/webots/vrml/WbWriter.cpp#L55-L56对字段名使用w3dQuote引号规则序列化。如何导出 Web Scene导出 Web Scene 的操作路径非常简单在 Webots 菜单中选择Share...菜单项打开共享对话框选择导出目标上传到 webots.cloud 或保存为本地文件点击Export scene按钮开始导出导出完成后Webots 会询问是否在默认 Web 浏览器中播放生成的文件。对应的对话框实现在 src/webots/gui/WbShareWindow.cpp 中窗口内提供两个单选按钮Upload to ...与Save as local files以及Export scene、Record and export animation两个动作按钮Export scene按钮直接关联到WbMainWindow::uploadScene()src/webots/gui/WbMainWindow.cpp#L1565-L1571后者调用world-exportAsHtml(fileName, false)第二个参数false表示导出的是静态场景而非动画。注意事项CSS文件、W3D文件以及所需的纹理贴图都会被导出到目标HTML文件所在的同一个目录。CSS文件定位为样式参考styling guide可以被修改也可以直接移除不影响场景本身。播放选项是否生效取决于你的默认 Web 浏览器例如部分浏览器默认禁止通过file://协议读取本地文件若无法播放请参考技术栈与兼容性限制一节解决。如何在你的网站中嵌入 Web Scene导出的HTML页面被刻意设计得足够简单它本身就是外部网站集成时的参考实现导出过程中生成的CSS文件可以在集成时被替换。嵌入方式有两种直接嵌入导出的 HTML 资源导出页面引用的资源CSS、JavaScript等在 Cyberbotics 官方网站上会长期保存外部网站可以直接使用这些资源使用iframe标签用iframe指向生成的 Webots 页面。这种方式不如前者优雅但实现最简单。提示若希望获得更强的定制能力工具栏、加载缩略图、动画/流式连接等推荐直接使用下一节介绍的webots-viewWeb Component 编程接口web-animation 指南与 web-streaming 指南 展示了它在动画播放与实时流式场景中的扩展用法。webots-view 编程接口Web Scene 由WebotsView.js包中的webots-viewWeb Component 负责渲染。你可以通过 HTML 属性声明式加载场景也可以通过 JavaScript 方法进行更复杂的交互控制。可用属性Attributes属性说明data-thumbnail缩略图.jpg文件的文件名。若未设置加载期间会显示默认缩略图data-scene包含 3D 场景的.w3d文件名。该属性仅在页面加载时求值一次一旦设置webots-view会自动尝试加载对应的 Web Scene可用方法Methods方法说明close()关闭当前场景。注意当webots-view元素被从 HTML 页面移除或调用了loadScene、loadAnimation、connect时close()会被自动调用onready()可覆写的回调函数场景加载完成后被调用loadScene(scene, mobileDevice, thumbnail)加载并显示场景。scene为.w3d文件名mobileDevice为布尔值指定应用是否运行在移动设备上thumbnail为场景缩略图的 URLsetAmbientOcclusion(level)将环境光遮蔽Ambient Occlusion强度设置为给定等级level为 14 之间的整数已知限制Web Scene 功能存在以下边界条件集成时需要格外注意节点支持所有图形类节点均受支持包括 Box、Sphere、Appearance、Material、ImageTexture、Light、Group、Pose、Transform 等渲染差异Webots Player 使用WRENJSWebots 渲染引擎WREN编译为 WebAssembly 的版本渲染。因此 Webots 桌面应用内的渲染结果与导出网页中的渲染结果可能不完全一致不支持节点Skin 节点不受支持Pen 设备不受支持单实例限制一个页面中不能同时存在多个webots-view元素无法重建webots-view元素一旦被移除就无法在同一页面重新创建。但有三种可行的替代方案重新加载页面先调用close()关闭仿真再用 CSS 隐藏webots-view保留对webots-view元素的引用将其从页面移除后再次插入例如let webotsView; function create() { if (typeof webotsView undefined) { webotsView document.createElement(webots-view); webotsView.style height:80%; display:block; } document.body.appendChild(webotsView); webotsView.loadScene(scene.w3d); } function remove() { document.body.removeChild(webotsView); }技术栈与兼容性限制Webots Player 内部使用WRENJS库渲染该库基于WebGL 2。因此运行环境存在以下限制WebGL 2 支持范围WebGL 2 在近期版本的Firefox、Chrome、Edge中受支持遗憾的是Safari 尚不支持WebGL 2若遇到渲染相关问题请先确认浏览器设置中已启用 WebGL 2。本地文件访问file 协议限制部分浏览器例如 Chrome以及 Firefox 68 及更高版本默认不允许通过file://协议打开本地文件而 Webots Player 读取W3D文件与纹理恰恰需要该能力。以下是两种解决方案方案一启动本地 HTTP 服务器在导出文件所在目录启动一个本地 HTTP 服务器再通过服务器访问HTML文件Python 3python3 -m http.serverPython 2python -m SimpleHTTPServerNode.jssudo npm install -g http-server http-server方案二禁用浏览器安全标志开发调试用Chrome使用--allow-file-access-from-files或--disable-web-security --user-data-dir.chrome参数启动Firefox打开 Firefox在地址栏输入about:config并回车点击Ill be careful, I promise!搜索privacy.file_unique_origin或旧版中的security.fileuri.strict_origin_policy双击将其状态从true改为false。与 Web Animation、Web Streaming 的关系Web Scene 并非孤立的导出能力它与 Webots 的另外两项 Web 发布功能共用同一套webots-view组件与 W3D 技术栈理解它们之间的关系有助于选择合适的发布形态Web Animation网页动画导出机制与 Web Scene 相同但额外导出一个包含运动物体位姿的JSON动画文件播放时带时间轴控制docs/guide/web-animation.mdWeb Streaming网页流式播放w3d模式下W3D文件与增量更新通过 WebSocket 实时推送到浏览器客户端本质上是边生成边发送的 Web Scenedocs/guide/web-streaming.md。从源码看这三者共享相同的 W3D 序列化机制流式服务器通过WbW3dStreamingServer::generateW3dWorld()src/webots/gui/WbW3dStreamingServer.cpp#L198-L209在运行时用WbWriter动态生成 W3D 世界并在仿真过程中以model:、node:、delete:等消息协议向客户端增量同步节点变化离线导出则直接落盘为静态.w3d文件。因此掌握了 Web Scene 的产物结构与webots-view接口就能快速迁移到动画与流式场景的开发中。赞分享科研自动驾驶物理引擎【免费下载链接】webotsWebots Robot Simulator项目地址https://gitcode.com/gh_mirrors/web/webots点击查看免费下载相关推荐Webots R2025a 版本全解析Heron USV 新机器人、W3D 格式与 Supervisor PROTO 内省 APIWebots R2025a 版本全解析Heron USV 新机器人、W3D 格式与 Supervisor PROTO 内省 API 本篇文章以 Webots科研自动驾驶物理引擎Excalidraw导入导出文件格式兼容性与转换处理Excalidraw导入导出文件格式兼容性与转换处理 概述 Excalidraw作为一款开源的虚拟白板工具其强大的导入导出功能是用户体验的核心。本文将深入探前端UI组件协同办公EmotiVoice易魔声2000音色免费开源TTS引擎5分钟快速上手指南EmotiVoice易魔声2000音色免费开源TTS引擎5分钟快速上手指南 EmotiVoice易魔声是一款由网易有道推出的开源文本转语音引擎支持中英文语音人工智能音频上一篇Vdirsyncer自动化同步使用systemd定时器实现无人值守更新下一篇推荐开源项目Profilo - Android性能监控库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
