Parlons de la façon d'obtenir un effet panoramique à 360 degrés sur le devant-js tutoriel-php.cn

Parlons de la façon d'obtenir un effet panoramique à 360 degrés sur le devant

藏色散人

Libérer： 2023-03-27 16:21:24

avant

2319 Les gens l'ont consulté

Cet article vous apporte des connaissances pertinentes sur le front-end. Il présente principalement comment obtenir un effet panoramique à 360 degrés sur le front-end. J'espère que cela sera utile à tout le monde.

Affichage de l'effet :

Parlons de la façon dobtenir un effet panoramique à 360 degrés sur le devant

Utiliser le plug-in : photo-sphere-viewer

Code d'implémentation :

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

Copier après la connexion

Répertoire de fichiers :

Remarques :

Panorama Le chemin est le suivant :

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

exécuté directement localement, c'est-à-dire commencez par file:// dans le navigateur, le chemin ci-dessus ne fonctionnera pas. Il existe un problème inter-domaines.

Résolvez le problème des images qui ne se chargent pas :

Démarrez le serveur et exécutez le fichier.

Méthode 1 :

Réalisée via le serveur http, l'opération spécifique est la suivante :

Commande d'exécution du terminal : npm install http-server -g Installer globalement le serveur http

Exécutez la commande : http-server pour démarrer le service Après le démarrage, il y aura un lien accessible comme suit
npm install http-server -g 全局安装 http-server
执行命令：http-server