複数のGOMLファイルを扱う
1つのドキュメント上に存在できるGOMLのDOMツリーは1つだけですが、複数のGOMLファイルを読み込むことが可能です。DOM構築待機のgomlメソッドを複数回使うことで、1番最初に読み込まれたファイルのhead要素とbody要素それぞれの末尾に、新たなファイルのhead要素とbody要素それぞれの子要素が追加されていきます。
GOML要素を選択する
jThreeはGOMLのDOMを扱うためのグローバルオブジェクトです。jQueryと同様にCSSセレクタで選択して生成したjThreeオブジェクトに対し、メソッドチェーンで次々処理を加えていくことができます。
GOML要素を選択する方法はjQueryにおける「$」の代わりに「jThree」を使うと覚えてください。.find()や.children()などjQueryの要素探索系メソッドも大部分が有効です。
jThree( "CSSセレクタ" ).find( 条件 )・・・
3DオブジェクトのCSSを操作する
3Dオブジェクト要素のCSSを操作できます。CSSの一覧は第2回の記事をご覧ください。ここもjQueryと同様にcssメソッドを使います。引数にプロパティ名と値のペアか、ハッシュの形で値を変更します。
jThree( "CSSセレクタ" ).css( "プロパティ名", 値 ).css( { プロパティ名: 値 } );
positionやscaleなど値を複数取るプロパティは、テキスト以外に配列を指定することもできます。
jThree( "CSSセレクタ" ).css( "position", [ 10, 10, 10 ] );
cssメソッドにプロパティ名だけを与えるとCSSの値を取り出すことができます。positionやscaleなど値を複数取るプロパティは配列で値が返されます（将来的には配列ではなくベクトルオブジェクトが返されるようになる予定です）。
CSSアニメーション
CSSによるアニメーションもjQueryと「ほぼ」同じくanimateメソッドを利用できます。違うのはstepやcompleteオプションのコールバックに渡される引数の仕様です。stepのコールバックの第1引数にはeasingを加味したアニメーションの進行率が渡されます（1で100%）。completeのコールバックの引数には何も渡されません（将来的にstepとcompleteオプションにjQuery同様のオブジェクトが渡されるよう変更する予定です）。
jQueryのeasingプラグインを読み込むことで自動的にjThreeのeasingオプションも拡張されます。デフォルトで使える「linear」と「swing」以外のプラグインによって増えるeasing名を以下で紹介します。
| jswing | easeInQuad | easeOutQuad | easeInOutQuad |
| easeInCubic | easeOutCubic | easeInOutCubic | easeInQuart |
| easeOutQuart | easeInOutQuart | easeInQuint | easeOutQuint |
| easeInOutQuint | easeInSine | easeOutSine | easeInOutSine |
| easeInExpo | easeOutExpo | easeInOutExpo | easeInCirc |
| easeOutCirc | easeInOutCirc | easeInElastic | easeOutElastic |
| easeInOutElastic | easeInBack | easeOutBack | easeInOutBack |
| easeInBounce | easeOutBounce | easeInOutBounce |
CloudflareのCDNから利用できるjQuery.easing.jsのURLを、以下で手に入れることができます。
属性値を操作する
jThreeではattrメソッドにより一部の属性値を操作することができます。以下に現時点で操作に対応している主な属性を紹介します。各属性の詳細は第3回の記事をご覧ください。
| 要素名 | 属性名 |
|---|---|
| txr | type属性なし：src |
| type = "canvas"：draw | |
| type = "scene"：cameraとinvisible | |
| rdr | frameとcamera |
