@HTML
<script type="text/javascript">
// 主となるライブラリを複数回ロードしない
if ( window['loadThree'] !== true ) {
	window['loadThree'] = true;
	document.write("<"+"script type=\"text/javascript\" src=\"http://lightbox.in.coocan.jp/three/three.min57.js\"></"+"script>");
}
</script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/OrbitControls.js"></script>


<script type="text/javascript">

var w = 600;
var h = 500;

// 変数から表示エリアを作成
document.write("<div id=\"three_area\" style='width:"+w+"px;height:"+h+"px;'></div>");

// お決まり『三種の神器』
var camera, scene, renderer;
var controls, cube;

// 環境作成
init();

// ループ処理
animate();

// ****************************************************************
// 表示環境の準備( 開始は animate )
// ****************************************************************
function init() {

	camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
	camera.position.set( 0, 0, 500 );

	// マウスコントロール( 左ドラッグ : 回転、中央ドラッグ : スケール、右ドラッグ : 位置変更 )
	// ※ カメラ位置は変わっていません
	controls = new THREE.OrbitControls( camera );
	controls.autoRotate = true;
	controls.autoRotateSpeed = 5; //default 2.0
	controls.addEventListener( 'change', render );

	scene = new THREE.Scene();

	// キューブ
	var geometry = new THREE.CubeGeometry( 200, 200, 200 );
	for ( var i = 0; i < geometry.faces.length; i ++ ) {

		geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );

	}
	var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } );
	cube = new THREE.Mesh( geometry, material );
	scene.add( cube );

	renderer = new THREE.CanvasRenderer();
	renderer.setSize( w, h );
	document.getElementById("three_area").appendChild( renderer.domElement );

}

function animate() {

	requestAnimationFrame( animate );
	controls.update();

}

function render() {

	renderer.render( scene, camera );

}

</script>
@HEND

@DIV
<script type="text/javascript">
// 主となるライブラリを複数回ロードしない
if ( window['loadThree'] !== true ) {
	window['loadThree'] = true;
	document.write("<"+"script type=\"text/javascript\" src=\"http://lightbox.in.coocan.jp/three/three.min57.js\"></"+"script>");
}
</script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/OrbitControls.js"></script>


<script type="text/javascript">

var w = 600;
var h = 500;

// 変数から表示エリアを作成
document.write("<div id=\"three_area\" style='width:"+w+"px;height:"+h+"px;'></div>");

// お決まり『三種の神器』
var camera, scene, renderer;
var controls, cube;

// 環境作成
init();

// ループ処理
animate();

// ****************************************************************
// 表示環境の準備( 開始は animate )
// ****************************************************************
function init() {

	camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
	camera.position.set( 0, 0, 500 );

	// マウスコントロール( 左ドラッグ : 回転、中央ドラッグ : スケール、右ドラッグ : 位置変更 )
	// ※ カメラ位置は変わっていません
	controls = new THREE.OrbitControls( camera );
	controls.autoRotate = true;
	controls.autoRotateSpeed = 5; //default 2.0
	controls.addEventListener( 'change', render );

	scene = new THREE.Scene();

	// キューブ
	var geometry = new THREE.CubeGeometry( 200, 200, 200 );
	for ( var i = 0; i < geometry.faces.length; i ++ ) {

		geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );

	}
	var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } );
	cube = new THREE.Mesh( geometry, material );
	scene.add( cube );

	renderer = new THREE.CanvasRenderer();
	renderer.setSize( w, h );
	document.getElementById("three_area").appendChild( renderer.domElement );

}

function animate() {

	requestAnimationFrame( animate );
	controls.update();

}

function render() {

	renderer.render( scene, camera );

}

</script>
@END