科研自動(dòng)駕駛物理引擎【免費(fèi)下載鏈接】webotsWebots Robot Simulator項(xiàng)目地址https://gitcode.com/gh_mirrors/web/webots點(diǎn)擊查看免費(fèi)下載Webots 提供了一項(xiàng)把 3D 仿真世界發(fā)布到 Web 的核心能力將世界導(dǎo)出為一個(gè)可交互的 HTML5 頁面Web Scene。本文圍繞 docs/guide/web-scene.md 系統(tǒng)講解 Web Scene 的導(dǎo)出流程、產(chǎn)物結(jié)構(gòu)W3D/HTML/CSS、webots-viewWeb Component 的編程接口與嵌入方式并結(jié)合倉庫源碼揭示其底層實(shí)現(xiàn)最后給出 WebGL 2 兼容性與本地文件訪問限制的完整解決方案。什么是 Web SceneWeb Scene 是 Webots 針對把仿真世界發(fā)布到網(wǎng)頁這一場景提供的導(dǎo)出功能Webots 可以把一個(gè)世界導(dǎo)出為交互式 3DHTML頁面任何支持 WebGL 2 的現(xiàn)代瀏覽器都可以打開并自由瀏覽 3D 場景。這一特性對在 Web 上展示 Webots 創(chuàng)建的世界尤為實(shí)用。導(dǎo)出過程中Webots 會(huì)同時(shí)生成三個(gè)文件產(chǎn)物說明W3D文件包含世界的圖形信息。W3D是 Webots 自定義的、基于XML的 3D 計(jì)算機(jī)圖形表示格式HTML5頁面內(nèi)嵌一個(gè) Webots Player用于渲染和展示W(wǎng)3D文件CSS文件用于樣式化上述HTML5頁面導(dǎo)出的頁面可以在任何現(xiàn)代 Web 瀏覽器中打開具體支持范圍見技術(shù)棧與兼容性限制一節(jié)。頁面中的 3D 導(dǎo)航與 Webots 內(nèi)部導(dǎo)航一致既支持鼠標(biāo)操作也支持觸摸屏操作。從源碼實(shí)現(xiàn)看整個(gè)導(dǎo)出流程以WbWorld::exportAsHtml()為核心src/webots/nodes/utils/WbWorld.cpp#L285-L364它依次調(diào)用exportAsW3d()寫出.w3d文件再以w3d_playback.css與w3d_playback.html為模板、通過字符串替換%w3dFilename%、%title%、%description%、%cssName%、%jsonName%等占位符生成配套的 CSS 與 HTML。其中WbWriter在寫入.w3d時(shí)會(huì)切換到 W3D 輸出模式src/webots/vrml/WbWriter.cpp#L55-L56對字段名使用w3dQuote引號規(guī)則序列化。如何導(dǎo)出 Web Scene導(dǎo)出 Web Scene 的操作路徑非常簡單在 Webots 菜單中選擇Share...菜單項(xiàng)打開共享對話框選擇導(dǎo)出目標(biāo)上傳到 webots.cloud 或保存為本地文件點(diǎn)擊Export scene按鈕開始導(dǎo)出導(dǎo)出完成后Webots 會(huì)詢問是否在默認(rèn) Web 瀏覽器中播放生成的文件。對應(yīng)的對話框?qū)崿F(xiàn)在 src/webots/gui/WbShareWindow.cpp 中窗口內(nèi)提供兩個(gè)單選按鈕Upload to ...與Save as local files以及Export scene、Record and export animation兩個(gè)動(dòng)作按鈕Export scene按鈕直接關(guān)聯(lián)到WbMainWindow::uploadScene()src/webots/gui/WbMainWindow.cpp#L1565-L1571后者調(diào)用world-exportAsHtml(fileName, false)第二個(gè)參數(shù)false表示導(dǎo)出的是靜態(tài)場景而非動(dòng)畫。注意事項(xiàng)CSS文件、W3D文件以及所需的紋理貼圖都會(huì)被導(dǎo)出到目標(biāo)HTML文件所在的同一個(gè)目錄。CSS文件定位為樣式參考styling guide可以被修改也可以直接移除不影響場景本身。播放選項(xiàng)是否生效取決于你的默認(rèn) Web 瀏覽器例如部分瀏覽器默認(rèn)禁止通過file://協(xié)議讀取本地文件若無法播放請參考技術(shù)棧與兼容性限制一節(jié)解決。如何在你的網(wǎng)站中嵌入 Web Scene導(dǎo)出的HTML頁面被刻意設(shè)計(jì)得足夠簡單它本身就是外部網(wǎng)站集成時(shí)的參考實(shí)現(xiàn)導(dǎo)出過程中生成的CSS文件可以在集成時(shí)被替換。嵌入方式有兩種直接嵌入導(dǎo)出的 HTML 資源導(dǎo)出頁面引用的資源CSS、JavaScript等在 Cyberbotics 官方網(wǎng)站上會(huì)長期保存外部網(wǎng)站可以直接使用這些資源使用iframe標(biāo)簽用iframe指向生成的 Webots 頁面。這種方式不如前者優(yōu)雅但實(shí)現(xiàn)最簡單。提示若希望獲得更強(qiáng)的定制能力工具欄、加載縮略圖、動(dòng)畫/流式連接等推薦直接使用下一節(jié)介紹的webots-viewWeb Component 編程接口web-animation 指南與 web-streaming 指南 展示了它在動(dòng)畫播放與實(shí)時(shí)流式場景中的擴(kuò)展用法。webots-view 編程接口Web Scene 由WebotsView.js包中的webots-viewWeb Component 負(fù)責(zé)渲染。你可以通過 HTML 屬性聲明式加載場景也可以通過 JavaScript 方法進(jìn)行更復(fù)雜的交互控制?？捎脤傩訟ttributes屬性說明data-thumbnail縮略圖.jpg文件的文件名。若未設(shè)置加載期間會(huì)顯示默認(rèn)縮略圖data-scene包含 3D 場景的.w3d文件名。該屬性僅在頁面加載時(shí)求值一次一旦設(shè)置webots-view會(huì)自動(dòng)嘗試加載對應(yīng)的 Web Scene可用方法Methods方法說明close()關(guān)閉當(dāng)前場景。注意當(dāng)webots-view元素被從 HTML 頁面移除或調(diào)用了loadScene、loadAnimation、connect時(shí)close()會(huì)被自動(dòng)調(diào)用onready()可覆寫的回調(diào)函數(shù)場景加載完成后被調(diào)用loadScene(scene, mobileDevice, thumbnail)加載并顯示場景。scene為.w3d文件名mobileDevice為布爾值指定應(yīng)用是否運(yùn)行在移動(dòng)設(shè)備上thumbnail為場景縮略圖的 URLsetAmbientOcclusion(level)將環(huán)境光遮蔽Ambient Occlusion強(qiáng)度設(shè)置為給定等級level為 14 之間的整數(shù)已知限制Web Scene 功能存在以下邊界條件集成時(shí)需要格外注意節(jié)點(diǎn)支持所有圖形類節(jié)點(diǎn)均受支持包括 Box、Sphere、Appearance、Material、ImageTexture、Light、Group、Pose、Transform 等渲染差異Webots Player 使用WRENJSWebots 渲染引擎WREN編譯為 WebAssembly 的版本渲染。因此 Webots 桌面應(yīng)用內(nèi)的渲染結(jié)果與導(dǎo)出網(wǎng)頁中的渲染結(jié)果可能不完全一致不支持節(jié)點(diǎn)Skin 節(jié)點(diǎn)不受支持Pen 設(shè)備不受支持單實(shí)例限制一個(gè)頁面中不能同時(shí)存在多個(gè)webots-view元素?zé)o法重建webots-view元素一旦被移除就無法在同一頁面重新創(chuàng)建。但有三種可行的替代方案重新加載頁面先調(diào)用close()關(guān)閉仿真再用 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); }技術(shù)棧與兼容性限制Webots Player 內(nèi)部使用WRENJS庫渲染該庫基于WebGL 2。因此運(yùn)行環(huán)境存在以下限制WebGL 2 支持范圍WebGL 2 在近期版本的Firefox、Chrome、Edge中受支持遺憾的是Safari 尚不支持WebGL 2若遇到渲染相關(guān)問題請先確認(rèn)瀏覽器設(shè)置中已啟用 WebGL 2。本地文件訪問file 協(xié)議限制部分瀏覽器例如 Chrome以及 Firefox 68 及更高版本默認(rèn)不允許通過file://協(xié)議打開本地文件而 Webots Player 讀取W3D文件與紋理恰恰需要該能力。以下是兩種解決方案方案一啟動(dòng)本地 HTTP 服務(wù)器在導(dǎo)出文件所在目錄啟動(dòng)一個(gè)本地 HTTP 服務(wù)器再通過服務(wù)器訪問HTML文件Python 3python3 -m http.serverPython 2python -m SimpleHTTPServerNode.jssudo npm install -g http-server http-server方案二禁用瀏覽器安全標(biāo)志開發(fā)調(diào)試用Chrome使用--allow-file-access-from-files或--disable-web-security --user-data-dir.chrome參數(shù)啟動(dòng)Firefox打開 Firefox在地址欄輸入about:config并回車點(diǎn)擊Ill be careful, I promise!搜索privacy.file_unique_origin或舊版中的security.fileuri.strict_origin_policy雙擊將其狀態(tài)從true改為false。與 Web Animation、Web Streaming 的關(guān)系Web Scene 并非孤立的導(dǎo)出能力它與 Webots 的另外兩項(xiàng) Web 發(fā)布功能共用同一套webots-view組件與 W3D 技術(shù)棧理解它們之間的關(guān)系有助于選擇合適的發(fā)布形態(tài)Web Animation網(wǎng)頁動(dòng)畫導(dǎo)出機(jī)制與 Web Scene 相同但額外導(dǎo)出一個(gè)包含運(yùn)動(dòng)物體位姿的JSON動(dòng)畫文件播放時(shí)帶時(shí)間軸控制docs/guide/web-animation.mdWeb Streaming網(wǎng)頁流式播放w3d模式下W3D文件與增量更新通過 WebSocket 實(shí)時(shí)推送到瀏覽器客戶端本質(zhì)上是邊生成邊發(fā)送的 Web Scenedocs/guide/web-streaming.md。從源碼看這三者共享相同的 W3D 序列化機(jī)制流式服務(wù)器通過WbW3dStreamingServer::generateW3dWorld()src/webots/gui/WbW3dStreamingServer.cpp#L198-L209在運(yùn)行時(shí)用WbWriter動(dòng)態(tài)生成 W3D 世界并在仿真過程中以model:、node:、delete:等消息協(xié)議向客戶端增量同步節(jié)點(diǎn)變化離線導(dǎo)出則直接落盤為靜態(tài).w3d文件。因此掌握了 Web Scene 的產(chǎn)物結(jié)構(gòu)與webots-view接口就能快速遷移到動(dòng)畫與流式場景的開發(fā)中。贊分享科研自動(dòng)駕駛物理引擎【免費(fèi)下載鏈接】webotsWebots Robot Simulator項(xiàng)目地址https://gitcode.com/gh_mirrors/web/webots點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Webots R2025a 版本全解析Heron USV 新機(jī)器人、W3D 格式與 Supervisor PROTO 內(nèi)省 APIWebots R2025a 版本全解析Heron USV 新機(jī)器人、W3D 格式與 Supervisor PROTO 內(nèi)省 API 本篇文章以 Webots科研自動(dòng)駕駛物理引擎Excalidraw導(dǎo)入導(dǎo)出文件格式兼容性與轉(zhuǎn)換處理Excalidraw導(dǎo)入導(dǎo)出文件格式兼容性與轉(zhuǎn)換處理 概述 Excalidraw作為一款開源的虛擬白板工具其強(qiáng)大的導(dǎo)入導(dǎo)出功能是用戶體驗(yàn)的核心。本文將深入探前端UI組件協(xié)同辦公EmotiVoice易魔聲2000音色免費(fèi)開源TTS引擎5分鐘快速上手指南EmotiVoice易魔聲2000音色免費(fèi)開源TTS引擎5分鐘快速上手指南 EmotiVoice易魔聲是一款由網(wǎng)易有道推出的開源文本轉(zhuǎn)語音引擎支持中英文語音人工智能音頻上一篇Vdirsyncer自動(dòng)化同步使用systemd定時(shí)器實(shí)現(xiàn)無人值守更新下一篇推薦開源項(xiàng)目Profilo - Android性能監(jiān)控庫創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考