Question

我尝试使用VR View for the web来显示360度图像。我在本地创建了一个基本示例，它没有问题，但是一旦我将代码放入我的项目中，我就会收到404错误，说无法找到资源。

vrview.min.js文件正在将我的图片路径转换为image: 'images/myImage.jpg'，类似于：

http://localhost:80/Project/index.html?image=http://localhost/Project/images/myImage.jpg&is_stereo=false&

IIS没有找到图像，整个事情就是抛出404胖服务器错误。

这是我的代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>View 360 Image</title>

        <script type="text/javascript">
            window.addEventListener('load', onVrViewLoad);

            function onVrViewLoad() {
                var vrView = new VRView.Player('#vrview', {
                    image: 'images/myImage.jpg',
                    width: 800,
                    height: 700,
                    is_stereo: false
                });
            }
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <div id="vrview"></div> <!-- Placeholder where the VR player will display -->
        </form>

        <script src="includes/vrview.min.js"></script>
    </body>
</html>

任何帮助都会很棒。谢谢！

Answer 1

如果您想要传递网址加载，您似乎需要使用Google的服务网址。您在本地服务器上托管vrview.min.js，并将其传递给没有运行该服务的localhost。

<iframe src="//storage.googleapis.com/vrview/2.0/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&is_stereo=true">
</iframe>

VS

<iframe src="//localhost/Project/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&is_stereo=true">
</iframe>

以下是我在本地计算机上测试的html的略微修改版本。我正在加载示例谷歌图片。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>View 360 Image</title>

        <script type="text/javascript">
            window.addEventListener('load', onVrViewLoad);

            function onVrViewLoad() {
                var vrView = new VRView.Player('#vrview', {
                    image: '//storage.googleapis.com/vrview/examples/coral.jpg',
                    width: 1440,
                    height: 680,
                    is_stereo: true
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="vrview"></div>
        </form>
        <script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
    </body>
</html>

VR查看文档：{{3}}

Answer 2

我找到了答案。我只包含您要在显示VR播放器的页面上导入的vrview.min.js文件。从github下载的存档中包含了整个文件目录。我错误地认为大多数文件都是用于示例演示。

我的所有初始代码都是正确的，我只是缺少vrview.min.js链接到的文件。一旦我将额外的文件放入正确的文件夹，360度照片就会按预期显示。

VR View（Web）抓取无效的URL

2 个答案: