asp.net mvc 360° Media integration

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>

}