GINPRO / SQLの窓と銀プログラマ

<style type="text/css">
#container_three {
	width: 600px;
	border: solid 1px #ccc;
	background-color: #eee;
}
</style>

<script type="text/javascript" src="http://winofsql.jp/three/Three_51.js"></script>

<div id="container_three"></div>
<script type="text/javascript">
// *********************************************************
// 共通
// *********************************************************
var container, stats;
var camera, scene, renderer;
var mesh,mesh2;
var w = 600;
var h = 700;
var controls;
var clock;
var data_target  = 'http://winofsql.jp/three/image/001.png';
var data_target2 = 'http://winofsql.jp/three/image/002.png';

// *********************************************************
// IE 用
// *********************************************************
if(!window["console"]){window["console"]={};window["console"]["log"]=function(){}}

// *********************************************************
// Opera 用
// *********************************************************
if( !XMLHttpRequest.DONE ) {
	console.log("setting");
	XMLHttpRequest.prototype.DONE = 4
	XMLHttpRequest.prototype.HEADERS_RECEIVED = 2
	XMLHttpRequest.prototype.LOADING = 3
	XMLHttpRequest.prototype.OPENED = 1
	XMLHttpRequest.prototype.UNSENT = 0
}

// *********************************************************
// WebGL 利用判定
// *********************************************************
var WebGL_chk = ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )();

// *********************************************************
// 全体構成
// *********************************************************
container = document.getElementById( 'container_three' );
init();
animate();

// *********************************************************
// 初期処理
// *********************************************************
function init() {

	// *************************************************
	// シーン
	// *************************************************
	scene = new THREE.Scene();
	scene.position.y = 0;
	scene.position.x = 0;

	// *************************************************
	// カメラ
	// *************************************************
	camera = new THREE.PerspectiveCamera( 50, w / h, 1, 10000 );
	camera.position.set( 0, 0, 650 );
	scene.add( camera );

	// *************************************************
	// Trackball コントロール
	// *************************************************
	controls = new THREE.TrackballControls( camera );

	// *************************************************
	// データの読み込み
	// *************************************************
	var image = new Image()
	image.onload = function () {

		var texture = new THREE.Texture( this );
		texture.needsUpdate = true;
		var material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});

		// 平面表
		mesh = new THREE.Mesh(new THREE.PlaneGeometry(350, 400, 5, 5), material);
		mesh.rotation.x = 0;
		mesh.rotation.y = 0;
		scene.add(mesh);
		
	};
	image.src = data_target;

	var image2 = new Image()
	image2.onload = function () {

		var texture2 = new THREE.Texture( this );
		texture2.needsUpdate = true;
		var material2 = new THREE.MeshBasicMaterial({map: texture2, overdraw: true});

	        // 平面裏
		mesh2 = new THREE.Mesh(new THREE.PlaneGeometry(350, 400, 5, 5), material2);
		mesh2.rotation.x = 0;
		mesh2.rotation.y = 180 * Math.PI / 180; // 180°( * Math.PI / 180 が固定 )
		scene.add(mesh2);
		
	};
	image2.src = data_target2;

	// *************************************************
	// 描画
	// *************************************************
	renderer = new THREE.CanvasRenderer( );
	renderer.setSize( w, h );

	// *************************************************
	// DIV に適用
	// *************************************************
	container.appendChild( renderer.domElement );

}


// *********************************************************
// アニメーションループ
// *********************************************************
function animate() {

	requestAnimationFrame( animate );
	render();

}

// *********************************************************
// 表示
// *********************************************************
function render() {

	controls.update( );
	renderer.render( scene, camera );

}
</script>