asp.net mvc 360°媒体集成

Question

我正在尝试将360°图像集成到我的网站中。 但这不起作用，有人可以帮我吗？ 预先感谢

当我尝试运行它时，出现如下所示的渲染错误（图片）

我已添加（在标题中）： <script src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>

在视图中，我添加了： <div id='vrview'></div>

也是视图中的脚本：

<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

尝试此代码

<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>

}