added panorama
This commit is contained in:
parent
8f9153c23f
commit
f137f3a70a
|
@ -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">
|
||||
|
|
|
@ -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) => {
|
||||
|
|
BIN
panorama/cabin.jpg
Normal file
BIN
panorama/cabin.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 731 KiB |
BIN
panorama/earth.jpg
Normal file
BIN
panorama/earth.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 580 KiB |
BIN
panorama/factory.jpg
Normal file
BIN
panorama/factory.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.5 MiB |
|
@ -2726,6 +2726,53 @@ if(window.JoclyXdViewCleanup)
|
|||
TWEEN.removeAll();
|
||||
resolve(animCount>0);
|
||||
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));
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue