はじめに

こんにちは streampack チームのメディです。
https://cloudpack.jp/service/option/streampack.html

Copyrights・ コピーライト

Copyleft picture https://pixabay.com/photos/winter-panorama-mountains-snow-2383930/

Objective・目的

Learning how to create a 360 panorama with info markers.
ツールチップ付きの360パノラマの簡単な例を学ぶこと。

Tools・ツール

Implementation ・ 実装

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
    }

    #container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/105/three.js"></script>
  <script src="//cdn.jsdelivr.net/npm/panolens@0.11.0/build/panolens.min.js"></script>

  <div id="container"></div>


  <script>
    var panorama, viewer, container, infospot, infospot2;

    container = document.querySelector('#container');

    panorama = new PANOLENS.ImagePanorama('https://i.imgur.com/wTCPouq.jpg');


    infospot = new PANOLENS.Infospot();
    infospot.position.set( 1000, 100, -2000 );
    infospot.addHoverText( '千葉県' );

    infospot2 = new PANOLENS.Infospot();
    infospot2.position.set( 1000, 100, 2000 );
    infospot2.addHoverText( '神奈川県' );

    panorama.add(infospot , infospot2);

    viewer = new PANOLENS.Viewer({
      container: container
    });
    viewer.add(panorama);
  </script>

</body>

</html>

demo ・ デモ

https://jsfiddle.net/gzxsefyq/

情報元

https://github.com/mrdoob/three.js/
https://pchen66.github.io/Panolens/

元記事はこちら

「Three.jsとPanolensで360パノラマの作成方法」