# Three.js實現ROS虛實環境監控系統 / 邱文淇 (Ivan), 曾哲瀚 (小白)

{%hackmd @ModernWeb/SyA2U6SmT %}

> 共筆請從這開始

ROS
* 開源機器人開發軟體系統框架
* 模組化特性 Stacks -> Packages -> Nodes
* Node 間的通訊機制 Topic、Serivce、Actionlib

Three.js
* 基於 WebGL 開發，進行了封裝和簡化
* 3D 繪圖 Library
* 簡易製作互動式 3D 圖形
* 低學習門檻

利用 Figma 設計虛實整合介面 Mockup

Three.js 基本概念 （3D畫面）
- 場景（Scene）
- 相機（Camera）
- 物體（Object）
- 光源 (Light):場景中的光線來源，決定了物體的明卻和陰影效果，
- 渲染器（Renderer）

場景
先用場景(Scene)創立了3D虛擬空間，使用相機(camera)就像張開了眼睛，創造了object後，再把物體(object)放進虛擬空間，然後再加入光源(light)，可讓顯示更加立體跟真實，最後透過渲染器(Renderer)可以看到實際畫面。

註：近平面距離越小越好、遠平面距離越大越好

相機
new THREE.PerspectiveCamera(視場角度,畫面長寬比,近平面距離,遠平面距離)

如何做到虛實同步：
六軸操作 / 動作執行 => 改變六軸角度 => 虛擬手臂 / 實體手臂

WebRTC bind IP cam - Web
webrtc-streamer
-協定

以Rosbridge 與 ROS cluster 整合

換人：
PROS API
JSON input 轉ROS格式

C# SDK to ROS node

結語：
- ROS與Three.js的基礎概念
- 數位雙生(PROS DigitalTwins)系統如何整合虛擬與實體介面
- 雲端操作介面, PROS API 如何與地端Web Cam完美結合
- Docker 化的部署介面

> 有用 Gitlab 也有用 Jenkins

> 他們的東西沒有很精緻
> 不過確實系統設計和各方面的思考蠻實際的
---

> 聊天室
> 講者的語速好快
> 感覺到講者的緊張
>

> 介面的綠色和紅色很刺眼= =
> 同意ＸＤ 應該不是Cyberpunk
> 但不能要求太多吧 看得出來應該沒有UI

> 換人之後
> 語速 -50%
> 語速快但是台風還是很穩啦 給讚

> 攝影師好搶戲
> 我記得之前參加研討會的時候
> 攝影師只會側拍
> 不會跑到講台上
> 攝影師今天都超忙DER
> 真的～ 直接在台上XD

好想從小學生的服務開始給他們的遊戲調教
女兒送上來
XD 徵才

19歲？！台風好穩喔