프런트 엔드에서 360도 파노라마 효과를 얻는 방법에 대해 이야기해 보겠습니다.-JS 튜토리얼-php.cn

프런트 엔드에서 360도 파노라마 효과를 얻는 방법에 대해 이야기해 보겠습니다.

藏色散人

풀어 주다： 2023-03-27 16:21:24

앞으로

2315명이 탐색했습니다.

이 기사는 프런트 엔드에 대한 관련 지식을 제공합니다. 주로 프런트 엔드에서 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>

로그인 후 복사

파일 디렉터리: