f8g

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>

javascript

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が実装されているものの動作が謎なものもある。

API

インタフェースは基本的にSAIとかってのになっている。調べればXj3DのJavadocなんかが出てくるけど、結構違う部分が多い。インストールしたディレクトリにあるAnima.ocxをオブジェクトブラウザなどで開いて調べると簡単にだけど分かる。