20141016 今日學習

今天讀了"交大首辦線上課程、實體認證考試"這篇文章後，找了交大的開放式課程

• 國立交通大學開放式課程(OpenCourseWare, OCW)

另外還有

• 台灣開放式課程聯盟

最近一點感想，對教育沒熱忱的人真的不適合教書 XD

Try and get it 

今日目標，就玩出各種動作，然後把他們保留下來就可了

做出升龍拳的動作，但是只有手臂，身體還沒有旋轉

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {        armLRotationZ : 0,
 armRRotationZ : Math.PI,  
 armRRotationY : Math.PI+2*Math.PI/5    
}).pushKeyframe(0.3, {
 armLRotationZ : 0,
 armRRotationZ : Math.PI, 
 armRRotationY : Math.PI+Math.PI/5  
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

一個小技巧，如果要看位置在哪，可以前後兩張frame，相同的座標軸設一樣的參數 

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {    armLRotationZ: 0,
    armRRotationZ: Math.PI-Math.PI/5,  
    armRRotationY: Math.PI+Math.PI/5   //設一樣的參數 
}).pushKeyframe(0.3, {
    armLRotationZ: 0,
    armRRotationZ: Math.PI-Math.PI/5, 
    armRRotationY: Math.PI+Math.PI/5   //設一樣的參數 
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

Math.PI = 180度，+theta 向外轉， -theta向內轉，(theta角度)

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, { armLRotationZ: 0,
    armRRotationZ: -Math.PI,  //-Math.PI = 手臂向外轉180度
}).pushKeyframe(0.3, {
    armLRotationZ: 0,
    armRRotationZ: -Math.PI, 
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

歷史性的一刻

• armRRotationZ : -Math.PI/2

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {
    armLRotationZ: 0,
    armRRotationZ: -Math.PI/2,   
}).pushKeyframe(0.3, {
    armLRotationZ: 0,
    armRRotationZ: -Math.PI/2,  
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

測試code時發現一些不太一樣的地方

• armRotationX，armRotationX它是兩手一起動

---

var angleRange = Math.PI/2-Math.PI/10;
animations.add('clothEsline', THREEx.createAnimation().pushKeyframe(0.5, {    armLRotationZ: 0,
    armRotationX: 0
}).pushKeyframe(0.3, {
    armLRotationZ: 0,
    armRotationX: +Math.PI/2   //兩手一起動
}).propertyTweens(propTweens).onCapture(onCapture).onUpdate(onUpdate));

基於此概念，我測試了legRotationX，legRotationX也是兩腳前後擺動

先前自定義了bodyRotationY，今天終於來測試，結果就悲劇了

可以從上面的圖看到，只有身體轉動，手臂、腳都沒有轉 QAQ

當初身體旋轉的程式碼設定如下：

var onUpdate = function(position){
  ...
  character.body.rotation.y
            = position.bodyRotationY ?  position.bodyRotationY : 0; 
  character.body.rotation.y
            = position.bodyRotationY ? -position.bodyRotationY : 0;
  ...
}

var onCapture = function(position){
   ...
   position.bodyRotationY  = character.body.rotation.y;
   ...
}

var propTweens = {
   ...
   bodyRotationY : tweenAngle,
   ...
}

有必要重新修改這段code，可參考player.html裡，靠鍵盤按鈕就讓身體整個旋轉

• player.html，按"A"或是"arrow left"

用WebStorm查code之後，身體的控制是透過threex.minecraftcontrols.js

必須要找出player.html與animation.html兩者update frame的差異

需要查一下threex.minecraftplayer.js裡頭update()是怎麼寫的

THREEx.MinecraftPlayer = function(){
 var updateFcts= [];
 this.update = function(delta, now){
   updateFcts.forEach(function(updateFct){ 
     updateFct(delta, now)
   })
 }.bind(this)
   ...
   ...
}

必須要寫一個判斷機制，還有搞清楚下面每一個功能後，去改寫player.html

• armRRotationZ   // 右手左右擺動，+theta向右，-theta向左
• armLRotationZ

• armRotationX   // 手同時前後擺動

• legRRotationZ  // 右腳左右擺動，+theta向右，-theta向左
• legLRotationZ

• legRotationX   // 腳同時向左右擺動

• bodyRotationY  // 自定義，只有身體旋轉 (fail)

• armRRotationY // 自定義，手臂靠緊身體，螺旋轉
• armLRotationY // 自定義

目標

改寫player.html的code，試著做到前進五步，身體旋轉


有必要好好研究一下threex.minecraftplayer.js裡頭前進後退的code是怎麼寫的，剛剛測試按鍵不要一直按住，改用點點點點點去點按鍵，看看效果如何，結果改用此方法，則手腳擺動的幅度不大

研究threex.minecraftplayer.js裡面定義了

var controls = new THREEx.MinecraftControls(character.root)

所以我回頭去看threex.minecraftcontrols.js的code

THREEx.MinecraftControls = function(object3d, input){
  input = input || {}
  this.speed = 2;
  this.angularSpeed = 0.2 * Math.PI * 2;
  this.input = input;
  this.object3d = object3d;

  // user control
  this.update = function(delta, now){
     ...
     ...
     ...
     // up/down
     var distance = 0;
     if( input.up ) distance = +this.speed * delta;  //向前
     if( input.down ) distance = -this.speed * delta;  //向後
     if( distance ){
        var velocity = new THREE.Vector3(0, 0, distance);
        var matrix = new THREE.Matrix4()
                         .makeRotationY(object3d.rotation.y);
        velocity.applyMatrix4( matrix );
        object3d.position.add(velocity);
     }
  }
}

於是乎，查了一下mrdoob給的three.js library

• Vector3( x, y, z )這就只是個向量
• Matrix4，其實是指一個4 x 4 的矩陣

現在我們在回來看一次上面的code吧

紅色框框裡的那幾行都只是為了產生我要移動到的"位置"  ，也就是下面這條

• object3d.position.add(velocity);

剛剛無聊把裡面的code改成3倍速，結果看起來會有殘影的效果 XD

• if( input.up ) distance = +3*this.speed * delta;  //向前
• if( input.down ) distance= -3*this.speed * delta;  //向後

測試了幾種寫法，想到剛剛開給Bosh看各種效果時，舊文裡頭

threex-master\src\threex.godrays\examples，它的雷射光就是固定路徑巡迴

而我遊戲戰鬥中的設計，應該是走上前攻擊，在原路徑回來，換句話說我該去改變我camera的視角，camera在斜上方，由上往下側拍，紀錄戰鬥畫面

恩....看來該去研究一下threex-master\src\threex.godrays裡的code，看看他是怎麼寫的，以及如何在一個畫面放入兩個東西，圓環與雷射光