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

<link rel="stylesheet" href="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery/jqcss/black-tie/jquery-ui-1.8.20.custom.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three//three.min55.js"></script>

<style type="text/css">
td {
    padding: 5px;
}

#slider1, #slider2, #slider3 {
	width: 200px;
	margin: 0 0 0 20px;
}

#container_three canvas {
	background-color:#e0e0e0;
	border: solid 1px #000000;
}
</style>

<table>
<tr>
<td style='width:50px;'>x 座標</td><td> -</td><td><div id="slider1"></div></td><td> + </td>
</tr><tr>
<td>y 座標</td><td> -</td><td><div id="slider2"></div></td><td> + </td>
</tr><tr>
<td>z 座標</td><td> -</td><td><div id="slider3"></div></td><td> + </td>
</tr>
</table>

<div id="base" style=''>
<div id="container_three"></div>
</div>

<script type="text/javascript">

// *************************************
// x 座標
// *************************************
$(function () {
	$("#slider1").slider({
		range: "min",
		step: 1,
		min: -200,
		max: 200,
		value: 0,
		slide: function (event, ui) {
			cube.position.x = ui.value;
		}
	});
});
// *************************************
// y 座標
// *************************************
$(function () {
	$("#slider2").slider({
		range: "min",
		step: 1,
		min: -200,
		max: 200,
		value: 0,
		slide: function (event, ui) {
			cube.position.y = ui.value;
		}
	});
});

// *************************************
// z 座標
// *************************************
$(function () {
	$("#slider3").slider({
		range: "min",
		step: 1,
		min: -450,
		max: 450,
		value: 0,
		slide: function (event, ui) {
			cube.position.z = ui.value;
		}
	});
});
</script>

<script type="text/javascript">

	var v_width = 500;
	var v_height = 500;
	var v_iamge_url = 'https://lh5.googleusercontent.com/-tpwrnApVF0Q/UJZ7JFriUeI/AAAAAAAALAY/sTLRuOhyX1U/s640/basic_elf.png';

	var container;
	var camera, scene, renderer;
	var mesh;
        var material,cube

	init();
	animate();

	function init() {

		container = document.getElementById( 'container_three' );

		scene = new THREE.Scene();

		camera = new THREE.PerspectiveCamera( 50, 1, 1, 10000 );
		camera.position.set( 0, -100, 650 );
		scene.add( camera );

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

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

			// キューブ
			cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), material);
			cube.rotation.x = 0.6;

			scene.add(cube);
		};
		image.src = v_iamge_url;

		renderer = new THREE.CanvasRenderer();
		renderer.setSize( v_width, v_height );

		container.appendChild( renderer.domElement );

	}

	function animate() {

		requestAnimationFrame( animate );
		render();

	}

	function render() {

		if ( cube ) {
			cube.rotation.y -= 0.005;
		}
		renderer.render( scene, camera );

	}


</script>