Edited at

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

Screen Shot 2019-08-08 at 15.46.32.png


はじめに

こんにちは 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・ツール

-Panolens

-Threejs


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/