聊前端怎麼實現360度全景效果-js教程-PHP中文網

聊前端怎麼實現360度全景效果

藏色散人

發布： 2023-03-27 16:21:24

轉載

2264 人瀏覽過

這篇文章為大家帶來了關於前端的相關知識，其中主要跟大家介紹怎麼在前端實現360度全景效果，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。

效果顯示：

聊前端怎麼實現360度全景效果

#使用外掛程式：photo-sphere-viewer

實作程式碼：

<!DOCTYPE html>
<head>
  <!-- for optimal display on high DPI devices -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.js"></script>
</head>
<body>
  <!-- the viewer container must have a defined size -->
  <div id="viewer" style="width: 100vw; height: 100vh;"></div>
  <script>
    const viewer = new PhotoSphereViewer.Viewer({
      container: document.querySelector(&#39;#viewer&#39;),
      panorama: &#39;./img/44.jpg&#39;,
    });
  </script>
</body>
</html>

登入後複製

檔案目錄：