3Dプログラミング講座・その15:javascriptのクラス活用法

こんな感じだと便利


class Hoge {
  constructor(a, b) {

    this.typename = "Hoge";
    this.menberA = 0;
    this.menberB = 0;
    if(b != null) {
        this.menberA = a;
        this.menberB = b;
    }

  }
  isHoge(){
    if(this.typname != null) return (this.typename === "Hoge");
    return false;
  //return ((this.typname != null) ? (this.typename === "Hoge") : false); でもいいかも
  }
 hage(c) {
    this.menberA = c;
  };
}

//オーバーライドして振る舞いを変更
Hoge.prototype.hage = function (c) {
  this.menberB = c;
}

//テキストコマンド実行クラス
class CommandProc {
  constructor() {
    this.typename = "CommandProc";
    this.cmdnum = 0;
    this.cmdline = new Array();
    this.cmdstr = ['null', 'CMD_A', 'CMD_B'];
    this.cmdelm;
    return this;
  }
  init(){
    //コマンド入力のテキストボックス
    this.cmdelm = document.getElementById('TXT_CMD');
  }
  analyzecmdline(str){
    var work = str;
    this.cmdline = new Array();
    work = work.replace( /\t/g,"");
    work = work.replace( /\s/g,"");
    this.cmdline = work.split(",");
  }
  checkcmd(){
    this.cmdnum = 0;
    var str = this.cmdelm.value;
    this.analyzecmdline(str);
    var i;
    for(i = 0; i < this.cmdstr.length; i++){
      if(this.cmdline[0] == this.cmdstr[i]){
        this.cmdnum = i;
        return;
      }
    }
  }
  done(){
    this.checkcmd();
    switch(this.cmdstr[this.cmdnum]){
    case 'CMD_A':
                                break;
    case 'CMD_B':
                                break;
    default:
    }
  }
  passivebeforedraw(){
    switch(this.cmdstr[this.cmdnum]){
    case 'CMD_A':
                                break;
    case 'CMD_B':
                                break;
    default:
    }
  }
  passiveafterdraw(){
    switch(this.cmdstr[this.cmdnum]){
    case 'CMD_A':
                                break;
    case 'CMD_B':
                                break;
    default:
    }
  }
  click(){
    switch(this.cmdstr[this.cmdnum]){
    case 'CMD_A':
                                break;
    case 'CMD_B':
                                break;
    default:
    }
  }
}



Hogeクラスはクラス名をコンストラクタで埋め込んで型チェックに使う
hageメンバ関数を必要に応じてオーバーライドで書き換え
みたいな


CommandProcクラスはテキストボックスに入力されたコマンドラインを解析、実行するクラスです
例えば CMD_A, 1, 2, 3 とTXT_CMDテキストボックスに入力すると
スペースとタブを消去して
CommandProc.cmdline = ['CMD_A', '1', '2', '3'];と解析されて
各種実行タイミングでCMD_A(1, 2, 3);の関数呼び出しみたいに実装する
CommandProcクラスに

splitname(str){
 var ret = str.split(":");
 return ret;
}

を追加して引数に名前を付けたりしても便利
CMD_A, NAME_A : 111, NAME_B : 222 と入力で
CommandProc.cmdline = ['CMD_A', 'NAME_A:111', 'NAME_B:222'];と解析されて
var str = CommandProc.splitname(CommandProc.cmdline[1]); で
str = ['NAME_A', '111']と解析される

導入例
コマンド入力('CMD_A, ...', 'CMD_B, ...')



ソース

### SCRIPT #########

//テキストコマンド実行クラス
class CommandProc {
  constructor() {
    this.typename = "CommandProc";
    this.cmdnum = 0;
    this.cmdline = new Array();
    this.cmdstr = ['null', 'CMD_A', 'CMD_B'];
    this.cmdelm;
    return this;
  }
  init(){
    //コマンド入力のテキストボックス
    this.cmdelm = document.getElementById('TXT_CMD');
  }
  analyzecmdline(str){
    var work = str;
    this.cmdline = new Array();
    work = work.replace( /\t/g,"");
    work = work.replace( /\s/g,"");
    this.cmdline = work.split(",");
  }
  checkcmd(){
    this.cmdnum = 0;
    var str = this.cmdelm.value;
    this.analyzecmdline(str);
    var i;
    for(i = 0; i < this.cmdstr.length; i++){
      if(this.cmdline[0] == this.cmdstr[i]){
        this.cmdnum = i;
        return;
      }
    }
  }
  done(){
    this.checkcmd();
    switch(this.cmdstr[this.cmdnum]){
    case 'CMD_A':
                                var str = "";
                                var i;
                                if(1 < this.cmdline.length) str += this.cmdline[1];
                                for(i = 2; i < this.cmdline.length; i++) str += ", " + this.cmdline[i];
                                alert("CMD_A : " + str);
                                break;
    case 'CMD_B':
                                var str = "";
                                var i;
                                if(1 < this.cmdline.length) str += this.cmdline[1];
                                for(i = 2; i < this.cmdline.length; i++) str += ", " + this.cmdline[i];
                                alert("CMD_B : " + str);
                                break;
    default:
    }
  }
}

var CMDP = new CommandProc();

function onDone(){
  CMDP.done();
}

### HTML #########

<body ... onload="CMDP.init();">

...

コマンド入力('CMD_A, ...', 'CMD_B, ...')<br>
<input type="text" id="TXT_CMD" name="TXT_CMD" size='80' value=''><br>
<input type="button" id="BTN_DONE" name="BTN_DONE" value='Done' onclick='onDone();'><br>

...







3Dプログラミング入門講座
NAS6LIB
ポリゴンテスト解説・x3dom使い方
その1:ベクトル
その2:行列
その3:クォータニオン
その4:基本総復習・実践
その5:応用その1・メッシュアニメーション、動的テクスチャ
その6:応用その2・GLSL、カスタムシェーダー、キーボード、ファイル
その7:応用その3・ゲームプログラミング、タグの動的追加
その8:応用その4・GLSL、シェーダー、その2
その9:物理演算その1・電卓で相対性理論を解く方法
その10:物理演算その2・相対性理論的ニュートン力学
その11:物理演算その3・ケプラー方程式で惑星軌道シミュレーターを作る
その12:物理演算その4・ルンゲクッタ法で作った 相対性理論的ニュートン力学物理エンジンで惑星軌道シミュレーターを作る
その13:経路探索(A*:A-STAR)&巡回セールスマン問題 : 巨大サイズ : くろにゃんこ
その14:プログラミングにおける配列テーブルテクニック
その15:javascriptのクラス活用法
その16:透視射影公式テスト
その17:ケプラー方程式カプセルライブラリ使用法
その18:CSVファイル処理
その19:物理演算その5・重力多体問題
その20:同次座標について(3D座標系の基本の基本)


 ■■■ THREE.JSプログラミング講座 ■■■ 
THREE.JSテスト解説・THREE.JS使い方
THREE.JS examplesをいじってみた(フレネル反射透過シェーダー)
THREE.JS (半透明シェーダー)
THREE.JS 3D演算で必要な計算(具体例)★とても重要★
THREE.JS THREE-VRM をいじってみた


<<prev プログラミングにおける配列テーブルテクニック : 透視射影公式テスト >>





戻る