Three.jsを記述するための準備

今回、投稿するに当たりまして、参考にさせて頂いた記事になります。

https://ics.media/entry/14771/
https://qiita.com/watabo_shi/items/bf9bcd4569b6d480c608

ありがとうございました！！

以下、Three.jsを記述するための準備になります。

1.Three.js公式ページよりThree.js-masterのダウンロードを行います。
公式ページ左側、メニューcode/downloadより取得が可能です。
https://threejs.org/

2.ファイルの移動

ダウンロードしたファイルの中から
three.js-master/build/three.jsファイルをapp/javascriptへコピーします。
この際に、app/javascript/index.jsを作成し、

また

app/javascript/packs/application.js

reqire("../index")

と記述致します。

3. layouts/application.html.erbへの記述
次に

layouts/application.html.erb

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

と記述致します。

4.canvas要素にidの指定

three.jsによる記述を表示させたい場所に以下のように記述致します。

html.erb

  <canvas id="myCanvas"></canvas>

5.index.jsへの記述

最後に以下のように記述致します。

javascript/index.js

  function init() {
  const width = 960;//表示する画面幅の指定
  const height = 540;//表示する画面の高さの指定
  const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector("#myCanvas")//idの取得
  });

  renderer.setSize(width, height);

  //以下にThree.jsの記述を行います。

6.Three.jsの記述を行うための準備完了です！！

最後まで、ご閲覧頂きありがとうございました！
誤っている箇所、認識が不足している部分についてご指摘いただければ幸いに存じます。