diff --git a/examples/browser/control.html b/examples/browser/control.html
index a9874f1..1bef914 100644
--- a/examples/browser/control.html
+++ b/examples/browser/control.html
@@ -70,6 +70,17 @@
+
diff --git a/examples/browser/js/control.js b/examples/browser/js/control.js
index c435bbf..8c4b202 100644
--- a/examples/browser/js/control.js
+++ b/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) => {
diff --git a/panorama/cabin.jpg b/panorama/cabin.jpg
new file mode 100644
index 0000000..fd63641
Binary files /dev/null and b/panorama/cabin.jpg differ
diff --git a/panorama/earth.jpg b/panorama/earth.jpg
new file mode 100644
index 0000000..d90ced7
Binary files /dev/null and b/panorama/earth.jpg differ
diff --git a/panorama/factory.jpg b/panorama/factory.jpg
new file mode 100644
index 0000000..9ec61f6
Binary files /dev/null and b/panorama/factory.jpg differ
diff --git a/src/browser/jocly.xd-view.js b/src/browser/jocly.xd-view.js
index 6041f0a..9e74f64 100644
--- a/src/browser/jocly.xd-view.js
+++ b/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));
}