はじめに
こんにちは 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://github.com/mrdoob/three.js/
https://pchen66.github.io/Panolens/