前回はソースを見ても全く理解できなかったので、とりあえず簡単なところからはじめてみようと思います。
動きのあるものは手に負えないので、完全に静的な図形を描画してみます。
単に図形を適当に並べているだけという手抜き極まりない代物ですが、非常に少ないコーディング量で図形を描画できました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jThree - demo</title>
<style>
#jtreeSample {
position: fixed;
width: 100%; height: 100%;
top: 0%; left: 0%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="jtreeSample">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="script/jThree.js"></script>
<script src="01.js"></script>
</div>
</body>
</html>
キャンバスを用意してJavaScriptを呼んでいるだけです。
/* *
* sampleTxr2のテクスチャを作るらしい
* @param CanvasRenderingContext2D
*/
function drawSampleTxr2( ctx ) {
var base = "#fff", color = "#2ff";
ctx.fillStyle = base;
ctx.fillRect(0, 0, 32, 32);
ctx.fillStyle = color;
ctx.fillRect(0, 0, 16, 16);
ctx.fillStyle = base;
ctx.fillRect(8, 8, 8, 8);
ctx.fillStyle = color;
ctx.fillRect(16, 16, 16, 16);
ctx.fillStyle = base;
ctx.fillRect(24, 24, 8, 8);
}
$( function() {
// jThree.gomlを呼ぶだけで、中身が描写される
jThree.goml("01.goml");
} );
jThree.goml()を呼び出すだけでお仕事終了です。
jThree.goml()の第二引数でコールバックを受け取ることが可能ですが、どう使っていいかわからなかったので今回は受け取っていません。
drawSampleTxr2()は以下のgomlから呼び出される関数です。
中身はこちらを参考というかコピペ。
<?xml version="1.0" encoding="UTF-8"?>
<goml>
<head>
<!-- 表示先IDを指定 -->
<rdr frame="#jtreeSample" camera="camera:first"/>
<!-- gmtは図形 -->
<gmt id="Cube1" type="Cube" param="5 1 3 1 1 1" /><!-- 直方体 x/y/z/横分割数/縦分割数/奥分割数 -->
<gmt id="Circle1" type="Circle" param="2 36 0 6.28" /><!-- 円 半径/分割数/開始角度/中心角 -->
<gmt id="Cylinder1" type="Cylinder" param="1 4 3 15 1 false" /><!-- 円柱 上半径/下半径/z/周囲分割数/縦分割数/筒状か -->
<gmt id="Sphere1" type="Sphere" param="2 20 10" /><!-- 球 半径/経度分割数/緯度分割数 -->
<gmt id="Plane1" type="Plane" param="5 1 1 1" /><!-- 長方形 x/y/横分割数/縦分割数 -->
<!-- mtrは材質 -->
<mtr type="MeshLambert" id="sampleMtr" param="side:0;color:#fff;" />
<!--txrはテクスチャ -->
<txr type="canvas" id="sampleTxr2" param="width: 32; height: 32; repeat: 5; wrap: 0;" draw="drawSampleTxr2( a );" />
<mtr type="MeshPhong" id="sampleMtr2" param="side:2; map: #sampleTxr2;" />
</head>
<body>
<scene>
<!-- カメラの位置 -->
<camera style="positionZ: 10;" />
<!-- 光源 x/y/z -->
<light type="Dir" style="light-color: #f00; position: 0 10 5;" />
<light type="Dir" style="light-color: #00f; position: 0 -10 -5;" />
<!-- 図形の描画 -->
<mesh gmt="#Cube1" style="position: -1.5 3 0;" />
<mesh gmt="#Circle1" style="position: 2 2.5 0;"/>
<mesh gmt="#Cylinder1" style="position: 0 -1 0;"/>
<mesh gmt="#Sphere1" style="position: -2.2 0 0;" mtr="#sampleMtr" />
<mesh gmt="#Plane1" style="position: 2.2 0 0;rotate:2.2 0 0;" mtr="#sampleMtr2" />
</scene>
</body>
</goml>
図形等は以下を参考にしています。
ここらへんっていったいどうやって調べてるんだ？ソース読んでるの？
基本的に<head>内に図形やテクスチャ等の要素を記述し、<body>でそれぞれを配置していくという構造になっているようです。
まず<rdr frame>で描写先を指定。
<gmt>で各図形を記述。
予め定義されている図形であれば、パラメータを適当に設定するだけで非常に簡単に作図できます。
<mtr>は材質を指定します。
http://codezine.jp/article/detail/7786?p=2
種類はTHREE.**Materialで規定されているようで色々種類があるみたいなのですが、どうも指定するとエラーになったりparam要素が効かなかったりでどれを指定していいのかよくわかりません。
<txr>はテクスチャです。
今回のサンプルではdrawSampleTxr2()を呼び出してテクスチャを設定していますが、かわりにsrcで直接画像を貼ったりもできます。
<body>内で各要素を実際に表示します。
<camera>でカメラの位置を指定。
遠く離せば、それだけ見える図形が小さくなります。
<light>で光源を設定。
材質に光源が当たると反射して図形が見えるようになります。
光源が存在しなければ図形は真っ暗です。
ちなみに、光源色と、<mtr>で設定されている材質色は論理積になっています。
どういうことかって、光源が青で材質色が赤だった場合、図形の色は紫ではなく真っ暗になります。なんでだ。
<mesh>で図形を表示。
gmt要素で対象のIDを指定、style要素で描画位置や回転等の見た目を設定。
styleは概ねCSSっぽい書き方ができるようです。
基本的にオブジェクトの設置はmeshで行います。
どうにかこうにか、かろうじてjThreeで図形を描写することに成功しました。
なんかこのままやっていってもミクさんを動かせるようになる気がしないんだが大丈夫か。