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: url(https://lh4.googleusercontent.com/-qGsOjUoCvyw/T-VZ62iPMSI/AAAAAAAAG5Y/O0NhvMUvm9U/s200/_img.png);
	border: solid 1px #000000;
}
</style>
<table>
<tr>
<td style='width:120px;'>前面/後面/両面</td>  <td></td><td><div id="slider1"></div></td><td>  </td>
</tr><tr>
<td>スケール</td><td> -</td><td><div id="slider2"></div></td><td> + </td>
</tr><tr>
<td>x 座標を回転</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">
// *************************************
// 前面 / 後面 / 両面
// *************************************
$(function () {
	$("#slider1").slider({
		range: "min",
		step: 1,
		min: 0,
		max: 2,
		value: 0,
		slide: function (event, ui) {
			material.side = ui.value;
		}
	});
});
// *************************************
// スケール
// *************************************
$(function () {
	$("#slider2").slider({
		range: "min",
		step: 0.01,
		min: -4,
		max: 4,
		value: 1,
		slide: function (event, ui) {
			cube.scale.x = cube.scale.y = cube.scale.z = ui.value;
		}
	});
});

// *************************************
// x 座標を回転
// *************************************
$(function () {
	$("#slider3").slider({
		range: "min",
		step: 0.01,
		min: -1 * Math.PI,
		max: 1 * Math.PI,
		value: 0.6,
		slide: function (event, ui) {
			cube.rotation.x = ui.value;
console.log(ui.value)
		}
	});
});

var v_width = 500;
var v_height = 500;
var v_iamge_url = 'http://toolbox.winofsql.jp/image/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, 0, 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>