THREE Image Transitionを自分サイトに取り入れる

概要

HTMLのスライダーをテンプレートを使ってサクッと実装しようと思い、PHOTPSHOPVIPさんのサイトの中にあった、THREE Image Transitionを自分のサイトに取り入れてスライダーを実装しようと思いました。
しかし、少しハマってしまいました。
そのまま、コピー&ペーストではダメな様です。
そこで、自分なりの解決方法をメモも兼ねて記載しておきます。
（初投稿のため、至らない部分がありましたら申し訳ございません。）

解決方法

テンプレートに加えて、以下のプログラムをindex.html上に追加しました。

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/bas.js"></script>
<link href="css/styles_myself.css" rel="stylesheet">
<script src="js/scripts_myself.js"></script>

styles_myself.cssとscripts_myself.jsは、サイト上のテンプレートをそのままコピペしてあります。
ファイルのパスは各々調節してください。

その後の調整

実装が完了すると以下の様になると思います。

しかし、このままだとスライダーだけのページになってしまうので、追加したcssを編集します。

styles_myself.css

body {
  margin: 0;
  /* overflow: hidden; */
}

canvas {
  /* background-image: radial-gradient(#666, #333); */
}

#instructions {
  position: absolute;
  color: #fff;
  bottom: 0;
  padding-bottom: 6px;
  font-family: sans-serif;
  width: 100%;
  text-align: center;
  pointer-events: none;
}

background-imageとoverflowをコメントアウトすることで背景を消し、スライダーを表示させることができます。

最後に

このスライダーはThree.jsが使われているそうです。
私は、Three.jsは触ったことがないばかりか、HTML,css,JavaScriptについての知識もあまりないので、もしより良い改善策がありましたら、ご教授ください。
また著作権などの権利については、ご自身でお調べになってから使ってくださいね！
最後まで見ていただき、ありがとうございました。

参考にさせていただいたサイト

https://photoshopvip.net/100275
https://codepen.io/zadvorsky/pen/PNXbGo