HugoでRICOH THETAの360度画像を表示する(ThView.js使用)
HugoからThView.js (https://github.com/aike/thview.js)を使って360度画像を表示するショートコードを作成した。
ThView.jsはaike氏作成の360度画像表示ライブラリ。
準備
以下の内容のテキストファイルをthview.html
というファイル名でlayouts/shortcodes
ディレクトリの下に保存する。
{{ if .Page.Scratch.Get "thviewer-count" }}
{{ .Page.Scratch.Add "thviewer-count" 1 }}
{{ else }}
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js' defer></script>
<script src='https://cdn.rawgit.com/aike/thview.js/master/thview.js' defer></script>
{{ .Page.Scratch.Add "thviewer-count" 1 }}
{{ end }}
{{ $id := printf "%s%d" "thview-" (.Page.Scratch.Get "thviewer-count") }}
{{ $width := int (default 640 (.Get "width")) }}
{{ $height := int (default 0 (.Get "height")) }}
{{ $rotation := default "true" (string (.Get "rotation")) }}
{{ $firstview := int (default 270 (.Get "firstview")) }}
{{ $zoom := int (default 70 (.Get "zoom")) }}
{{ $degree := default "[0, 0, 0]" (.Get "degree") }}
{{ $speed := int (default 20 (.Get "speed")) }}
<div id='wrapper-{{$id}}' style="position:relative;width:100%;max-width:{{$width}}px;">
<div id='{{$id}}'></div>
<img src="/images/23591.svg" style="width:64px; position:absolute; top:0px; right: 0px;"/>
</div>
<script defer>
window.addEventListener("DOMContentLoaded", function(){
const path = '{{ .Get "src" }}';
THREE.ImageUtils.crossOrigin = "*";
const width = document.getElementById('wrapper-{{$id}}').offsetWidth;
const orgwidth = {{ $width }};
let height = {{ $height }};
const ratio = width / orgwidth;
if(height === 0){
height = width * 0.75;
}else{
height = height * ratio;
}
const img1 = new ThView({
id:'{{$id}}',
file: path,
width: width,
height: height,
rotation: {{ $rotation }}.toLowerCase() === 'true',
firstview: {{ $firstview }},
zoom: {{ $zoom }},
degree: JSON.parse({{ $degree }}),
speed: {{ $speed }}
});
}, false);
</script>
右上に表示するアイコン(上記の例では23591.svg
の部分)はお好みで変更し、static
以下のお好みのディレクトリに設置(上記の例ではstatic/images/23591.svg
)しておく。
使い方
HugoのMarkdown中に以下のように記述する。
{{< thview src="R0010322_20190810155931.JPG" degree="[0, 0, -10]" speed="10" firstview="270" >}}
実際の表示例は以下。
受け付けるパラメータはThView.jsと同様で下表の通り(デフォルト値を多少変えているものあり)。
オプション | 意味 | デフォルト値 |
---|---|---|
src | 画像ファイル (必須) | - |
width | 幅のピクセル数 | 640 |
height | 縦のピクセル数 | widthの0.75倍 |
rotation | 自動回転の有無 | true |
speed | 回転速度(負の値で反対方向へ回転) | 20 |
zoom | ズーム | 70 |
firstview | 初期表示位置 | 270 |
degree | 軸の角度調整 [x, y, z] | [0, 0, 0] |