update readme

theo-armour · Feb 22, 2024 · 3ae9d36 · 3ae9d36
1 parent 21800b2
commit 3ae9d36
Show file tree

Hide file tree

Showing 18 changed files with 836 additions and 0 deletions.
diff --git a/gogogh/QPVnk6c.jpg b/gogogh/QPVnk6c.jpg
diff --git a/gogogh/R0010280.jpg b/gogogh/R0010280.jpg
diff --git a/gogogh/R0010298.JPG b/gogogh/R0010298.JPG
diff --git a/gogogh/R0010599.JPG b/gogogh/R0010599.JPG
diff --git a/gogogh/Ricoh-Theta-sample.png b/gogogh/Ricoh-Theta-sample.png
diff --git a/gogogh/cpucl.jpg b/gogogh/cpucl.jpg
diff --git a/gogogh/garden.png b/gogogh/garden.png
diff --git a/gogogh/gogogh-01.png b/gogogh/gogogh-01.png
diff --git a/gogogh/gogogh-02.png b/gogogh/gogogh-02.png
diff --git a/gogogh/index.html b/gogogh/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang=en >
+<head>
+<meta charset=utf-8 >
+</head>
+<body>
+<script>
+
+	window.location.href = './ricoh-theta-sandbox-r2.html' + location.hash;
+
+</script>
+</body>
+</html>
diff --git a/gogogh/maxresdefault.jpg b/gogogh/maxresdefault.jpg
diff --git a/gogogh/pic2.jpg b/gogogh/pic2.jpg
diff --git a/gogogh/pic6.jpg b/gogogh/pic6.jpg
diff --git a/gogogh/ricoh-theta-s-low-light.png b/gogogh/ricoh-theta-s-low-light.png
diff --git a/gogogh/ricoh-theta-sandbox-r1.html b/gogogh/ricoh-theta-sandbox-r1.html
@@ -0,0 +1,206 @@
+<!doctype html>
+<html lang=en >
+<head>
+<meta charset=utf-8 >
+<title>Ricoh Theta Sandbox R1</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='Ricoh Theta images as sky spheres. Simple slide' >
+<meta name=keywords content='Ricoh Theta, 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@r100/build/three.min.js ></script>
+<script src=https://cdn.jsdelivr.net/gh/mrdoob/three.js@r100/examples/js/controls/OrbitControls.js ></script>
+<script src=https://cdn.jsdelivr.net/gh/mrdoob/three.js@r100/examples/js/libs/stats.min.js ></script>
+<script>
+
+
+	images = [
+
+		"gogogh-02.png",
+		'cpucl.jpg',
+		'QPVnk6c.jpg',
+		'R0010280.jpg',
+		'maxresdefault.jpg',
+		'R0010599.JPG',
+		'Ricoh-Theta-sample.png',
+		'ricoh-theta-s-low-light.png',
+		'ricoh_theta_s_flat_sample.jpg',
+		'pic2.jpg',
+		'pic6.jpg',
+		'R0010298.JPG'
+
+	];
+
+	var stats, renderer, scene, camera, controls;
+	var geometry, material, mesh;
+
+	init();
+	animate();
+
+	function init() {
+
+		var css = document.head.appendChild( document.createElement( 'style' ) );
+		css.innerHTML =
+
+			'body { font: 12pt monospace; margin: 0; overflow: hidden; }' +
+			'a {text-decoration: none; }' +
+			'button { background-color: #eee; border: 2px #eee solid; color: #888; }' +
+			'h2 { margin: 0 }' +
+
+		'';
+
+		var menu = document.body.appendChild( document.createElement( 'div' ) );
+		menu.style.cssText = `margin: 0 20px; position: absolute; `;
+		menu.innerHTML =
+
+			'<h2>' +
+			'	<a href="" >' + document.title + '</a>' +
+			'	 <a href=http://jaanga.github.io/demo/gn/ >&#x24D8;</a>' +
+			'</h2>' +
+			'<div id=imageMenu ></div>' +
+			'<p title="Press space bar to toggle rotation" ><input type=checkbox id=chkRotate onchange=controls.autoRotate=!controls.autoRotate;  checked> Rotation</p>' +
+			'<div id=info ></div>' +
+
+		'';
+
+		var text = '';
+
+		for ( var i = 0; i < images.length; i++ ) {
+
+			text += '<p><button onclick=selectImage(' + i + '); >' + images[ i ] + '</button></p>';
+
+		}
+
+		imageMenu.innerHTML = text;
+
+		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.setClearColor( 0xf0f0f0 );
+//		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();
+
+// helpers
+
+		var axisHelper = new THREE.AxesHelper( 500 );
+		scene.add( axisHelper );
+
+// assets
+
+		geometry = new THREE.SphereGeometry( 500, 50, 25 );
+		material = new THREE.MeshBasicMaterial( { side: 2 } );
+		mesh = new THREE.Mesh( geometry, material );
+		mesh.position.set( 0, 30, 0 );
+		scene.add( mesh );
+
+		selectImage( 0 );
+
+		controls.autoRotate = true;
+
+	}
+
+
+	function selectImage( index ) {
+
+		loader = new THREE.TextureLoader();
+		loader.crossOrigin = 'anonymous';
+
+// load a resource
+		loader.load(
+
+// resource URL
+			images[ index ],
+
+// Function when resource is loaded
+			function ( texture ) {
+
+// do something with the texture
+
+				mesh.material = new THREE.MeshBasicMaterial( { map: texture, side: 2 } );
+				mesh.name = index;
+
+			},
+
+// Function called when download progresses
+			function ( xhr ) {
+
+				info.innerHTML = ( xhr.loaded / xhr.total * 100 ) + '% loaded';
+
+			},
+
+// Function called when download errors
+			function ( xhr ) {
+
+				info.innerHTML = 'An error happened';
+
+			}
+
+		);
+
+	}
+
+	function nextImage( direction ) {
+
+		index = parseInt( mesh.name, 10 ) + direction;
+		index = index < 0 ? images.length - 1: index;
+		index = index >= images.length ? 0 : index;
+		selectImage( index );
+
+	}
+
+	function onKeyUp ( event ) {
+
+// console.log( 'key', event.keyCode );
+
+		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 onWindowResize() {
+
+		camera.aspect = window.innerWidth / window.innerHeight;
+		camera.updateProjectionMatrix();
+
+		renderer.setSize( window.innerWidth, window.innerHeight );
+
+	}
+
+	function animate() {
+
+		requestAnimationFrame( animate );
+		controls.update();
+		stats.update();
+		renderer.render( scene, camera );
+
+	}
+
+</script>
+</body>
+</html>