Let's talk about how to achieve 360-degree panoramic effect on the front end-JS Tutorial-php.cn

Let's talk about how to achieve 360-degree panoramic effect on the front end

藏色散人

Release： 2023-03-27 16:21:24

forward

2332 people have browsed it

This article brings you relevant knowledge about the front-end. It mainly introduces how to achieve a 360-degree panoramic effect on the front-end. Friends who are interested can take a look below. I hope it will be helpful to everyone.

Effect display:

Lets talk about how to achieve 360-degree panoramic effect on the front end

Use plug-in: photo-sphere-viewer

Implementation code:

<!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>

Copy after login

File directory:

##Notes:

The panorama path is as follows:

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

Run directly locally, that is, start with file:// in the browser, the above path It won't work. There is a cross-domain issue.

To solve the problem that the image cannot be loaded:

Start the server and run the file.

Method 1:

Achieved through http-server, the specific operations are as follows:

Terminal execution command:
npm install http-server -g Install http-server globally
Execute the command:
http-server Start the service. After startup, there will be as follows: Click the link

cmd to jump to the following page of the browser, and you can access the corresponding html page. (By accessing in this way, you can load local image resources)

Method 2:

Run the file through the live server extension of vscode

Install the extension

Right-click on the corresponding file and select open with live server to jump to

The above is the detailed content of Let's talk about how to achieve 360-degree panoramic effect on the front end. For more information, please follow other related articles on the PHP Chinese website!