Embed Size (px)
Citation preview
用 Arduino 與 three.js 實做互動式全息投影網頁
Eia 2016 / 08 / 25 @ Modern Web
前端工程師想玩的東西很多
就都看看吧
硬體相關經驗不多，歡迎打臉切磋
Input > Output
很久以前的計算機概論
Input > Logic > Output
邏輯：前端工程師的日常
Input > Logic > Output
先來講輸出
全息投影Hologram
小時候玩的玩具
wiki
長大後玩的玩具
● 仿佛物體就在那裡一樣
● 1947年，英國匈牙利裔物理學家丹尼斯·蓋伯發明了全像術
Q: 能麻煩程式部門研究這個嗎?
OS: 嗯...切一個金字塔出來?
如果，不只是影片的話實做四個面相同的畫面方法很多種，就用 three.js 吧
以後也會想試試 pixi.js
●手機投影全像 + 互動
https://www.youtube.com/watch?v=qBYIIC4i6Vc
考慮模型的光源，實做上使用四份圖檔
(一份three.js 時，光源會互相干擾)
- 4個three.js
- 1個three.js / 複製到另外三個?
四個盒子
vw / calc
CSS
先試試直接複製 Canvas 內容
renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });
// 不然會沒有畫面
stackoverflow
rightCtx.drawImage(
$('.topSide canvas').get(0), 0, 0);
bottomCtx.drawImage(
$('.topSide canvas').get(0), 0, 0);
leftCtx.drawImage(
$('.topSide canvas').get(0), 0, 0);
*重繪太吃資源，放棄
4個 Renderer
4個 Renderer 算同樣內容
然後再用CSS旋轉
tRenderer.render( scene, camera );
rRenderer.render( scene, camera );
bRenderer.render( scene, camera );
lRenderer.render( scene, camera );
$('.rightSide').css( 'transform', 'rotate(270deg)');
$('.bottomSide').css( 'transform', 'rotate(180deg)');
$('.leftSide').css( 'transform', 'rotate(90deg)');
4個 Renderer 交接處
用變形的
- transform skew，不使用...因為變形了
$(".rightSide canvas").css("-webkit-transform", "skew(20deg)");
用CSS做梯型
用切的
.topSide, .rightSide, .bottomSide, .leftSide {
-webkit-clip-path : polygon(100% 0,50% 100%,50% 100%,0 0);
clip-path : polygon(100% 0,50% 100%,50% 100%,0 0); }
.topSide canvas, .rightSide canvas, .bottomSide canvas, .leftSide canvas {
-webkit-clip-path : polygon(100% 0,50% 100%,50% 100%,0 0);
clip-path : polygon(100% 0,50% 100%,50% 100%,0 0); }
用CSS做梯型
成功！
Input > Logic > Output
雖然手機陀螺儀成功了，但不方便操作啊
大部分畫面用來投影，沒地方操作
RFID 沒玩過，試試看好了
Arduino / Raspberry PI
哪個?
先試試看效能...
Raspberry PI 瀏覽器跑不動我的three.js
*放棄
Arduino
Input > Logic > Output
Arduino PC ScreenBrowserRFID > > > >
● Arduino 讀 RFID
● Arduino 推播訊息到PC
● PC 再推給網頁
Johnny-Fivehttps://github.com/rwaldron/johnny-five
Licensed under the MIT license. Copyright (c) 2014, 2015 The Johnny-Five
Contributors Licensed under the MIT license.
johnny-five
可惜沒有 RFID* 又失敗了
Firmata Libraryhttps://www.arduino.cc/en/Reference/Firmata
firmata
standardFitmata 燒到 arduino 上後
就是node.js 的事情了
https://www.arduino.cc/en/Tutorial/Button
firmata
firmata + socket.io
Port
Port Busy
燒錄後不用 Port
Port 給 Node 用就好
* arduino 上的輸出視窗用 PORT，會與node.js 相衝
但是
不會Firmata + RFID* 先放著了
還是先看怎麼讀RFID該面對的還是要先面對
MFRC522https://github.com/miguelbalboa/rfid
MFRC522https://github.com/miguelbalboa/rfid
MOSI : Master Output Slave Input
MISO : Master Input Slave Output
( http://www.gammon.com.au/forum/?id=10892 )
SPI 介面
https://github.com/miguelbalboa/rfid/tree/master/examples
讀到RFID了還是要把Arduino 的訊息推出去
serialport
https://github.com/rwaldron/johnny-five/issues/804
成功！這個部份繞了好幾圈
多RFID
多張 Arduino，多個 Port沒問題，但也沒特別要講
會少好幾個USB孔，有些不方便
1塊Arduino 與多 RFID
https://www.element14.com/community/community/design-challenges/forget-me-not/blog/2014/09/28/cats-forgetmenot--rfid
每個rfid板需要各自的SS (RST 不需)
https://www.youtube.com/watch?v=u40WqUjEgBs
成功！
Next Step
Pokemon GO?
模型 / GPS / API
心得
- 電子相關領域，有些不習慣要如何查資料
不懂電路，看得到東西但不知道如何查起
也不懂C ，雖然學就是了
- 是一套可實做 (硬做) 的方法，或者擴充，或是優化
學程式，學硬體
學更多與更多
- 給半年前的自己
補充
悠遊卡 O
自家門禁卡 O
公司門禁卡 X
NESiCA O
Suica X
RFID 頻率
特別感謝
Webduino 社團https://www.facebook.com/webduino/
謝謝！
