Mari kita bincangkan tentang cara mencapai kesan panorama 360 darjah pada bahagian hadapan-tutorial js-php.cn

Mari kita bincangkan tentang cara mencapai kesan panorama 360 darjah pada bahagian hadapan

藏色散人

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

ke hadapan

2264 orang telah melayarinya

Artikel ini membawakan anda pengetahuan yang berkaitan tentang bahagian hadapan terutamanya cara mencapai kesan panoramik 360 darjah pada bahagian hadapan. Rakan-rakan yang berminat boleh lihat di bawah semua orang.

Paparan kesan:

Mari kita bincangkan tentang cara mencapai kesan panorama 360 darjah pada bahagian hadapan

Gunakan pemalam: photo-sfera-viewer

Kod pelaksanaan:

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

Salin selepas log masuk

Direktori fail:

Nota:

Laluan panorama adalah seperti berikut:

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

Jalankannya secara setempat secara langsung, iaitu, mulakan dengan fail:// dalam penyemak imbas, di atas Laluan itu tidak berfungsi. Terdapat isu merentas domain.

Untuk menyelesaikan masalah imej tidak dimuatkan:

Mulakan pelayan dan jalankan fail.

Kaedah 1:

Dicapai melalui http-server, operasi khusus adalah seperti berikut:

Arahan pelaksanaan terminal: npm install http-server -g Pasang http-server secara global
Jalankan arahan: http-server Mulakan perkhidmatan Selepas permulaan, akan ada pautan yang boleh diakses seperti berikut

cmd + klik untuk melompat ke halaman penyemak imbas berikut, dan anda boleh mengakses halaman html yang sepadan. (Dengan mengakses dengan cara ini, sumber imej tempatan boleh dimuatkan)

Kaedah 2:

Jalankan fail melalui sambungan pelayan langsung vscode

Pasang sambungan

Klik kanan fail yang sepadan dan pilih buka dengan pelayan langsung untuk melompat ke

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara mencapai kesan panorama 360 darjah pada bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!