From 4ac89c560d85887c260f457f4f9ccab74db1c07c Mon Sep 17 00:00:00 2001
From: Theo Armour <theo-armour@users.noreply.github.com>
Date: Wed, 21 Feb 2024 15:23:40 -0800
Subject: [PATCH] update readme

---
 .../equirec-image-flickr-r5.html              | 340 ++++++++++++++++++
 1 file changed, 340 insertions(+)
 create mode 100644 equirec/equirec-image-flickr/equirec-image-flickr-r5.html
diff --git a/equirec/equirec-image-flickr/equirec-image-flickr-r5.html b/equirec/equirec-image-flickr/equirec-image-flickr-r5.html
new file mode 100644
index 00000000..debec55d
--- /dev/null
+++ b/equirec/equirec-image-flickr/equirec-image-flickr-r5.html
@@ -0,0 +1,340 @@
+﻿<!doctype html>
+<html lang=en >
+<head>
+<meta charset=utf-8 >
+<title>Equirec Image Flickr R5</title>
+<meta name=viewport content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui' >
+<meta name=description content='' >
+<meta name=keywords content='WebGL,Three.js,Tween.js,JavaScript,GitHub,FOSS,3D,STEM' >
+<meta name=date content='2024-02-21' >
+</head>
+<body>
+<!--
+<script src=http://mrdoob.github.io/three.js/build/three.min.js ></script>
+<script src=http://mrdoob.github.io/three.js/examples/js/controls/OrbitControls.js ></script>
+<script src=http://mrdoob.github.io/three.js/examples/js/libs/stats.min.js ></script>
+-->
+<script src=https://cdn.jsdelivr.net/gh/mrdoob/three.js@r145/build/three.min.js ></script>
+<script src=https://cdn.jsdelivr.net/gh/mrdoob/three.js@r145/examples/js/controls/OrbitControls.js ></script>
+<script src=https://cdn.jsdelivr.net/gh/mrdoob/three.js@r145/examples/js/libs/stats.min.js ></script>
+
+<script>
+
+	var photos, globe, index, previousElement;
+	var page = 1, pages;
+	var spheres = [];
+
+	var stats, renderer, scene, camera, controls;
+
+	init();
+	animate();
+
+	function init() {
+
+		var geometry, material, mesh;
+//		var css, hamburger, menu;
+
+		css = document.head.appendChild( document.createElement( 'style' ) );
+		css.innerHTML =
+
+			'body { font: 12pt monospace; margin: 0; overflow: hidden; }' +
+			'a {text-decoration: none; }' +
+			'h2 { margin: 0 }' +
+			'img { padding: 5px; }' +
+
+			'button { background-color: #ccc; border: 2px #ccc solid; color: #888; }' +
+
+/*			'input[type=range] { -webkit-appearance: none; -moz-appearance: none; background-color: silver; height: 20px; width: 180px; }' +
+			'input[type=range]::-moz-range-thumb { -moz-appearance: none; background-color: #888; height: 20px; width: 10px; }' +
+			'input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; background-color: #888; height: 20px; opacity: 0.85; width: 10px; }' +
+*/
+			'#bars { color: pink; cursor: pointer; font-size: 24pt; text-decoration: none; }' +
+			'#hamburger { left: 375px; position: absolute; top: 20px; transition: left 1s; }' +
+			'#menu { background-color: #eee; border: 1px #ccc solid; left: -375px; max-height: ' + ( window.innerHeight - 10 ) + 'px; ' +
+				'opacity: 0.85; overflow: auto; padding: 0 10px; position: absolute; top: -20px; transition: left 1s; width: 350px; }' +
+
+		'';
+		hamburger = document.body.appendChild( document.createElement( 'div' ) );
+		hamburger.id = 'hamburger';
+		hamburger.innerHTML = '<div id=bars >☰</div>';
+		bars.onclick = function() { hamburger.style.left = hamburger.style.left === "0px" ? "375px" : 0; };
+
+		menu = hamburger.appendChild( document.createElement( 'div' ) );
+		menu.id = 'menu';
+		menu.innerHTML =
+
+			'<h2>' +
+				'<a href="" >' + document.title + '</a>' +
+				'<a href=http://jaanga.github.io/equirec/ > &#x24D8; </a>' +
+			'</h2>' +
+			'<p title="Press space bar to toggle rotation" ><input type=checkbox id=chkRotate onchange=controls.autoRotate=!controls.autoRotate; checked> Rotation ~ ' +
+			'<a href=JavaScript:controls.reset(); ><span style=font-size:24pt; >&#x2302;</span> reset view</a></p>' +
+
+			'<p tile="do this - lots of fun" ><input type=checkbox id=chkBubbles onchange=updateBubbles(); > Add bubbles</p>' +
+			'<div id=info ></div>' +
+			'<div id=thumbnails ></div>' +
+		'';
+
+		stats = new Stats();
+		stats.domElement.style.cssText = 'position: absolute; right: 0; top: 0; z-index: 100;' ;
+		document.body.appendChild( stats.domElement );
+
+		window.addEventListener( 'resize', onWindowResize, false );
+		window.addEventListener( 'keyup', onKeyUp, false );
+
+		renderer = new THREE.WebGLRenderer( {  alpha: 1, antialias: true }  );
+//		renderer.setPixelRatio( window.devicePixelRatio );
+		renderer.setSize( window.innerWidth, window.innerHeight );
+		document.body.appendChild( renderer.domElement );
+
+		camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+		camera.position.set( 450, 0, 0 );
+
+		controls = new THREE.OrbitControls( camera, renderer.domElement );
+		controls.maxDistance = 1200;
+
+		scene = new THREE.Scene();
+
+		var axisHelper = new THREE.AxesHelper( 50 );
+		scene.add( axisHelper );
+
+// assets
+
+		geometry = new THREE.SphereGeometry( 500, 50, 25 );
+		material = new THREE.MeshBasicMaterial();
+		globe = new THREE.Mesh( geometry, material );
+		globe.position.set( 0, 30, 0 );
+		globe.scale.z = -1;
+		scene.add( globe );
+
+		update( 1 );
+
+		controls.autoRotate = true;
+
+	}
+
+	function update( index ) {
+
+
+		fileName = 'https://api.flickr.com/services/rest/?method=flickr.groups.pools.getPhotos&api_key=60a549a559bf2e60ce2a8f427e2a27e8&group_id=2440649%40N22&page=' + index + '&format=json&nojsoncallback=1';
+
+		requestFile( fileName, index );
+
+	}
+
+	function requestFile( fileName, index ) {
+
+		var xhr, response, photo, txt ;
+
+		var xhr = new XMLHttpRequest();
+		xhr.open( 'GET', fileName, true );
+		xhr.onload = callback;
+		xhr.send( null );
+
+		function callback() {
+
+			response = JSON.parse( xhr.responseText );
+
+			photos = response.photos.photo;
+			pages = response.photos.pages
+
+			txt = 'Page ' + index + ' of ' + pages + '<br>Pages: ';
+
+			for ( var i = 1; i <= pages; i++ ) {
+
+				txt += '<a href=JavaScript:update(' + i + ');  >' + i + '</a> ';
+
+			}
+
+			txt += '<br>';
+
+			for ( var i = 0; i < photos.length; i++ ) {
+
+				photo = photos[ i ];
+
+				txt +=
+
+					'<img id=img' + i + ' onclick = getImage(' + i + '); src=http://farm2.staticflickr.com/' + photo.server + '/' +
+					photo.id + '_' + photo.secret + '_t.jpg title="' +
+					photo.ownername + ': ' + photo.title + '" >' +
+
+				'';
+
+			}
+
+
+			txt +=
+				'<center>' +
+				'<h1 onclick=menu.scrollTop=0; style=cursor:pointer; >❦</h1>' +
+				'</center>';
+
+			thumbnails.innerHTML = txt;
+			previousElement = img0;
+
+			index = Math.floor( Math.random() * photos.length );
+
+			getImage( index );
+
+		}
+
+	}
+
+	function getImage( i ) {
+
+		var photo, fileName, xhr, response, image;
+
+		photo = photos[ i ];
+
+		fileName = 'https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=60a549a559bf2e60ce2a8f427e2a27e8&photo_id=' + photo.id + '&format=json&nojsoncallback=1';
+
+		xhr = new XMLHttpRequest();
+		xhr.open( 'GET', fileName, true );
+		xhr.onload = callback;
+		xhr.send( null );
+
+		function callback() {
+
+			response = JSON.parse( xhr.responseText );
+
+			image = response.sizes.size[ response.sizes.size.length - 1 ].source;
+
+			setImage( image, i );
+
+		}
+
+	}
+
+
+	function setImage( image, i ) {
+
+		var loader = new THREE.TextureLoader();
+		loader.crossOrigin = 'anonymous';
+
+		loader.load(
+
+			image,
+			function ( texture ) {
+
+				texture.minFilter = texture.magFilter = THREE.NearestFilter;
+				globe.material = new THREE.MeshBasicMaterial( { map: texture, side: 2 } );
+
+				element = document.getElementById( 'img' + i );
+				element.style.backgroundColor = 'pink';
+				element.scrollIntoViewIfNeeded();
+				previousElement.style.backgroundColor = '';
+				previousElement = element;
+				index = i;
+
+				sphereTexture = texture;
+				updateBubbles();
+
+			},
+			function ( xhr ) {
+
+				info.innerHTML = ( xhr.loaded / xhr.total * 100 ) + '% loaded';
+
+			},
+			function ( xhr ) {
+
+				info.innerHTML = 'An error happened';
+
+			}
+
+		);
+
+	}
+
+	function onKeyUp ( event ) {
+
+		switch( event.keyCode ) {
+
+			case 32: /* space bar*/ controls.autoRotate=!controls.autoRotate; break;
+			case 37: /* left cursor */ nextImage( -1 ); break;
+			case 39: /* right cursor */ nextImage( 1 ); break;
+
+		}
+
+	}
+
+	function nextImage( direction ) {
+
+		index += direction;
+		index = index < 0 ? photos.length - 1: index;
+		index = index >= photos.length ? 0 : index;
+
+		getImage( index );
+
+	}
+
+
+	function updateBubbles() {
+
+		if ( chkBubbles.checked === true ) {
+
+			drawSpheres();
+
+		} else {
+
+			for ( var i = 0; i < spheres.length; i++ ) {
+
+				scene.remove( spheres[ i ] );
+
+			}
+
+		}
+
+	}
+	function drawSpheres() {
+
+		var geometry, material, mesh;
+		geometry = new THREE.SphereBufferGeometry( 1, 50, 25 );
+
+		for (var i = 0; i < 50; i++) {
+
+			material = new THREE.MeshBasicMaterial( { color: 0xffffff, map: sphereTexture } );
+
+			mesh = new THREE.Mesh( geometry, material );
+			mesh.position.set( 300 * Math.random() - 150, 600 * Math.random() - 300, 300 * Math.random() - 150 );
+			mesh.scale.multiplyScalar( Math.random() * 10 + 20 );
+			spheres.push( mesh );
+
+			scene.add( mesh );
+
+		}
+
+	}
+
+
+	function onWindowResize() {
+
+		camera.aspect = window.innerWidth / window.innerHeight;
+		camera.updateProjectionMatrix();
+
+		renderer.setSize( window.innerWidth, window.innerHeight );
+
+	}
+
+	function animate() {
+
+		var timer = 0.0001 * Date.now();
+
+		for ( var i = 0; i < spheres.length; i ++ ) {
+
+			var sphere = spheres[ i ];
+
+			sphere.position.x = 200 * Math.cos( timer + i );
+			sphere.position.y = 200 * Math.sin( timer + i * 1.1 );
+
+		}
+
+
+		requestAnimationFrame( animate );
+		controls.update();
+		stats.update();
+		renderer.render( scene, camera );
+
+	}
+
+</script>
+</body>
+</html>
