HugoでRICOH THETAの360度画像を表示する(ThView.js使用)

{{ 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>

{{< thview src="R0010322_20190810155931.JPG" degree="[0, 0, -10]" speed="10" firstview="270" >}}