Javascript 如何在我的网页中嵌入谷歌vr图像作为背景_Javascript_Google Cardboard_Google Vr_360 Degrees_360 Panorama

Javascript 如何在我的网页中嵌入谷歌vr图像作为背景

javascript

Javascript 如何在我的网页中嵌入谷歌vr图像作为背景,javascript,google-cardboard,google-vr,360-degrees,360-panorama,Javascript,Google Cardboard,Google Vr,360 Degrees,360 Panorama,我想用谷歌虚拟现实（google vr）在我的网页上添加一个完整的360度背景图像。我曾试图推动它，但我无法获得它。我该怎么做 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co

我想用谷歌虚拟现实（google vr）在我的网页上添加一个完整的360度背景图像。我曾试图推动它，但我无法获得它。我该怎么做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
</head>
<body>
    <h1>Hello, world!</h1>
    <div id="vrview">
        <iframe width="100%" height="100%" scrolling="no" allowfullscreen
            src="https://cdn.glitch.com/fbc36a5e-0d0e-45d3-b6cb-0c1f01f6cd8e%2FMuttukadu%20Boat%20House(2K).jpg?1491283410006"></iframe>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  
</body>


引导101模板
你好，世界！

像这样的事

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
</head>
<body>
    <h1>Hello, world!</h1>
    <div id="vrview">
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script>
      window.addEventListener('load', onVrViewLoad);
        function onVrViewLoad() {
        var vrView = new VRView.Player('#vrview', {
          image: 'https://cdn.glitch.com/fbc36a5e-0d0e-45d3-b6cb-0c1f01f6cd8e%2FMuttukadu%20Boat%20House(2K).jpg?149128341000',
        });
      }
    </script>
</body>


引导101模板
你好，世界！
window.addEventListener（'load'，onVrViewLoad）；
函数onVrViewLoad（）{
var vrView=new vrView.Player（“#vrView”{
图像：'https://cdn.glitch.com/fbc36a5e-0d0e-45d3-b6cb-0c1f01f6cd8e%2FMuttukadu%20Boat%20House（2K）.jpg？149128341000'，
});
}

您可以参考。

非常感谢martin，我如何在vr图像上添加文本和图像，并使整个vr图像如图所示background@Akash您可以使用

z-index

CSS属性，例如`and

Heeeyaaa。谢谢martin，但我希望vr可以通过鼠标访问然后，但它有两个缺点-它在旧IE中不受支持（搜索实际支持），并且您将无法在前台使用鼠标；）。