Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@theo-armour
theo-armour committed Feb 21, 2024
1 parent 042e970 commit 4ac89c5
Showing 1 changed file with 340 additions and 0 deletions.
340 changes: 340 additions & 0 deletions equirec/equirec-image-flickr/equirec-image-flickr-r5.html
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 4ac89c5

Please sign in to comment.