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

<div id="container_three" style='background-color:#123456;margin:0 0 30px 30px;'></div>
<script src="http://winofsql.jp/js/three/Three.js"></script>
<script type="text/javascript">

	var v_offset = 0;
	var v_width = 700;
	var v_height = 500;
	var v_action = 0.05;
	var v_comera_v = 200;
	var v_iamge_url = 'https://lh5.googleusercontent.com/-nDPIczGYHkg/T1jJqItMfhI/AAAAAAAAE8Y/MhrGNFFN81g/s230/_img.png';

	var container;
	var camera, scene, renderer;
	var mesh,mesh_r;
	var mouseX = 0, mouseY = 0;
        var material,texture;
        var material2,texture2;

	init();
	animate();

	function init() {

		container = document.getElementById( 'container_three' );

		scene = new THREE.Scene();
		scene.position.y = v_offset;

		camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
		camera.position.set( 0, v_comera_v, 650 );
		scene.add( camera );

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

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

			// 下の大
			mesh = new THREE.Mesh(new THREE.SphereGeometry(150, 20, 20), material);
			mesh.rotation.x = 0;
			mesh.rotation.y = -90 * Math.PI / 180;
			scene.add(mesh);
			
			// 上の小
			mesh_r = new THREE.Mesh(new THREE.SphereGeometry(50, 20, 20), material);
			mesh_r.rotation.x = 0;
			mesh_r.rotation.y = 0;
			mesh_r.rotation.z = 0;
			mesh_r.position.x = 0;
			mesh_r.position.y = 200;
			mesh_r.position.z = 0;
			scene.add(mesh_r);

		};
		image.src = v_iamge_url;

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

		container.appendChild( renderer.domElement );

		document.addEventListener( 'mousemove', onDocumentMouseMove, false );

	}

	function onDocumentMouseMove( event ) {

		mouseX = event.clientX;
		mouseY = event.clientY;

	}

	function animate() {

		requestAnimationFrame( animate );

		render();

	}

	function render() {

		camera.position.x += ( mouseX - camera.position.x - v_width / 2 ) * v_action;
		camera.position.y += ( - mouseY - camera.position.y + (v_offset + v_comera_v +(container.offsetTop-window.pageYOffset))  ) * v_action;
		camera.lookAt( scene.position );

		if ( mesh && mesh_r ) {
			mesh.rotation.y -= 0.005;
			mesh_r.rotation.y -= 0.005;
		}

		renderer.render( scene, camera );


	}


</script>