20141020 今日學習

今天讀了一篇中國作家寫的文章，他所感動的事卻讓我覺得如呼吸喝水般自然，且理所當然，現在的中國充斥著狼性，失去了人性，難怪我總是對中國不感興趣

• 韓寒遊台灣：我們失去的他們都留下了

今天看了Learning Three.js的twitter裡面的一篇技術文章

• Implementing a "sketch" style of rendering in webGL | Floored

裡頭有個小視窗，上面寫著"Click to explore" 點了之後就可以看到它的效果，但是網頁的操作會變得很慢，這讓我想起昨天在天馬行空畫面的構思，是否畫面要考慮用框框，框框裡頭跑WebGL，外面做其他的事，用了這網頁後，我決定暫時擱置這念頭 XD

晚上看了葉丙成老師分享的文章，裡頭談到如何用微信督促學生，覺得滿不錯的，在台灣可以用LINE或Facebook的社團來弄

• 「濟南傳道」

今天又回去看昨天找到的How To Make Games in THREE.js，這slide的p55有個demo：mike-map，我想是我要的，於是我去GitHub把他載了下來，它的路徑如下

• slides/howtomakeagame-nextgamefrontier-2014/demos/mike-map at master · jeromeetienne/slides

程式碼位置

• file:///D:/work/WebGL%20Learning/slides-master/howtomakeagame-nextgamefrontier-2014/demos/mike-map/index.html

今天下午開始看了threex.cubecamera-master\examples\demo.html

可以從上面截圖看到，人物模型繞著中間的金球旋轉走動，前陣子一直在構思要如何讓人物走直線，因為我需要走直線的動作，後來去讀demo.html，發現他並不是用自己寫的方法，而是採用three.js提供的Object3D裡面的rotateY這method，於是我想，是否我也可以用裡面的Up這方法或其他方法來達到我要的走直線動作

• up - Up direction.

發現一些有趣的東西

這demo裡有黃色小鴨的model，也許可以拿來用

• D:\work\WebGL Learning\three.js-master\examples\webgl_loader_gltf.html

這demo裡有loading與Start的選項，可以參考他是怎麼做的

• D:/work/WebGL%20Learning/three.js-master/examples/webgl_loader_scene.html
• D:\work\WebGL Learning\three.js-master\examples\webgl_loader_scene_blender

這demo裡有教下拉選單，老實說我滿想用個下拉選單，然後用什麼邏輯讓學生自己選

• D:/work/WebGL%20Learning/three.js-master/examples/webgl_morphtargets_md2.html

這demo裡有我要的向前走的動作

• D:\work\WebGL Learning\three.js-master\examples\webgl_shadowmap
• D:\work\WebGL Learning\three.js-master\examples\webgldeferred_animation

這demo可有趣囉，可以做出火影忍者裡頭的多重影分身之術 XD

• D:\work\WebGL Learning\three.js-master\examples\webgl_shadowmap_performance

另外附上一些以前找到的可以用的參考資料：2014/9/30 今日學習

回頭估狗，鍵入：three.js move object forward，發現可以用Object3D.translateZ( distance )來達到前進的效果

• Move Forward Relative to Object Rotation in Three.js - Stack Overflow
• Three.js matrix to rotate and move forward - Stack Overflow
• Move Forward · Issue #70 · mrdoob/three.js

不過測試時一直失敗，看到demo.html裡的code有delta，讓我想起以前曾去找過相關資料

onRenderFcts.push(function(delta, now){
 var delta = -0.15 * Math.PI*2*delta
 angle += delta
 position.x = Math.cos(angle)*radius
 position.z = Math.sin(angle)*radius
 object3d.rotateY(-delta)
})

關於delta請見

• Time-based Animation with HTML 5 Canvas and JavaScript | Viget

經過反覆測試終於有一點小成果，進到demo.html，搜尋comment區塊的code

如截圖，裡面有一段註解：一直轉一直轉一直轉，那就是讓我們的人一直繞圈圈轉的關鍵，當我們把他們都用註解，如下

則我們就能看到我們的人都集中在中心點

若我加入object3d.translateZ(1)

就能看到人物向我們移動一步

若我改寫成object3d.translateZ(-1)，則人物就會向後移一步

而我們剛剛註解掉的那段code

onRenderFcts.push(function(delta, now){
 var delta = -0.15 * Math.PI*2*delta
 angle += delta
 position.x = Math.cos(angle)*radius
 position.z = Math.sin(angle)*radius
 object3d.rotateY(-delta)
})

就是人物會一直轉的關鍵，他其實是在說，你的動畫是用一個array去呈現，所以你每次push一張畫面進來，所以我要改應該是要改這段，但是我覺得明天自己重頭寫一個html檔會比較妥當，因為理想狀況我希望我的camera是用側拍，這樣才看得清楚我要的移動動作