X3Dの紹介
X3DってのはVRMLの派生でXMLになったやつだと思います。ブラウザはたくさんあるようだけど、不安定だったり、動作が恐ろしい感じだったり、読み込めないファイルがあったり、実装が全てに至ってなかったりと、いまいちなのが多いようです。
その中でFlux Playerはウェブブラウザのプラグインとして使えて、JavaScriptからのインターフェースがあるので色々できます。ブラウザから簡単に3Dしたい場合はこれが一番いいかも。
参考。不思議なゲームができる。
http://www.ajax3d.org/content.html
ファイルのロード
html
<embed width="640" height="480" type="model/x3d" dashboard="0" bgcolor="0x000000" src="" id="x3d">
test.x3d
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.0//EN" "http://www.web3d.org/specifications/x3d-3.0.dtd"> <X3D> <Scene> </Scene> </X3D>
var host = document.getElementById("x3d"); var browser = host.getBrowser(); var context = null; browser.addBrowserListener({ browserChanged: function(e){ switch(e){ case 0: alert("initialized"); break; case 1: alert("shutdown"); break; case 2: alert("connection error"); break; case 3: alert("url error"); break; } context = browser.getExecutionContext(); } }); browser.loadUrlS("test.x3d");
loadURLというメソッドもあるけど、面倒臭そうなのでloadUrlSを使う。
ListernerにbrowserChangedを実装したObjectを設定すると、ファイルが読み込まれたときbrowserChangedが実行される。
読み込むファイルは図形が何も記述されていないので、ここから追加していく。
ノードの追加
var x3dText = [ "Transform {", "rotation 1 1 0 10", "children [", "Shape{", "geometry Box{} ", "appearance Appearance{ ", "material Material{ ", "diffuseColor 1 0 0 ", "}", "}", "}", "TouchSensor{}", "]", "}" ].join(" "); var scene = browser.createX3DFromString(x3dText); var nodes = scene.getRootNodes(); context.addRootNode(nodes[0]); var diffuseColor = nodes[0].children[0].appearance.getValue().material.getValue().diffuseColor; nodes[0].children[1].getField("touchTime").addFieldEventListener({ readableFieldChanged: function(node, time){ diffuseColor.b ^= 1; } });
何気にVRMLで記述して作る。
フィールドの値にはgetFieldメソッドを使ってからgetValueを使うのと、プロパティから使う方法がある。プリミティブ値の場合、値を取得するだけならプロパティを使えばいいけど、イベントを追加したいときなんかは、getFieldを使ってX3Dのオブジェクトを取得して追加する。
Fieldへイベントを追加するときはreadableFieldChangedを実装したObjectを用意する。全てのFieldにaddFieldEventListenerが実装されているものの動作が謎なものもある。