https://kunihiro-shika.jp/wp-content/plugins/cardboard/js/cardboard.js?ver=1791199005

1( function( $ ) {
2	$( '.cardboard' ).each( function() {
3		var _self = this;
4		var width = $( _self ).width(),
5				height = $( _self ).width() / 16 * 9;
6
7		// scene
8		var scene = new THREE.Scene();
9
10		// mesh
11		var geometry = new THREE.SphereGeometry( 5, 32, 24 );
12		geometry.scale( -1, 1, 1 );
13		var texloader = new THREE.TextureLoader();
14		var material = new THREE.MeshBasicMaterial( {
15			 map: texloader.load( $( _self ).data( 'image' ) )
16		} );
17		var sphere = new THREE.Mesh( geometry, material );
18		scene.add( sphere );
19
20		// camera
21		var camera = new THREE.PerspectiveCamera( 75, width / height, 1, 100 );
22		camera.position.set( 0, 0, 0.1 );
23		camera.lookAt( sphere.position );
24
25		// render
26		var renderer = new THREE.WebGLRenderer();
27		renderer.setSize( width, height );
28		renderer.setClearColor( { color: 0x000000 } );
29		$( _self ).append( renderer.domElement );
30		renderer.render( scene, camera );
31
32		// control
33		var controls = new THREE.OrbitControls( camera, renderer.domElement );
34		controls.minDistance = 0;
35		controls.maxDistance = 5;
36
37		var render = function() {
38			requestAnimationFrame( render );
39			sphere.rotation.y -= 0.05 * Math.PI / 180;
40			renderer.render( scene, camera );
41			controls.update();
42		}
43		render();
44
45		window.addEventListener( 'resize', function() {
46			var width = $( _self ).width(),
47					height = $( _self ).width() / 16 * 9;
48			camera.aspect = width / height;
49			camera.updateProjectionMatrix();
50
51			renderer.setSize( width, height );
52		}, false );
53	} );
54} )( jQuery );