HTML5+WebGLシーンがブラウザで簡単に作れる「Goo」を試してみた

siren で船型を作成し、Maya で艤装を作成して、Blender に持っていって Unity 向けに出力した FBX 形式の駆逐艦「島風」のモデルを試しに読み込ませてみると、難なく使うことができました。

上の画面内でマウスをドラッグすることにより、視点を変更することができます。また、Android の Firefox や Chrome でも、こちらの URL に直にアクセスすることにより、3D 表示&フリックによる視点回転とズームができました。

簡単な操船や海戦ゲームくらい作れそうですね!

JQuery覚書その1

JQueryをまともに使わなければなー、ということで自分用の覚え書きを書いておきます。

セットアップ

通常の JavaScript のようにホストに設置しても良いし、JQuery の公式や Google が提供している API 経由で読み込ませてもOK。

<script src="jquery-1.11.0.min.js"></script>

基本

エレメントには、$() でアクセスする。

<div id="hoge"></div>

$("#hoge").text("hello, world");
$("#hoge").css("background", "#FFFF00");

getElementById をとってきて innerHTML をいじくるような面倒くさいことはない。

#hogeid="hoge".hogeclass="hoge" というふうに ID や Class で指定可能。
タグで指定する場合は $('div') となる。また、複数のエレメントを指定するには、$('#foo,#bar') のようにカンマ区切りも可能。

メソッド

引数なしで呼ぶと取得、引数を渡せばその引数で設定。

  • text()
    div内などのプレーンテキスト
  • html()
    生HTML
  • val()
    input タグなどの保持している値
  • css(属性名, [値])
    css だけ属性名は必須。値は設定時のみ。

エレメントつくるよー

作るだけなら $('<p>hoge</p>') と HTML 直書きで良い。
突っ込むには、

  • elementA.append(elementB)
    elementAの中にelementBを突っ込む。
  • elementA.wrap(elementB)
    elementAをelementBで囲む。elementAが複数要素だったら個別に囲む。
  • elementA.wrapAll(elementB)
    elementAをelementBでまとめて囲む。
  • elementA.before(elementB)
    elementAの前にelementBをおく。
  • elementB.after(elementB)
    elementAの後にelementBをおく。

データを保持させとくよー

element.data(キー, 値)
var = element.data(キー)

エレメント自身にデータを持たせておいて、必要な時に使える。ページが更新されるまで生きてる。

イベント

エフェクト

非同期通信

var param = {key:”value”};
element.load(“hoge.txt”[, param])

これで element.text に結果を突っ込める。
post/getメソッドを使って、取得後の処理を行いたい場合は

$.get(“hoge.cgi”, param, func);
$.post(“hoge.cgi”, param, func);
function func(result) { … }

funcのようにコールバック関数を指定する。result にとってきた値が入る。この場合生テキスト。

$.getJSON(“hoge.json”, param, func)

で JSON 形式で取得。result は JSON オブジェクトとして使えるので、

{ "foo": "bar" }

が内容だった場合、var str = result.foo; とすると str に “bar” が入る。

シリアライズ

フォームの内容をまとめてシリアライズ!

var param = $('#form1').serialize();

こいつをpost()とかget()とかに投げる。べんり。

JavaScriptによる二進数時計

以前書いたコードが出てきたので貼っておきます。今見直してみると、ちょっとムダがあるコードですね。 JavaScriptは書けません、でお茶を濁しておきましょう。

// 2010/01/08 jbClock by dyama
// for Firefox, Opera and Google Chrome

var BgColor = '#F00000';
var BaseColor = '#351309';
var ActiveColor = '#FF470F';
var Height = 8;
var Width = 16;

// 文字列を指定した桁数kになるまで頭にmを挿入する
function kt( s, k, m ){ while( s.length < k ){ s = m + s;} return s;}

function bclock()
{
    var n = new Date();
    // toString(2) ... 二進数文字列にする
    // kt で頭に文字列"0"を挿入して返す
    // 0と1の文字列だと、後でHTMLを一括置換した時に置換対象以外も
    // 置換してしまうので一時的に文字0を文字列$zに、文字1を文字列$oにする
    var h = kt(n.getHours().toString(2),5,0).replace(/0/g,'$z').replace(/1/g,'$o');
    var m = kt(n.getMinutes().toString(2),6,0).replace(/0/g,'$z').replace(/1/g,'$o');
    var s = kt(n.getSeconds().toString(2),6,0).replace(/0/g,'$z').replace(/1/g,'$o');
    // 0だった場合と1だった場合のHTMLタグを準備
    var t = '<td bgcolor="' + ActiveColor + '" height="' + Height + '" width="' + Width + '"></td>';
    var f = '<td bgcolor="' + BaseColor + '" height="' + Height + '" width="' + Width + '"></td>';
    var o = document.getElementById("area");
    // "$z$z$o$z$o" のような文字列のままタグ挿入
    var v = '<tr><td bgcolor="$a" height="' + Height + '" width="' + Width + '"></td>' + h + "</tr><tr>" + m + "</tr><tr>" + s + "</tr>";
    var a = (n.getSeconds()%2)?BgColor:BaseColor;
    // 最後に$zを0用のHTMLに、$oを1用のタグにHTML全体を一括置換
    o.innerHTML = v.replace(/\$z/g,f).replace(/\$o/g,t).replace(/\$a/,a);
    // 1秒ごとに実行する
    setTimeout("bclock()", 1000);
}

これを実行すると、次のように見えます。