简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

프런트 엔드에서 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>
로그인 후 복사

파일 디렉터리:

참고:

파노라마 경로는 다음과 같습니다.

panorama: './img/44.jpg',

로컬에서 직접 실행합니다. 즉, 브라우저에서 file://로 시작합니다. 도메인 간 문제가 있습니다.

이미지가 로드되지 않는 문제 해결:

서버를 시작하고 파일을 실행하세요.

방법 1:

http-server를 통해 수행되며 구체적인 작업은 다음과 같습니다.

  1. 터미널 실행 명령: npm install http-server -g 전역적으로 http-server 설치npm install http-server -g 全局安装 http-server

  2. 执行命令：http-server

http-server 명령을 실행하여 서비스를 시작합니다. 시작하면 다음과 같이 접근 가능한 링크가 나옵니다

cmd + 클릭하면 다음으로 이동합니다. 브라우저 페이지로 이동하면 해당 HTML 페이지에 액세스할 수 있습니다. (이 방법으로 접속하면 로컬 이미지 리소스를 로드할 수 있습니다.)

방법 2:

  1. vscode의 라이브 서버 확장을 통해 파일 실행

확장 프로그램 설치

    2. 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 라이브 서버로 열기를 선택하면

🎜🎜🎜으로 이동합니다.

위 내용은 프런트 엔드에서 360도 파노라마 효과를 얻는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
前端
원천：juejin.im
이전 기사：[취합 및 공유] 노드 모듈(모음) 관련 인터뷰 질문 및 답변 일부 다음 기사：Node를 사용하여 HTTPS 서비스를 구축하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1361
CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까? 한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽...
에서 2024-04-06 20:45:26
0
2
386
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
웹사이트에서 입력 요소를 가져올 수 없습니다. 그래서 Twitter에서 입력 요소를 가져오려고 하는데 실행하면 노드 터미널에서 계속 이런 오류가 발생하고 결과적으로 이 코드로 생성된 브라우저 창이 저절로 닫힙...
에서 2024-04-06 18:59:57
0
1
442
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！