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]