asp.net mvc 360° Media integration - asp.net-mvc

Question

I'm trying to integrated 360° images into my website.
But it's not working, can someone help me please ?
thanks in advance
When i try to run it i get an render error like below (picture)
I have Added (in the header):
<script src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
And in the view i have added:
<div id='vrview'></div>
Also The script in the view :
<script>
var vrView;
var scenes = {
petra: {
image: 'https://localhost:44323/images/Inside/chichen-itza.jpg',
preview: 'https://localhost:44323/images/Inside/chichen-itza-preview.jpg'
}
}
function onLoad() {
vrView = new VRView.Player('#vrview', {
width: '100%',
height: 480,
image: 'https://localhost:44323/images/Inside/chichen-itza-preview.jpg',
is_stereo: false,
is_autopan_off: true
});
vrView.on('ready', onVRViewReady);
vrView.on('modechange', onModeChange);
vrView.on('getposition', onGetPosition);
vrView.on('error', onVRViewError);
}
function loadScene(id) {
console.log('loadScene', id);
// Set the image
vrView.setContent({
image: scenes[id].image,
preview: scenes[id].preview,
is_autopan_off: true
});
}
function onVRViewReady(e) {
console.log('onVRViewReady');
loadScene('petra');
}
function onModeChange(e) {
console.log('onModeChange', e.mode);
}
function onVRViewError(e) {
console.log('Error! %s', e.message);
}
function onGetPosition(e) {
console.log(e)
}
window.addEventListener('load', onLoad);</script>[![enter image description here][1]][1]`

Answer 1

try this code
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.0.4/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/3dweb/360javascriptviewer/lib/JavascriptViewer.min.js"></script>
<a-scene>
<img id="panorama" src="~/images/gear-360_overview_bg.jpg" />
<a-sky src="#panorama" rotation="0 -90 0"></a-sky>
</a-scene>
}