科研自動駕駛物理引擎【免費下載鏈接】webotsWebots Robot Simulator項目地址https://gitcode.com/gh_mirrors/web/webots點擊查看免費下載Webots 提供了一項把 3D 仿真世界發(fā)布到 Web 的核心能力將世界導出為一個可交互的 HTML5 頁面Web Scene。本文圍繞 docs/guide/web-scene.md 系統講解 Web Scene 的導出流程、產物結構W3D/HTML/CSS、webots-viewWeb Component 的編程接口與嵌入方式并結合倉庫源碼揭示其底層實現最后給出 WebGL 2 兼容性與本地文件訪問限制的完整解決方案。什么是 Web SceneWeb Scene 是 Webots 針對把仿真世界發(fā)布到網頁這一場景提供的導出功能Webots 可以把一個世界導出為交互式 3DHTML頁面任何支持 WebGL 2 的現代瀏覽器都可以打開并自由瀏覽 3D 場景。這一特性對在 Web 上展示 Webots 創(chuàng)建的世界尤為實用。導出過程中Webots 會同時生成三個文件產物說明W3D文件包含世界的圖形信息。W3D是 Webots 自定義的、基于XML的 3D 計算機圖形表示格式HTML5頁面內嵌一個 Webots Player用于渲染和展示W3D文件CSS文件用于樣式化上述HTML5頁面導出的頁面可以在任何現代 Web 瀏覽器中打開具體支持范圍見技術棧與兼容性限制一節(jié)。頁面中的 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引號規(guī)則序列化。如何導出 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表示導出的是靜態(tài)場景而非動畫。注意事項CSS文件、W3D文件以及所需的紋理貼圖都會被導出到目標HTML文件所在的同一個目錄。CSS文件定位為樣式參考styling guide可以被修改也可以直接移除不影響場景本身。播放選項是否生效取決于你的默認 Web 瀏覽器例如部分瀏覽器默認禁止通過file://協議讀取本地文件若無法播放請參考技術棧與兼容性限制一節(jié)解決。如何在你的網站中嵌入 Web Scene導出的HTML頁面被刻意設計得足夠簡單它本身就是外部網站集成時的參考實現導出過程中生成的CSS文件可以在集成時被替換。嵌入方式有兩種直接嵌入導出的 HTML 資源導出頁面引用的資源CSS、JavaScript等在 Cyberbotics 官方網站上會長期保存外部網站可以直接使用這些資源使用iframe標簽用iframe指向生成的 Webots 頁面。這種方式不如前者優(yōu)雅但實現最簡單。提示若希望獲得更強的定制能力工具欄、加載縮略圖、動畫/流式連接等推薦直接使用下一節(jié)介紹的webots-viewWeb Component 編程接口web-animation 指南與 web-streaming 指南 展示了它在動畫播放與實時流式場景中的擴展用法。webots-view 編程接口Web Scene 由WebotsView.js包中的webots-viewWeb Component 負責渲染。你可以通過 HTML 屬性聲明式加載場景也可以通過 JavaScript 方法進行更復雜的交互控制?？捎脤傩訟ttributes屬性說明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)將環(huán)境光遮蔽Ambient Occlusion強度設置為給定等級level為 14 之間的整數已知限制Web Scene 功能存在以下邊界條件集成時需要格外注意節(jié)點支持所有圖形類節(jié)點均受支持包括 Box、Sphere、Appearance、Material、ImageTexture、Light、Group、Pose、Transform 等渲染差異Webots Player 使用WRENJSWebots 渲染引擎WREN編譯為 WebAssembly 的版本渲染。因此 Webots 桌面應用內的渲染結果與導出網頁中的渲染結果可能不完全一致不支持節(jié)點Skin 節(jié)點不受支持Pen 設備不受支持單實例限制一個頁面中不能同時存在多個webots-view元素無法重建webots-view元素一旦被移除就無法在同一頁面重新創(chuàng)建。但有三種可行的替代方案重新加載頁面先調用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。因此運行環(huán)境存在以下限制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方案二禁用瀏覽器安全標志開發(fā)調試用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雙擊將其狀態(tài)從true改為false。與 Web Animation、Web Streaming 的關系Web Scene 并非孤立的導出能力它與 Webots 的另外兩項 Web 發(fā)布功能共用同一套webots-view組件與 W3D 技術棧理解它們之間的關系有助于選擇合適的發(fā)布形態(tài)Web Animation網頁動畫導出機制與 Web Scene 相同但額外導出一個包含運動物體位姿的JSON動畫文件播放時帶時間軸控制docs/guide/web-animation.mdWeb Streaming網頁流式播放w3d模式下W3D文件與增量更新通過 WebSocket 實時推送到瀏覽器客戶端本質上是邊生成邊發(fā)送的 Web Scenedocs/guide/web-streaming.md。從源碼看這三者共享相同的 W3D 序列化機制流式服務器通過WbW3dStreamingServer::generateW3dWorld()src/webots/gui/WbW3dStreamingServer.cpp#L198-L209在運行時用WbWriter動態(tài)生成 W3D 世界并在仿真過程中以model:、node:、delete:等消息協議向客戶端增量同步節(jié)點變化離線導出則直接落盤為靜態(tài).w3d文件。因此掌握了 Web Scene 的產物結構與webots-view接口就能快速遷移到動畫與流式場景的開發(fā)中。贊分享科研自動駕駛物理引擎【免費下載鏈接】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性能監(jiān)控庫創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 Webots Web Scene 導出與網頁嵌入完全指南：W3D 格式、webots-view 組件與瀏覽器兼容性
科研自動駕駛物理引擎【免費下載鏈接】webotsWebots Robot Simulator項目地址https://gitcode.com/gh_mirrors/web/webots點擊查看免費下載Webots 提供了一項把 3D 仿真世界發(fā)布到 Web 的核心能力將世界導出為一個可交互的 HTML5 頁面Web Scene。本文圍繞 docs/guide/web-scene.md 系統講解 Web Scene 的導出流程、產物結構W3D/HTML/CSS、webots-viewWeb Component 的編程接口與嵌入方式并結合倉庫源碼揭示其底層實現最后給出 WebGL 2 兼容性與本地文件訪問限制的完整解決方案。什么是 Web SceneWeb Scene 是 Webots 針對把仿真世界發(fā)布到網頁這一場景提供的導出功能Webots 可以把一個世界導出為交互式 3DHTML頁面任何支持 WebGL 2 的現代瀏覽器都可以打開并自由瀏覽 3D 場景。這一特性對在 Web 上展示 Webots 創(chuàng)建的世界尤為實用。導出過程中Webots 會同時生成三個文件產物說明W3D文件包含世界的圖形信息。W3D是 Webots 自定義的、基于XML的 3D 計算機圖形表示格式HTML5頁面內嵌一個 Webots Player用于渲染和展示W3D文件CSS文件用于樣式化上述HTML5頁面導出的頁面可以在任何現代 Web 瀏覽器中打開具體支持范圍見技術棧與兼容性限制一節(jié)。頁面中的 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引號規(guī)則序列化。如何導出 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表示導出的是靜態(tài)場景而非動畫。注意事項CSS文件、W3D文件以及所需的紋理貼圖都會被導出到目標HTML文件所在的同一個目錄。CSS文件定位為樣式參考styling guide可以被修改也可以直接移除不影響場景本身。播放選項是否生效取決于你的默認 Web 瀏覽器例如部分瀏覽器默認禁止通過file://協議讀取本地文件若無法播放請參考技術棧與兼容性限制一節(jié)解決。如何在你的網站中嵌入 Web Scene導出的HTML頁面被刻意設計得足夠簡單它本身就是外部網站集成時的參考實現導出過程中生成的CSS文件可以在集成時被替換。嵌入方式有兩種直接嵌入導出的 HTML 資源導出頁面引用的資源CSS、JavaScript等在 Cyberbotics 官方網站上會長期保存外部網站可以直接使用這些資源使用iframe標簽用iframe指向生成的 Webots 頁面。這種方式不如前者優(yōu)雅但實現最簡單。提示若希望獲得更強的定制能力工具欄、加載縮略圖、動畫/流式連接等推薦直接使用下一節(jié)介紹的webots-viewWeb Component 編程接口web-animation 指南與 web-streaming 指南 展示了它在動畫播放與實時流式場景中的擴展用法。webots-view 編程接口Web Scene 由WebotsView.js包中的webots-viewWeb Component 負責渲染。你可以通過 HTML 屬性聲明式加載場景也可以通過 JavaScript 方法進行更復雜的交互控制?？捎脤傩訟ttributes屬性說明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)將環(huán)境光遮蔽Ambient Occlusion強度設置為給定等級level為 14 之間的整數已知限制Web Scene 功能存在以下邊界條件集成時需要格外注意節(jié)點支持所有圖形類節(jié)點均受支持包括 Box、Sphere、Appearance、Material、ImageTexture、Light、Group、Pose、Transform 等渲染差異Webots Player 使用WRENJSWebots 渲染引擎WREN編譯為 WebAssembly 的版本渲染。因此 Webots 桌面應用內的渲染結果與導出網頁中的渲染結果可能不完全一致不支持節(jié)點Skin 節(jié)點不受支持Pen 設備不受支持單實例限制一個頁面中不能同時存在多個webots-view元素無法重建webots-view元素一旦被移除就無法在同一頁面重新創(chuàng)建。但有三種可行的替代方案重新加載頁面先調用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。因此運行環(huán)境存在以下限制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方案二禁用瀏覽器安全標志開發(fā)調試用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雙擊將其狀態(tài)從true改為false。與 Web Animation、Web Streaming 的關系Web Scene 并非孤立的導出能力它與 Webots 的另外兩項 Web 發(fā)布功能共用同一套webots-view組件與 W3D 技術棧理解它們之間的關系有助于選擇合適的發(fā)布形態(tài)Web Animation網頁動畫導出機制與 Web Scene 相同但額外導出一個包含運動物體位姿的JSON動畫文件播放時帶時間軸控制docs/guide/web-animation.mdWeb Streaming網頁流式播放w3d模式下W3D文件與增量更新通過 WebSocket 實時推送到瀏覽器客戶端本質上是邊生成邊發(fā)送的 Web Scenedocs/guide/web-streaming.md。從源碼看這三者共享相同的 W3D 序列化機制流式服務器通過WbW3dStreamingServer::generateW3dWorld()src/webots/gui/WbW3dStreamingServer.cpp#L198-L209在運行時用WbWriter動態(tài)生成 W3D 世界并在仿真過程中以model:、node:、delete:等消息協議向客戶端增量同步節(jié)點變化離線導出則直接落盤為靜態(tài).w3d文件。因此掌握了 Web Scene 的產物結構與webots-view接口就能快速遷移到動畫與流式場景的開發(fā)中。贊分享科研自動駕駛物理引擎【免費下載鏈接】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性能監(jiān)控庫創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考