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