added panorama

examples/browser/control.html

@@ -70,6 +70,17 @@
 	       		<label id="anaglyph" for="anaglyph-input">
 	       			<input id="anaglyph-input" type="checkbox"/> Anaglyph view<br/>
 	       		</label>
+	       		<label id="panorama" for="panorama-select">
+					Panorama 360
+					<input type="file" id="file360Elem" accept="application/json" style="display:none"/>
+		       		<button id="panorama-button">Local</button>
+					<select id="panorama-select">
+						<option value="">--</option>
+						<option value="cabin">Cabin</option>
+						<option value="factory">Factory</option>
+						<option value="earth">Earth</option>
+					</select>
+	       		</label>
 
 	       	</div>
             <div id="links">

examples/browser/js/control.js

@@ -296,6 +296,27 @@ $(document).ready(function () {
                     fileElem[0].click();
                 });
 
+                // reading file locally
+                var file360Elem = $("#file360Elem").on("change",function() {
+                    var fileReader = new FileReader();
+                    fileReader.readAsDataURL(file360Elem[0].files[0]);
+                    fileReader.onload = function(event) {
+						match.viewControl("setPanorama",{
+							pictureData: fileReader.result
+						})
+                    }
+                })
+                $("#panorama-button").on("click",function() {
+                    file360Elem[0].click();
+                });
+                $("#panorama-select").on("change",function() {
+					var options = {};
+					var which = $(this).val();
+					if(which)
+						options.pictureUrl = "/panorama/"+which+".jpg";
+					match.viewControl("setPanorama",options);
+                });
+
                 $("#takeback").on("click",function() {
                     match.getPlayedMoves()
                         .then( (playedMoves) => {

src/browser/jocly.xd-view.js

@@ -2725,7 +2725,54 @@ if(window.JoclyXdViewCleanup)
 					var animCount = TWEEN.getAll().length;
 					TWEEN.removeAll();
 					resolve(animCount>0);
-					break;				
+					break;
+				case "setPanorama":
+					if(options.pictureUrl || options.pictureData) {
+						xdv.removeGadget("panorama");
+						xdv.createGadget("panorama",{
+							"3d": {
+								type: "custommesh3d",
+								harbor: false,
+								rotate: options.rotate || 0,
+								create: function(callback) {
+									var geometry = new THREE.SphereGeometry( 500, 60, 40 );
+									geometry.scale( - 1, 1, 1 );
+									new Promise(function(resolve, reject) {
+										if(options.pictureData) {
+											var image = new Image;
+											image.src = options.pictureData;
+											var texture = new THREE.Texture( image );
+											image.onload = function() {
+												texture.needsUpdate = true;
+												resolve(texture);
+											}
+										} else
+											resolve(new THREE.TextureLoader().load( options.pictureUrl ))
+									}).then(function(texture) {
+										var material = new THREE.MeshBasicMaterial( {
+											map: texture
+										} );
+										mesh = new THREE.Mesh( geometry, material );
+										callback(mesh);
+									})
+								},
+							}
+						});
+						xdv.updateGadget("panorama",{
+							"3d": {
+								visible: true
+							},
+						});					
+					} else {
+						xdv.updateGadget("panorama",{
+							"3d": {
+								visible: false
+							},
+						});					
+						xdv.removeGadget("panorama");
+					}
+					break;
+		
 				default:
 					reject(new Error("ViewControl: unsupported command "+cmd));
 			}