Как использовать виртуальную реальность библиотеки Javascript - Marzipano? - PullRequest
Новая
       86

Как использовать виртуальную реальность библиотеки Javascript - Marzipano?

0 голосов
/ 12 декабря 2018

Название довольно простое.Изначально я хотел использовать Panellum,

Я могу сделать эту одну работу (код ниже), но она слишком сложна, чтобы провести там виртуальный тур (материал с кнопками, которые перемещают вас в другое место)

С другой стороны, у Marzipano есть отличный инструмент для редактирования, и его очень просто организовать для VR-тура для новичка, такого как я.Но я не могу импортировать его на мой WordPress сайт по какой-то причине.

Это работает Pannellum:

(кредит какому-то парню из codepen) 

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A simple example</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.4/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.4/pannellum.js"></script>
    
    <style>
      #panorama {
        width: 100%;
        height: 60vh;
      }
    </style>
  </head>
  <body>
    <div id="panorama"></div>
    <script>
      pannellum.viewer('panorama', {
        "type": "equirectangular",
        "title": "Funny its not working in here, but normally it works",
        "autoLoad": true, // Default: false
        // "preview": "https://pannellum.org/images/alma.jpg",
        // "previewTitle": "Test Title",
        // "previewAuthor": "Test Author",
        // "autoRotate": 5,
        // "autoRotateInactivityDelay": 3,
        // "autoRotateStopDelay": 3,
        // "compass": true, // Default: true
        // "northOffset": 360,
        // "showZoomCtrl": true, // Default: true
        // "disableKeyboardCtrl": true, // Default: false 
        // "showFullscreenCtrl": false, // Default: true
        // "showControls": false, // Default: true
        // "keyboardZoom": false, // Default: true
        // "draggable": false, // Default: true
        // "yaw": 10, // Default: 0 -> left, right 
        // "pitch": 10, // Default: 0 -> up, down
        // "minYaw": 50, // Default: -180
        // "maxYaw": 100, // Default: 180
        // "minPitch": -90, // Default: undefined
        // "maxPitch": 90, // Default: undefined
        // "minHfov": 10, // Default: 50
        // "maxHfov": 100, // Default: 120
        // hfov: 50, // Default: 100        
        // "fallback": "Cannot load this 360 image",
        // "orientationOnByDefault": true, // Default: false
        // "horizontalPitch": 100,
        // "horizontalRoll": 100,
        // "escapeHTML": true, // Default: false
        // "animationTimingFunction": [0,1],
        // "crossOrigin": "TESTING", // Default: anonumous
        // "hotSpots": [],
        // "hotSpotDebug": true, // Default: false
        // "sceneFadeDuration": 2000,                   
        
        "panorama": "https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fanswers.unrealengine.com%2Fstorage%2Ftemp%2F81934-2d-vr.jpg&f=1"
        // "https://pannellum.org/images/cerro-toco-0.jpg"
        // "https://pannellum.org/images/jfk.jpg"
        // "https://i.imgur.com/G7t9QD9.jpg"
        // "https://pannellum.org/images/tocopilla.jpg"
        // "https://pannellum.org/images/alma-correlator-facility.jpg"
        // "https://pannellum.org/images/alma.jpg"
      })
    </script>
  </body>
</html>

А это мой Марципано:

(изменено на xx.com) 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><html>
    <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
        #pano {
        width: 100%;
        height: 60vh;
        }
        </style>
        
    </head>
 <body>
     
<div id="pano"></div>     
     
   <script type="text/javascript" src="https://xx.com/VR/es5-shim-master/es5-shim.js"></script>
   <script type="text/javascript" src="https://xx.com/VR/EventShim-master/eventShim.js"></script>
   <script type="text/javascript" src="https://xx.com/VR/request_animation_frame/rAF.js" ></script>
   <script type="text/javascript" src="https://xx.com/VR/marzipano-0.8.0/marzipano.js"></script>
   
<script type="text/javascript">

//Flash//

var options = { swfPath: 'https://xx.com/VR/marzipano-0.8.0/marzipano.swf' };
var viewer = new Marzipano.Viewer(element, options);

</script>

<script type="text/javascript">
//Initializing - loading preview//

var panoElement = document.getElementById('pano');
var viewerOpts = {
  controls: {
    mouseViewMode: 'drag'    // drag|qtvr
  }
};

var viewer = new Marzipano.Viewer(panoElement, viewerOpts)
</script>


<script type="text/javascript">

//Scene//

var levels = [
  { tileSize: 256, size: 256, fallbackOnly: true },
  { tileSize: 512, size: 512 },
  { tileSize: 512: size: 1024 }
];

var geometry = new Marzipano.CubeGeometry(levels);

var source = Marzipano.ImageUrlSource.fromString("tiles/{z}/{f}/{y}/{x}.jpg", {
  cubeMapPreviewUrl: "https://xx.com/wp-content/uploads/2018/12/Chroma-1.jpg"
});

var initialView = {
  yaw: 90 * Math.PI/180,
  pitch: -30 * Math.PI/180,
  fov: 90 * Math.PI/180
};

var limiter = Marzipano.RectilinearView.limit.traditional(1024, 120*Math.PI/180);

var view = new Marzipano.RectilinearView(initialView, limiter);

var scene = viewer.createScene({
  source: source,
  geometry: geometry,
  view: view,
  pinFirstLevel: true
});


</script>



</body>
</html>

Я загружаю каждый сценарий отдельно в <script> что-нибудь еще, чтобы следить?

...