http://www.izutsu-zousen.co.jp/js/three/theta_bg.js?1503303402

1!function($){
2	//var camera, scene, renderer;
3/*
4	var isUserInteracting = false,
5	onMouseDownMouseX = 0, onMouseDownMouseY = 0,
6	lon = 0, onMouseDownLon = 0,
7	lat = 0, onMouseDownLat = 0,
8	phi = 0, theta = 0;
9	var container, mesh;
10	var $target_bg;
11*/
12
13	$.fn.theta_bg = function(options) {
14		var camera, scene, renderer;
15
16		var isUserInteracting = false,
17		onMouseDownMouseX = 0, onMouseDownMouseY = 0,
18		lon = 0, onMouseDownLon = 0,
19		lat = 0, onMouseDownLat = 0,
20		phi = 0, theta = 0;
21		var container, mesh;
22		var $target_bg;
23
24		$target_bg = $(this);
25
26		console.log($target_bg.css('background-image'));
27		var img_path = $target_bg.css('background-image');
28		img_path     = img_path.match( /^url\(["']?(.*?)["']?\)/i )[1];
29		//console.log(img_path);
30		//console.log($target_bg.attr("id"));
31
32		container = document.getElementById($target_bg.attr("id"));
33
34		camera        = new THREE.PerspectiveCamera( 75, $target_bg.width() / $target_bg.height(), 1, 1100 );
35		camera.target = new THREE.Vector3( 0, 0, 0 );
36
37		scene = new THREE.Scene();
38
39		var geometry = new THREE.SphereGeometry(500, 60, 200);
40		geometry.scale(- 1, 1, 1);
41
42		var material = new THREE.MeshBasicMaterial( {
43			map: new THREE.TextureLoader().load(img_path)
44		} );
45
46		mesh = new THREE.Mesh( geometry, material );
47
48		scene.add( mesh );
49
50		renderer = new THREE.WebGLRenderer();
51		renderer.setPixelRatio( window.devicePixelRatio );
52		renderer.setSize($target_bg.width(),$target_bg.height());
53		container.appendChild( renderer.domElement );
54
55		/*
56		document.addEventListener( 'dragover', function ( event ) {
57
58			event.preventDefault();
59			event.dataTransfer.dropEffect = 'copy';
60
61		}, false );
62
63		document.addEventListener( 'dragenter', function ( event ) {
64
65			document.body.style.opacity = 0.5;
66
67		}, false );
68
69		document.addEventListener( 'dragleave', function ( event ) {
70
71			document.body.style.opacity = 1;
72
73		}, false );
74
75		document.addEventListener( 'drop', function ( event ) {
76
77			event.preventDefault();
78
79			var reader = new FileReader();
80			reader.addEventListener( 'load', function ( event ) {
81
82				material.map.image.src = event.target.result;
83				material.map.needsUpdate = true;
84
85			}, false );
86			reader.readAsDataURL( event.dataTransfer.files[ 0 ] );
87
88			document.body.style.opacity = 1;
89
90		}, false );
91		*/
92
93		window.addEventListener( 'resize', onWindowResize, false );
94
95		animate();
96
97
98
99		function onWindowResize() {
100
101			camera.aspect = $target_bg.width() / $target_bg.height();
102			camera.updateProjectionMatrix();
103
104			renderer.setSize( $target_bg.width(), $target_bg.height());
105
106		}
107		
108		function animate() {
109
110			requestAnimationFrame( animate );
111			update();
112
113		}
114
115		function update() {
116			if ( isUserInteracting === false ) {
117
118				lon += 0.05;
119
120			}
121
122			lat = Math.max( - 85, Math.min( 85, lat ) );
123			phi = THREE.Math.degToRad( 90 - lat );
124			theta = THREE.Math.degToRad( lon );
125
126			camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
127			camera.target.y = 500 * Math.cos( phi );
128			camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );
129
130			camera.lookAt( camera.target );
131			renderer.render( scene, camera );
132
133		}
134
135
136	};
137
138
139}(window.jQuery);